@metrevals/inspect-scout-viewer 0.3.2-beta.1764711188 → 0.3.3-beta.1765542109

package/lib/index.js

@@ -5729,7 +5729,7 @@ function isHtmlLinkDescriptor(object2) {
   return typeof object2.rel === "string" && typeof object2.href === "string";
 }
 async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
-  let links = await Promise.all(
+  let links2 = await Promise.all(
     matches.map(async (match3) => {
       let route = manifest.routes[match3.route.id];
       if (route) {
@@ -5740,7 +5740,7 @@ async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
     })
   );
   return dedupeLinkDescriptors(
-    links.flat(1).filter(isHtmlLinkDescriptor).filter((link2) => link2.rel === "stylesheet" || link2.rel === "preload").map(
+    links2.flat(1).filter(isHtmlLinkDescriptor).filter((link2) => link2.rel === "stylesheet" || link2.rel === "preload").map(
       (link2) => link2.rel === "stylesheet" ? { ...link2, rel: "prefetch", as: "style" } : { ...link2, rel: "prefetch" }
     )
   );
@@ -5946,9 +5946,9 @@ function useKeyedPrefetchLinks(matches) {
   React3.useEffect(() => {
     let interrupted = false;
     void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
-      (links) => {
+      (links2) => {
         if (!interrupted) {
-          setKeyedPrefetchLinks(links);
+          setKeyedPrefetchLinks(links2);
         }
       }
     );
@@ -6511,24 +6511,24 @@ function clsx() {
   return n2;
 }
 const wrapper$2 = "_wrapper_1tajk_1";
-const container$h = "_container_1tajk_12";
+const container$j = "_container_1tajk_12";
 const animate = "_animate_1tajk_21";
-const styles$1m = {
+const styles$1q = {
   wrapper: wrapper$2,
-  container: container$h,
+  container: container$j,
   animate
 };
 const ActivityBar = ({ animating }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1m.wrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1q.wrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      className: clsx(styles$1m.container),
+      className: clsx(styles$1q.container),
       role: "progressbar",
       "aria-label": "Progress bar",
       "aria-valuenow": 25,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      children: animating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1m.animate })
+      children: animating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1q.animate })
     }
   ) });
 };
@@ -9721,6 +9721,16 @@ const createStore$1 = (api) => create$2()(
           set3((state) => {
             state.dataframeWrapText = wrap2;
           });
+        },
+        setDataframeFilterColumns: (columns2) => {
+          set3((state) => {
+            state.dataframeFilterColumns = columns2;
+          });
+        },
+        setDataframeShowFilterColumns: (show) => {
+          set3((state) => {
+            state.dataframeShowFilterColumns = show;
+          });
         }
       })),
       {
@@ -9928,7 +9938,7 @@ function useRafThrottle(callback) {
 }
 const tabs$2 = "_tabs_1sz0h_1";
 const tabContents = "_tabContents_1sz0h_5";
-const scrollable = "_scrollable_1sz0h_10";
+const scrollable$1 = "_scrollable_1sz0h_10";
 const tab$1 = "_tab_1sz0h_1";
 const tabItem = "_tabItem_1sz0h_25";
 const tabIcon = "_tabIcon_1sz0h_29";
@@ -9937,7 +9947,7 @@ const tabStyle = "_tabStyle_1sz0h_43";
 const moduleStyles = {
   tabs: tabs$2,
   tabContents,
-  scrollable,
+  scrollable: scrollable$1,
   tab: tab$1,
   tabItem,
   tabIcon,
@@ -10159,6 +10169,7 @@ const ApplicationIcons = {
   edit: "bi bi-pencil-square",
   error: "bi bi-exclamation-circle-fill",
   file: "bi bi-file-code",
+  filter: "bi bi-funnel",
   folder: "bi bi-folder",
   highlight: "bi bi-highlighter",
   info: "bi bi-info-circle",
@@ -10183,12 +10194,14 @@ const ApplicationIcons = {
   next: "bi bi-chevron-right",
   noSamples: "bi bi-ban",
   pendingTask: "bi bi-clock-fill",
+  pendingTaskSubtle: "bi bi-clock",
   play: "bi bi-play-fill",
   previous: "bi bi-chevron-left",
   refuse: "bi bi-ban",
   role: {
     tool: "bi bi-tools"
   },
+  running: "bi bi-stars",
   sample: "bi bi-database",
   samples: "bi bi-file-spreadsheet",
   sandbox: "bi bi-box-seam",
@@ -10198,6 +10211,7 @@ const ApplicationIcons = {
     use_tools: "bi bi-tools"
   },
   success: "bi bi-check-circle-fill",
+  successSubtle: "bi bi-check-circle",
   tree: {
     open: "bi bi-caret-down-fill",
     closed: "bi bi-caret-right-fill"
@@ -10207,7 +10221,7 @@ const ApplicationIcons = {
 };
 const toolButton = "_toolButton_1y0d0_1";
 const latched = "_latched_1y0d0_17";
-const styles$1l = {
+const styles$1p = {
   toolButton,
   latched
 };
@@ -10219,11 +10233,11 @@ const ToolButton = forwardRef(
         ref: ref2,
         type: "button",
         className: clsx(
-          styles$1l.toolButton,
+          styles$1p.toolButton,
           "btn",
           "btn-tools",
           className2,
-          latched2 ? styles$1l.latched : void 0
+          latched2 ? styles$1p.latched : void 0
         ),
         ...rest,
         children: [
@@ -34900,7 +34914,7 @@ function formatValue(v, options = {}) {
 function toHTML(table2, options = {}) {
   const names = columns(table2, options.columns);
   const { align: align2, format: format2 } = formats(table2, names, options);
-  const style2 = styles$1k(options);
+  const style2 = styles$1o(options);
   const nullish = options.null;
   const alignValue = (a2) => a2 === "c" ? "center" : a2 === "r" ? "right" : "left";
   const escape2 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -34930,7 +34944,7 @@ function toHTML(table2, options = {}) {
   });
   return text2 + "</tbody></table>";
 }
-function styles$1k(options) {
+function styles$1o(options) {
   return mapObject(
     options.style,
     (value2) => isFunction$1(value2) ? value2 : () => value2
@@ -36494,7 +36508,10 @@ function castColumns(table2) {
   if (hasScanRefusal) {
     derivations.scan_error_refusal = escape$2(
       (d) => {
-        return d.scan_error_refusal?.toLowerCase() === "true";
+        if (typeof d.scan_error_refusal === "string") {
+          return d.scan_error_refusal?.toLowerCase() === "true";
+        }
+        return !!d.scan_error_refusal;
       }
     );
   }
@@ -38203,7 +38220,7 @@ const useScannerData = (columnTable, scanResultUuid) => {
           transcriptSourceUri,
           validationResult,
           validationTarget,
-          value: value2 || null,
+          value: value2 ?? null,
           valueType
         };
         let typedData;
@@ -38473,7 +38490,7 @@ const toRelativePath = (absolutePath, basePath) => {
   }
   return normalizedPath;
 };
-const header$2 = "_header_oy6cz_1";
+const header$3 = "_header_oy6cz_1";
 const bordered$1 = "_bordered_oy6cz_11";
 const breadcrumbs = "_breadcrumbs_oy6cz_15";
 const ellipsis = "_ellipsis_oy6cz_26";
@@ -38482,8 +38499,8 @@ const right$2 = "_right_oy6cz_41";
 const toolbarButton = "_toolbarButton_oy6cz_50";
 const pathContainer = "_pathContainer_oy6cz_58";
 const hasChildren = "_hasChildren_oy6cz_62";
-const styles$1j = {
-  header: header$2,
+const styles$1n = {
+  header: header$3,
   bordered: bordered$1,
   breadcrumbs,
   ellipsis,
@@ -38620,38 +38637,38 @@ const Navbar = ({ bordered: bordered2 = true, children: children2 }) => {
       className: clsx(
         "text-size-smaller",
         "header-nav",
-        styles$1j.header,
-        bordered2 ? styles$1j.bordered : void 0
+        styles$1n.header,
+        bordered2 ? styles$1n.bordered : void 0
       ),
       "aria-label": "breadcrumb",
       "data-unsearchable": true,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1j.left), children: [
-          backUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: backUrl, className: clsx(styles$1j.toolbarButton), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.navbar.back) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1n.left), children: [
+          backUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: backUrl, className: clsx(styles$1n.toolbarButton), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.navbar.back) }) }),
           !singleFileMode && /* @__PURE__ */ jsxRuntimeExports.jsx(
             Link,
             {
               to: scansRoute(),
-              className: clsx(styles$1j.toolbarButton),
+              className: clsx(styles$1n.toolbarButton),
               onClick: () => {
               },
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.navbar.home) })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1j.pathContainer), ref: pathContainerRef, children: resultsDir ? /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: clsx("breadcrumb", styles$1j.breadcrumbs), children: visibleSegments.map((segment2, index) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1n.pathContainer), ref: pathContainerRef, children: resultsDir ? /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: clsx("breadcrumb", styles$1n.breadcrumbs), children: visibleSegments.map((segment2, index) => {
             const isLast = index === visibleSegments.length - 1;
             const shouldShowEllipsis = showEllipsis && index === 1 && visibleSegments.length >= 2;
             return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-              shouldShowEllipsis && /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: clsx("breadcrumb-item", styles$1j.ellipsis), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "..." }) }),
+              shouldShowEllipsis && /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: clsx("breadcrumb-item", styles$1n.ellipsis), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "..." }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "li",
                 {
                   className: clsx(
-                    styles$1j.pathLink,
+                    styles$1n.pathLink,
                     "breadcrumb-item",
                     isLast && !singleFileMode ? "active" : void 0
                   ),
-                  children: segment2.url && !singleFileMode && !isLast ? /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: segment2.url, children: segment2.text }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx(styles$1j.pathSegment), children: segment2.text })
+                  children: segment2.url && !singleFileMode && !isLast ? /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: segment2.url, children: segment2.text }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx(styles$1n.pathSegment), children: segment2.text })
                 }
               )
             ] }, index);
@@ -38661,8 +38678,8 @@ const Navbar = ({ bordered: bordered2 = true, children: children2 }) => {
           "div",
           {
             className: clsx(
-              styles$1j.right,
-              children2 ? styles$1j.hasChildren : void 0
+              styles$1n.right,
+              children2 ? styles$1n.hasChildren : void 0
             ),
             children: children2
           }
@@ -40134,21 +40151,21 @@ const CardBody = ({
 const Card = ({ id: id2, children: children2, className: className2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", className2), id: id2, children: children2 });
 };
-const container$g = "_container_1cz5u_1";
+const container$i = "_container_1cz5u_1";
 const traceback = "_traceback_1cz5u_5";
-const styles$1i = {
-  container: container$g,
+const styles$1m = {
+  container: container$i,
   traceback
 };
 const ErrorPanel$1 = ({ error: error2, traceback: traceback2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: clsx(styles$1i.container), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: clsx(styles$1m.container), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { type: "modern", children: "Error" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller"), children: error2 }),
       traceback2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
         ANSIDisplay,
         {
-          className: clsx(styles$1i.traceback, "text-size-smaller"),
+          className: clsx(styles$1m.traceback, "text-size-smaller"),
           output: traceback2
         }
       )
@@ -40156,12 +40173,12 @@ const ErrorPanel$1 = ({ error: error2, traceback: traceback2 }) => {
   ] });
 };
 const labeledValue = "_labeledValue_6obbb_1";
-const row$3 = "_row_6obbb_6";
+const row$4 = "_row_6obbb_6";
 const column = "_column_6obbb_10";
 const labeledValueLabel = "_labeledValueLabel_6obbb_14";
-const styles$1h = {
+const styles$1l = {
   labeledValue,
-  row: row$3,
+  row: row$4,
   column,
   labeledValueLabel
 };
@@ -40177,8 +40194,8 @@ const LabeledValue = ({
     "div",
     {
       className: clsx(
-        styles$1h.labeledValue,
-        layout === "column" ? styles$1h.column : styles$1h.row,
+        styles$1l.labeledValue,
+        layout === "column" ? styles$1l.column : styles$1l.row,
         className2
       ),
       style: {
@@ -40189,14 +40206,14 @@ const LabeledValue = ({
           "div",
           {
             className: clsx(
-              styles$1h.labeledValueLabel,
+              styles$1l.labeledValueLabel,
               "text-style-label",
               "text-style-secondary"
             ),
             children: label2
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1h.labeledValueValue), style: { ...valueStyle }, children: children2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1l.labeledValueValue), style: { ...valueStyle }, children: children2 })
       ]
     }
   );
@@ -43423,7 +43440,7 @@ const moreToggleButton = "_moreToggleButton_1ka1g_36";
 const separator$4 = "_separator_1ka1g_44";
 const inlineRight = "_inlineRight_1ka1g_50";
 const blockLeft = "_blockLeft_1ka1g_56";
-const styles$1g = {
+const styles$1k = {
   expandablePanel,
   expandableBordered,
   expandableCollapsed,
@@ -43475,10 +43492,10 @@ const ExpandablePanel = memo$1(
           style: baseStyles,
           ref: contentRef,
           className: clsx(
-            styles$1g.expandablePanel,
-            collapsed ? styles$1g.expandableCollapsed : void 0,
-            border ? styles$1g.expandableBordered : void 0,
-            showToggle ? styles$1g.padBottom : void 0,
+            styles$1k.expandablePanel,
+            collapsed ? styles$1k.expandableCollapsed : void 0,
+            border ? styles$1k.expandableBordered : void 0,
+            showToggle ? styles$1k.padBottom : void 0,
             className2
           ),
           children: [
@@ -43504,7 +43521,7 @@ const ExpandablePanel = memo$1(
           position: "block-left"
         }
       ) }),
-      showToggle && layout === "inline-right" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1g.separator) })
+      showToggle && layout === "inline-right" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1k.separator) })
     ] });
   }
 );
@@ -43523,15 +43540,15 @@ const MoreToggle = ({
     "div",
     {
       className: clsx(
-        styles$1g.moreToggle,
-        border ? styles$1g.bordered : void 0,
-        position === "inline-right" ? styles$1g.inlineRight : styles$1g.blockLeft
+        styles$1k.moreToggle,
+        border ? styles$1k.bordered : void 0,
+        position === "inline-right" ? styles$1k.inlineRight : styles$1k.blockLeft
       ),
       style: style2,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
-          className: clsx(styles$1g.moreToggleButton, "text-size-smallest"),
+          className: clsx(styles$1k.moreToggleButton, "text-size-smallest"),
           onClick: handleClick,
           children: [
             text2,
@@ -43628,7 +43645,7 @@ const keyPairBordered = "_keyPairBordered_qjlxf_9";
 const key = "_key_qjlxf_1";
 const pre = "_pre_qjlxf_19";
 const treeIcon = "_treeIcon_qjlxf_23";
-const styles$1f = {
+const styles$1j = {
   keyPairContainer,
   keyPairBordered,
   key,
@@ -43639,7 +43656,7 @@ const visible = "_visible_tm52u_1";
 const hidden$2 = "_hidden_tm52u_5";
 const pills = "_pills_tm52u_9";
 const pill = "_pill_tm52u_9";
-const styles$1e = {
+const styles$1i = {
   visible,
   hidden: hidden$2,
   pills,
@@ -43669,7 +43686,7 @@ const NavPills = ({ id: id2, children: children2 }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: child["props"]?.title === activeItem ? styles$1e.visible : styles$1e.hidden,
+        className: child["props"]?.title === activeItem ? styles$1i.visible : styles$1i.hidden,
         children: child
       },
       `nav-pill-container-${idx}`
@@ -43679,7 +43696,7 @@ const NavPills = ({ id: id2, children: children2 }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
-        className: clsx("nav", "nav-pills", styles$1e.pills),
+        className: clsx("nav", "nav-pills", styles$1i.pills),
         role: "tablist",
         "aria-orientation": "horizontal",
         children: navPills
@@ -43715,7 +43732,7 @@ const NavPill = ({
           "nav-link",
           "text-style-label",
           active ? "active " : "",
-          styles$1e.pill
+          styles$1i.pill
         ),
         "data-target": title2,
         onClick: handleClick,
@@ -43731,11 +43748,12 @@ const Buckets = {
   final: 1e3
 };
 const copyButton = "_copyButton_1goi8_1";
-const styles$1d = {
+const styles$1h = {
   copyButton
 };
 const CopyButton = ({
   icon: icon2 = ApplicationIcons.copy,
+  title: title2,
   value: value2,
   onCopySuccess,
   onCopyError,
@@ -43761,12 +43779,13 @@ const CopyButton = ({
     "button",
     {
       type: "button",
-      className: clsx("copy-button", styles$1d.copyButton, className2),
+      className: clsx("copy-button", styles$1h.copyButton, className2),
       onClick: () => {
         void handleClick();
       },
       "aria-label": ariaLabel,
       disabled: isCopied,
+      title: title2,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "i",
         {
@@ -43786,7 +43805,7 @@ const indented = "_indented_b8oe1_29";
 const copyLink = "_copyLink_b8oe1_33";
 const metadataLabel = "_metadataLabel_b8oe1_43";
 const hover$1 = "_hover_b8oe1_47";
-const styles$1c = {
+const styles$1g = {
   message,
   systemRole,
   messageGrid,
@@ -45401,28 +45420,28 @@ function linkify$1(state) {
       }
       if (currentToken.type === "text" && state.md.linkify.test(currentToken.content)) {
         const text2 = currentToken.content;
-        let links = state.md.linkify.match(text2);
+        let links2 = state.md.linkify.match(text2);
         const nodes = [];
         let level = currentToken.level;
         let lastPos = 0;
-        if (links.length > 0 && links[0].index === 0 && i2 > 0 && tokens[i2 - 1].type === "text_special") {
-          links = links.slice(1);
+        if (links2.length > 0 && links2[0].index === 0 && i2 > 0 && tokens[i2 - 1].type === "text_special") {
+          links2 = links2.slice(1);
         }
-        for (let ln = 0; ln < links.length; ln++) {
-          const url = links[ln].url;
+        for (let ln = 0; ln < links2.length; ln++) {
+          const url = links2[ln].url;
           const fullUrl = state.md.normalizeLink(url);
           if (!state.md.validateLink(fullUrl)) {
             continue;
           }
-          let urlText = links[ln].text;
-          if (!links[ln].schema) {
+          let urlText = links2[ln].text;
+          if (!links2[ln].schema) {
             urlText = state.md.normalizeLinkText("http://" + urlText).replace(/^http:\/\//, "");
-          } else if (links[ln].schema === "mailto:" && !/^mailto:/i.test(urlText)) {
+          } else if (links2[ln].schema === "mailto:" && !/^mailto:/i.test(urlText)) {
             urlText = state.md.normalizeLinkText("mailto:" + urlText).replace(/^mailto:/, "");
           } else {
             urlText = state.md.normalizeLinkText(urlText);
           }
-          const pos2 = links[ln].index;
+          const pos2 = links2[ln].index;
           if (pos2 > lastPos) {
             const token2 = new state.Token("text", "", 0);
             token2.content = text2.slice(lastPos, pos2);
@@ -45444,7 +45463,7 @@ function linkify$1(state) {
           token_c.markup = "linkify";
           token_c.info = "auto";
           nodes.push(token_c);
-          lastPos = links[ln].lastIndex;
+          lastPos = links2[ln].lastIndex;
         }
         if (lastPos < text2.length) {
           const token2 = new state.Token("text", "", 0);
@@ -49375,17 +49394,17 @@ function unescapeCodeHtmlEntities(str) {
   );
 }
 const cite = "_cite_1t1bm_1";
-const styles$1b = {
+const styles$1f = {
   cite
 };
 const panel$1 = "_panel_twp3v_1";
-const container$f = "_container_twp3v_7";
-const styles$1a = {
+const container$h = "_container_twp3v_7";
+const styles$1e = {
   panel: panel$1,
-  container: container$f
+  container: container$h
 };
 const NoContentsPanel = ({ text: text2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1a.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1a.container, "text-size-smaller"), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1e.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1e.container, "text-size-smaller"), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.noSamples }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: text2 })
   ] }) });
@@ -51147,7 +51166,7 @@ const PopOver = ({
     opacity: state?.placement ? 1 : 0,
     transition: "opacity 0.1s",
     maxWidth: "80%",
-    maxHeight: "50%",
+    maxHeight: "80%",
     overflowY: "hidden"
   };
   if (!isOpen || hoverDelay > 0 && !shouldShowPopover) {
@@ -51326,7 +51345,7 @@ const PopOver = ({
   }
   return popperContent;
 };
-const MarkdownDivWithReferences = forwardRef(({ markdown, references, className: className2, style: style2, omitMedia }, ref2) => {
+const MarkdownDivWithReferences = forwardRef(({ markdown, references, options, className: className2, style: style2, omitMedia }, ref2) => {
   const containerRef = useRef(null);
   const [positionEl, setPositionEl] = useState(null);
   const [currentRef, setCurrentRef] = useState(null);
@@ -51344,14 +51363,14 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
       let processedHtml = html;
       references?.forEach((ref22) => {
         const escapedCite = ref22.cite.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const regex2 = new RegExp(escapedCite, "g");
+        const regex2 = new RegExp(`${escapedCite}(?![a-zA-Z0-9])`, "g");
         const href = ref22.citeUrl || "javascript:void(0)";
-        const replacement = `<a href="${href}" class="${styles$1b.cite}" data-ref-id="${ref22.id}">${ref22.cite}</a>`;
+        const replacement = `<a href="${href}" class="${styles$1f.cite}" data-ref-id="${ref22.id}">${ref22.cite}</a>`;
         processedHtml = processedHtml.replace(regex2, replacement);
       });
       return processedHtml;
     },
-    [references, styles$1b.cite]
+    [references, styles$1f.cite]
   );
   const memoizedMarkdown = useMemo(
     () => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -51372,8 +51391,11 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
     if (!container2) {
       return;
     }
+    if (options?.previewRefsOnHover === false) {
+      return;
+    }
     const citeLinks = container2.querySelectorAll(
-      `.${styles$1b.cite}`
+      `.${styles$1f.cite}`
     );
     const handleMouseEnter = (e) => {
       const el = e.currentTarget;
@@ -51390,6 +51412,9 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
       setShowingRefPopover(popoverKey(ref22));
     };
     const handleClick = (e) => {
+      clearShowingRefPopover();
+      setCurrentRef(null);
+      setPositionEl(null);
       e.stopPropagation();
     };
     const cleanup = [];
@@ -51407,10 +51432,11 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
   }, [
     markdown,
     refMap,
-    styles$1b.cite,
+    styles$1f.cite,
     setPositionEl,
     setCurrentRef,
-    setShowingRefPopover
+    setShowingRefPopover,
+    clearShowingRefPopover
   ]);
   const key2 = currentRef ? popoverKey(currentRef) : "unknown-markdown-ref-popover";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(className2), ref: containerRef, children: [
@@ -51429,7 +51455,7 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
           }
         },
         placement: "auto",
-        hoverDelay: 200,
+        hoverDelay: 400,
         showArrow: true,
         children: currentRef.citePreview && currentRef.citePreview() || /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "No preview available." })
       }
@@ -51438,7 +51464,7 @@ const MarkdownDivWithReferences = forwardRef(({ markdown, references, className:
 });
 const popoverKey = (ref2) => `markdown-ref-popover-${ref2.id}`;
 const content = "_content_13ihw_1";
-const styles$19 = {
+const styles$1d = {
   content
 };
 forwardRef(
@@ -51447,28 +51473,31 @@ forwardRef(
       "pre",
       {
         ref: ref2,
-        className: clsx(styles$19.content, "text-size-smaller", className2),
+        className: clsx(styles$1d.content, "text-size-smaller", className2),
         style: style2,
         children: text2
       }
     );
   }
 );
-const RenderedText = forwardRef(({ markdown, references, style: style2, className: className2, forceRender, omitMedia }, ref2) => {
-  {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MarkdownDivWithReferences,
-      {
-        ref: ref2,
-        markdown,
-        references,
-        style: style2,
-        className: className2,
-        omitMedia
-      }
-    );
+const RenderedText = forwardRef(
+  ({ markdown, references, style: style2, className: className2, forceRender, omitMedia, options }, ref2) => {
+    {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MarkdownDivWithReferences,
+        {
+          ref: ref2,
+          markdown,
+          references,
+          options,
+          style: style2,
+          className: className2,
+          omitMedia
+        }
+      );
+    }
   }
-});
+);
 const isJson = (text2) => {
   text2 = text2.trim();
   if (text2.startsWith("{") && text2.endsWith("}")) {
@@ -51509,23 +51538,23 @@ const parsedJson = (text2) => {
   return void 0;
 };
 const contentData = "_contentData_1sd1z_1";
-const styles$18 = {
+const styles$1c = {
   contentData
 };
 const webSearch = "_webSearch_1376z_1";
 const query$1 = "_query_1376z_8";
-const styles$17 = {
+const styles$1b = {
   webSearch,
   query: query$1
 };
 const WebSearch = ({ query: query2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$17.webSearch, "text-size-smaller"), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1b.webSearch, "text-size-smaller"), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-style-label", "text-style-secondary"), children: "Web Search:" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx(styles$17.query, "text-size-smallest"), children: query2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx(styles$1b.query, "text-size-smallest"), children: query2 })
   ] });
 };
 const result$2 = "_result_1mixg_12";
-const styles$16 = {
+const styles$1a = {
   result: result$2
 };
 const WebSearchResults = ({
@@ -51536,7 +51565,7 @@ const WebSearchResults = ({
       "div",
       {
         className: clsx(
-          styles$16.label,
+          styles$1a.label,
           "text-style-label",
           "text-style-secondary",
           "text-size-smaller"
@@ -51544,10 +51573,10 @@ const WebSearchResults = ({
         children: "Results"
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: clsx(styles$16.results, "text-size-smaller"), children: results.map((result2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: clsx(styles$1a.results, "text-size-smaller"), children: results.map((result2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       "li",
       {
-        className: clsx(styles$16.result, "text-style-secondary"),
+        className: clsx(styles$1a.result, "text-style-secondary"),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
           {
@@ -51571,17 +51600,17 @@ const ContentDataView = ({ id: id2, contentData: contentData2 }) => {
   );
   if (!renderer) {
     const { encrypted_content, ...record } = renderableData;
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$18.contentData), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1c.contentData), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       RecordTree,
       {
         id: `${id2}-tree`,
         record,
-        className: clsx(styles$18.data),
+        className: clsx(styles$1c.data),
         defaultExpandLevel: 0
       }
     ) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$18.contentData), children: renderer.render(renderableData) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1c.contentData), children: renderer.render(renderableData) });
 };
 const webSearchServerToolRenderer = {
   name: "WebSearch",
@@ -51623,7 +51652,7 @@ const serverToolRenderer = {
         {
           id: data2.name || "server-tool",
           record: data2,
-          className: clsx(styles$18.data)
+          className: clsx(styles$1c.data)
         }
       )
     ] });
@@ -51641,7 +51670,7 @@ const documentFrame = "_documentFrame_1576h_1";
 const documentFrameTitle = "_documentFrameTitle_1576h_9";
 const downloadLink = "_downloadLink_1576h_16";
 const imageDocument = "_imageDocument_1576h_21";
-const styles$15 = {
+const styles$19 = {
   documentFrame,
   documentFrameTitle,
   downloadLink,
@@ -51656,7 +51685,7 @@ const ContentDocumentView = ({
     return /* @__PURE__ */ jsxRuntimeExports.jsx(ContentDocumentFrame, { document: document2, downloadable: canDownloadFiles, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        className: clsx(styles$15.imageDocument),
+        className: clsx(styles$19.imageDocument),
         src: document2.document,
         alt: document2.filename,
         id: id2
@@ -51681,17 +51710,17 @@ const ContentDocumentFrame = ({
     "div",
     {
       className: clsx(
-        styles$15.documentFrame,
+        styles$19.documentFrame,
         "text-size-small",
         "text-style-secondary"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$15.documentFrameTitle), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$19.documentFrameTitle), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(iconForMimeType(document2.mime_type)) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: downloadable ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "a",
             {
-              className: clsx(styles$15.downloadLink),
+              className: clsx(styles$19.downloadLink),
               onClick: () => {
               },
               children: document2.filename
@@ -51704,7 +51733,7 @@ const ContentDocumentFrame = ({
   );
 };
 const jsonMessage = "_jsonMessage_oxf8d_1";
-const styles$14 = {
+const styles$18 = {
   jsonMessage
 };
 const JsonMessageContent = ({
@@ -51717,7 +51746,7 @@ const JsonMessageContent = ({
     {
       id: id2,
       record: json2,
-      className: clsx(styles$14.jsonMessage, className2),
+      className: clsx(styles$18.jsonMessage, className2),
       useBorders: false
     }
   );
@@ -51729,7 +51758,7 @@ const decodeHtmlEntities = (text2) => {
 };
 const citations = "_citations_1ggvf_1";
 const citationLink = "_citationLink_1ggvf_9";
-const styles$13 = {
+const styles$17 = {
   citations,
   citationLink
 };
@@ -51737,7 +51766,7 @@ const MessageCitations = ({ citations: citations2 }) => {
   if (citations2.length === 0) {
     return void 0;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$13.citations, "text-size-smallest"), children: citations2.map((citation, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$17.citations, "text-size-smallest"), children: citations2.map((citation, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: index + 1 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCitation, { citation })
   ] }, index)) });
@@ -51757,7 +51786,7 @@ const UrlCitation = ({
     href: citation.url,
     target: "_blank",
     rel: "noopener noreferrer",
-    className: clsx(styles$13.citationLink),
+    className: clsx(styles$17.citationLink),
     title: citation.cited_text && typeof citation.cited_text === "string" ? `${citation.cited_text}
 ${citation.url}` : citation.url,
     children: children2
@@ -51766,7 +51795,7 @@ ${citation.url}` : citation.url,
 const OtherCitation = ({ children: children2 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children2 });
 const contentImage = "_contentImage_8rgix_1";
 const reasoning = "_reasoning_8rgix_6";
-const styles$12 = {
+const styles$16 = {
   contentImage,
   reasoning
 };
@@ -51777,7 +51806,7 @@ const args = "_args_1792k_22";
 const argLabel = "_argLabel_1792k_31";
 const error$2 = "_error_1792k_35";
 const toolPanel = "_toolPanel_1792k_40";
-const styles$11 = {
+const styles$15 = {
   mcpToolUse,
   title: title$3,
   titleText,
@@ -51798,23 +51827,23 @@ const McpToolUse = ({ id: id2, content: content2, className: className2 }) => {
   const titleStr = content2.context ? `${content2.context} — ${content2.name}()` : `${content2.name}()`;
   const listToolsResult = maybeListTools(content2);
   const webSearchResult = maybeWebSearchResult(content2);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: id2, className: clsx(styles$11.mcpToolUse, className2), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id: id2, className: clsx(styles$15.mcpToolUse, className2), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         className: clsx(
-          styles$11.title,
+          styles$15.title,
           "text-size-small",
           "text-style-secondary"
         ),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.role.tool }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$11.titleText, children: titleStr }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$11.type, children: content2.type })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$15.titleText, children: titleStr }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$15.type, children: content2.type })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$11.args, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$15.args, children: [
       Object.keys(args2).map((key2, index) => {
         const value2 = args2[key2];
         let valueRecord = void 0;
@@ -51833,7 +51862,7 @@ const McpToolUse = ({ id: id2, content: content2, className: className2 }) => {
       }),
       webSearchResult ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(LabelDiv, { label: "results" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDiv, { children: webSearchResult.result.map((result2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$11.result, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDiv, { children: webSearchResult.result.map((result2, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$15.result, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
           {
             href: result2.url,
@@ -51848,7 +51877,7 @@ const McpToolUse = ({ id: id2, content: content2, className: className2 }) => {
         {
           id: `${id2}-output`,
           collapse: true,
-          className: clsx(styles$11.toolPanel),
+          className: clsx(styles$15.toolPanel),
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelDiv, { label: tool2.name }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs(ValueDiv, { children: [
@@ -51866,7 +51895,7 @@ const McpToolUse = ({ id: id2, content: content2, className: className2 }) => {
         }
       ) })) : void 0
     ] }),
-    content2.error ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$11.error, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+    content2.error ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$15.error, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
       "Error: ",
       content2.error
     ] }) }) : !listToolsResult && !webSearchResult ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandablePanel, { id: `${id2}-output`, collapse: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -51923,7 +51952,7 @@ const LabelDiv = ({ label: label2 }) => {
     "div",
     {
       className: clsx(
-        styles$11.argLabel,
+        styles$15.argLabel,
         "text-style-secondary",
         "text-size-smaller"
       ),
@@ -51938,7 +51967,7 @@ const toolImage = "_toolImage_1wvgr_1";
 const output = "_output_1wvgr_6";
 const textOutput = "_textOutput_1wvgr_10";
 const textCode = "_textCode_1wvgr_18";
-const styles$10 = {
+const styles$14 = {
   toolImage,
   output,
   textOutput,
@@ -51957,7 +51986,7 @@ const ToolOutput = ({ output: output2, className: className2 }) => {
       } else {
         if (out.image.startsWith("data:")) {
           outputs.push(
-            /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: clsx(styles$10.toolImage), src: out.image }, key2)
+            /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: clsx(styles$14.toolImage), src: out.image }, key2)
           );
         } else {
           outputs.push(/* @__PURE__ */ jsxRuntimeExports.jsx(ToolTextOutput, { text: String(out.image) }, key2));
@@ -51969,14 +51998,14 @@ const ToolOutput = ({ output: output2, className: className2 }) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTextOutput, { text: String(output2) }, "tool-output-single")
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$10.output, className2), children: outputs });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$14.output, className2), children: outputs });
 };
 const ToolTextOutput = ({ text: text2 }) => {
   if (isJson(text2)) {
     const obj = JSON.parse(text2);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(JsonMessageContent, { id: `1-json`, json: obj });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$10.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$10.textCode), children: text2.trim() }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$14.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$14.textCode), children: text2.trim() }) });
 };
 const isMessageContent = (content2) => {
   return typeof content2 === "object" && content2 !== null && "type" in content2 && typeof content2.type === "string";
@@ -52075,7 +52104,7 @@ const messageRenderers = {
       } else if (!text2) {
         text2 = r2.summary || "Reasoning text not provided.";
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$12.reasoning, "text-size-small"), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$16.reasoning, "text-size-small"), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -52098,7 +52127,7 @@ const messageRenderers = {
     render: (key2, content2, _isLast, _context) => {
       const c2 = content2;
       if (c2.image.startsWith("data:")) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: c2.image, className: styles$12.contentImage }, key2);
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: c2.image, className: styles$16.contentImage }, key2);
       } else {
         return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: c2.image }, key2);
       }
@@ -52249,10 +52278,10 @@ const ChatMessage = memo$1(
         className: clsx(
           message2.role,
           "text-size-base",
-          styles$1c.message,
-          message2.role === "system" ? styles$1c.systemRole : void 0,
-          message2.role === "user" ? styles$1c.userRole : void 0,
-          mouseOver ? styles$1c.hover : void 0
+          styles$1g.message,
+          message2.role === "system" ? styles$1g.systemRole : void 0,
+          message2.role === "user" ? styles$1g.userRole : void 0,
+          mouseOver ? styles$1g.hover : void 0
         ),
         onMouseEnter: () => setMouseOver(true),
         onMouseLeave: () => setMouseOver(false),
@@ -52261,8 +52290,8 @@ const ChatMessage = memo$1(
             "div",
             {
               className: clsx(
-                styles$1c.messageGrid,
-                message2.role === "tool" ? styles$1c.toolMessageGrid : void 0,
+                styles$1g.messageGrid,
+                message2.role === "tool" ? styles$1g.toolMessageGrid : void 0,
                 "text-style-label"
               ),
               children: [
@@ -52273,7 +52302,7 @@ const ChatMessage = memo$1(
                   {
                     icon: ApplicationIcons.link,
                     value: toFullUrl(messageUrl),
-                    className: clsx(styles$1c.copyLink)
+                    className: clsx(styles$1g.copyLink)
                   }
                 ) : ""
               ]
@@ -52283,8 +52312,8 @@ const ChatMessage = memo$1(
             "div",
             {
               className: clsx(
-                styles$1c.messageContents,
-                indented2 ? styles$1c.indented : void 0
+                styles$1g.messageContents,
+                indented2 ? styles$1g.indented : void 0
               ),
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -52300,7 +52329,7 @@ const ChatMessage = memo$1(
                   LabeledValue,
                   {
                     label: "Metadata",
-                    className: clsx(styles$1c.metadataLabel, "text-size-smaller"),
+                    className: clsx(styles$1g.metadataLabel, "text-size-smaller"),
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                       RecordTree,
                       {
@@ -52319,20 +52348,20 @@ const ChatMessage = memo$1(
     );
   }
 );
-const grid$2 = "_grid_17ltx_1";
+const grid$3 = "_grid_17ltx_1";
 const number = "_number_17ltx_8";
 const user = "_user_17ltx_12";
-const container$e = "_container_17ltx_18";
+const container$g = "_container_17ltx_18";
 const first = "_first_17ltx_26";
 const last = "_last_17ltx_33";
 const label$4 = "_label_17ltx_40";
 const highlight = "_highlight_17ltx_44";
 const bottomMargin = "_bottomMargin_17ltx_48";
-const styles$$ = {
-  grid: grid$2,
+const styles$13 = {
+  grid: grid$3,
   number,
   user,
-  container: container$e,
+  container: container$g,
   first,
   last,
   label: label$4,
@@ -52767,7 +52796,7 @@ const extractInput = (args2, inputDescriptor) => {
 const sourcePanel = "_sourcePanel_bat6y_1";
 const simple = "_simple_bat6y_6";
 const code$2 = "_code_bat6y_11";
-const styles$_ = {
+const styles$12 = {
   sourcePanel,
   simple,
   code: code$2
@@ -52786,8 +52815,8 @@ const SourceCodePanel = ({
     "pre",
     {
       className: clsx(
-        styles$_.sourcePanel,
-        simple2 ? styles$_.simple : "",
+        styles$12.sourcePanel,
+        simple2 ? styles$12.simple : "",
         className2
       ),
       style: style2,
@@ -52795,7 +52824,7 @@ const SourceCodePanel = ({
         "code",
         {
           id: id2,
-          className: clsx("source-code", styles$_.code, `language-${language}`),
+          className: clsx("source-code", styles$12.code, `language-${language}`),
           children: code2
         }
       )
@@ -52819,12 +52848,12 @@ const AnswerToolCallView = (props) => {
   );
 };
 const toolCallView = "_toolCallView_x6cus_1";
-const styles$Z = {
+const styles$11 = {
   toolCallView
 };
 const todoList = "_todoList_1t8rx_1";
 const inProgress = "_inProgress_1t8rx_9";
-const styles$Y = {
+const styles$10 = {
   todoList,
   inProgress
 };
@@ -52844,7 +52873,7 @@ const toToolTodos = (obj) => {
 };
 const TodoWriteInput = ({ contents: contents2, parentRef }) => {
   const todoItems = toToolTodos(contents2);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: parentRef, className: clsx(styles$Y.todoList), children: todoItems.map((todo) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: parentRef, className: clsx(styles$10.todoList), children: todoItems.map((todo) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "i",
@@ -52859,9 +52888,9 @@ const TodoWriteInput = ({ contents: contents2, parentRef }) => {
         "span",
         {
           className: clsx(
-            styles$Y.todoItem,
+            styles$10.todoItem,
             "text-size-smallest",
-            todo.status === "in_progress" ? styles$Y.inProgress : void 0
+            todo.status === "in_progress" ? styles$10.inProgress : void 0
           ),
           children: todo.content
         }
@@ -52872,7 +52901,7 @@ const TodoWriteInput = ({ contents: contents2, parentRef }) => {
 const outputPre = "_outputPre_1jznn_1";
 const toolView = "_toolView_1jznn_7";
 const outputCode = "_outputCode_1jznn_15";
-const styles$X = {
+const styles$$ = {
   outputPre,
   toolView,
   outputCode
@@ -52889,7 +52918,7 @@ const ToolInput = (props) => {
       {
         markdown: toolCallView2.content,
         ref: sourceCodeRef,
-        className: clsx("tool-output", styles$X.toolView, className2)
+        className: clsx("tool-output", styles$$.toolView, className2)
       }
     );
   } else {
@@ -52919,8 +52948,8 @@ const RenderTool = ({
     {
       className: clsx(
         "tool-output",
-        styles$X.outputPre,
-        styles$X.bottomMargin,
+        styles$$.outputPre,
+        styles$$.bottomMargin,
         className2
       ),
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -52930,7 +52959,7 @@ const RenderTool = ({
             "source-code",
             "sourceCode",
             contentType ? `language-${contentType}` : void 0,
-            styles$X.outputCode
+            styles$$.outputCode
           ),
           children: formattedContent
         }
@@ -52941,16 +52970,16 @@ const RenderTool = ({
 const image = "_image_1vcac_1";
 const toolTitle = "_toolTitle_1vcac_6";
 const description = "_description_1vcac_10";
-const styles$W = {
+const styles$_ = {
   image,
   toolTitle,
   description
 };
 const ToolTitle = ({ title: title2, description: description2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("bi", "bi-tools", styles$W.image) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-small", styles$W.toolTitle), children: title2 }),
-    description2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: clsx(styles$W.description, "text-size-smallest"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("bi", "bi-tools", styles$_.image) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-small", styles$_.toolTitle), children: title2 }),
+    description2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: clsx(styles$_.description, "text-size-smallest"), children: [
       "- ",
       description2
     ] }) : void 0
@@ -53012,7 +53041,7 @@ const ToolCallView = ({
   }
   const contents2 = mode !== "compact" ? input2 : input2 || functionCall;
   const context = defaultContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$Z.toolCallView), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$11.toolCallView), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
       mode !== "compact" && (!view || view.title) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         ToolTitle,
@@ -53144,7 +53173,7 @@ const ChatMessageRow = ({
     }
   }
   if (useLabels) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$$.grid, className2), children: views.map((view, idx) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$13.grid, className2), children: views.map((view, idx) => {
       const label2 = viewLabels[idx];
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -53153,8 +53182,8 @@ const ChatMessageRow = ({
             className: clsx(
               "text-size-smaller",
               "text-style-secondary",
-              styles$$.number,
-              styles$$.label
+              styles$13.number,
+              styles$13.label
             ),
             children: label2
           }
@@ -53163,11 +53192,11 @@ const ChatMessageRow = ({
           "div",
           {
             className: clsx(
-              styles$$.container,
-              highlightUserMessage && resolvedMessage.message.role === "user" ? styles$$.user : void 0,
-              idx === 0 ? styles$$.first : void 0,
-              idx === views.length - 1 ? styles$$.last : void 0,
-              highlightLabeled && label2?.trim() ? styles$$.highlight : void 0
+              styles$13.container,
+              highlightUserMessage && resolvedMessage.message.role === "user" ? styles$13.user : void 0,
+              idx === 0 ? styles$13.first : void 0,
+              idx === views.length - 1 ? styles$13.last : void 0,
+              highlightLabeled && label2?.trim() ? styles$13.highlight : void 0
             ),
             children: view
           }
@@ -53180,13 +53209,13 @@ const ChatMessageRow = ({
         "div",
         {
           className: clsx(
-            styles$$.container,
-            idx === 0 ? styles$$.first : void 0,
-            idx === views.length - 1 ? styles$$.last : void 0,
-            idx === views.length - 1 ? styles$$.bottomMargin : void 0,
+            styles$13.container,
+            idx === 0 ? styles$13.first : void 0,
+            idx === views.length - 1 ? styles$13.last : void 0,
+            idx === views.length - 1 ? styles$13.bottomMargin : void 0,
             className2,
-            styles$$.simple,
-            highlightUserMessage && resolvedMessage.message.role === "user" ? styles$$.user : void 0
+            styles$13.simple,
+            highlightUserMessage && resolvedMessage.message.role === "user" ? styles$13.user : void 0
           ),
           children: view
         }
@@ -53245,7 +53274,7 @@ const resolveToolMessage = (toolMessage) => {
   }
 };
 const ToolCallViewCompact = ({ idx, functionCall }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { className: clsx(styles$$.codeCompact), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { className: clsx(styles$13.codeCompact), children: [
     "tool: ",
     functionCall
   ] }) }, `tool-call-${idx}`);
@@ -53309,26 +53338,6 @@ const normalizeContent = (content2) => {
     return content2;
   }
 };
-const messagesFromEvents = (runningEvents) => {
-  const messages2 = /* @__PURE__ */ new Map();
-  runningEvents.filter((e) => e.event === "model").forEach((e) => {
-    for (const m of e.input) {
-      const inputMessage = m;
-      if (inputMessage.id && !messages2.has(inputMessage.id)) {
-        messages2.set(inputMessage.id, inputMessage);
-      }
-    }
-    const outputMessage = e.output.choices[0]?.message;
-    if (outputMessage?.id) {
-      messages2.set(outputMessage.id, outputMessage);
-    }
-  });
-  if (messages2.size > 0) {
-    return messages2.values().toArray();
-  } else {
-    return [];
-  }
-};
 const ChatView = ({
   id: id2,
   messages: messages2,
@@ -53463,10 +53472,10 @@ function centerTruncate(str, maxLength = 50) {
 function formatPercent(value2) {
   return `${formatPrettyDecimal(value2 * 100, 2)}%`;
 }
-const grid$1 = "_grid_14885_1";
+const grid$2 = "_grid_14885_1";
 const cell = "_cell_14885_8";
-const styles$V = {
-  grid: grid$1,
+const styles$Z = {
+  grid: grid$2,
   cell
 };
 const MetaDataGrid = ({
@@ -53474,12 +53483,11 @@ const MetaDataGrid = ({
   entries: entries2,
   className: className2,
   references,
-  size,
   style: style2,
-  plain
+  options
 }) => {
   const baseId = "metadata-grid";
-  const fontStyle = size === "mini" ? "text-size-smallest" : "text-size-smaller";
+  const fontStyle = options?.size === "mini" ? "text-size-smallest" : "text-size-smaller";
   const entryEls = entryRecords(entries2).map((entry2, index) => {
     const id22 = `${baseId}-value-${index}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
@@ -53488,7 +53496,7 @@ const MetaDataGrid = ({
         {
           style: {
             gridColumn: "1 / -1",
-            borderBottom: `${!plain ? "solid 1px var(--bs-light-border-subtle" : ""}`
+            borderBottom: `${!options?.plain ? "solid 1px var(--bs-light-border-subtle" : ""}`
           }
         }
       ) : void 0,
@@ -53497,7 +53505,7 @@ const MetaDataGrid = ({
         {
           className: clsx(
             `${baseId}-key`,
-            styles$V.cell,
+            styles$Z.cell,
             "text-style-label",
             "text-style-secondary",
             fontStyle
@@ -53505,21 +53513,24 @@ const MetaDataGrid = ({
           children: entry2?.name
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$V.value, `${baseId}-value`, fontStyle), children: entry2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$Z.value, `${baseId}-value`, fontStyle), children: entry2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
         RenderedContent,
         {
           id: id22,
           entry: entry2,
           references,
+          renderOptions: {
+            renderString: "markdown",
+            previewRefsOnHover: options?.previewRefsOnHover
+          },
           renderObject: (obj) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               MetaDataGrid,
               {
                 id: id22,
-                className: clsx(styles$V.nested),
+                className: clsx(styles$Z.nested),
                 entries: obj,
-                size,
-                plain,
+                options,
                 references
               }
             );
@@ -53528,7 +53539,7 @@ const MetaDataGrid = ({
       ) })
     ] }, `${baseId}-record-${index}`);
   });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: id2, className: clsx(className2, styles$V.grid), style: style2, children: entryEls });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: id2, className: clsx(className2, styles$Z.grid), style: style2, children: entryEls });
 };
 const entryRecords = (entries2) => {
   if (!entries2) {
@@ -53546,7 +53557,7 @@ const query = "_query_seqs2_1";
 const summary$3 = "_summary_seqs2_6";
 const preWrap = "_preWrap_seqs2_10";
 const preCompact = "_preCompact_seqs2_15";
-const styles$U = {
+const styles$Y = {
   query,
   summary: summary$3,
   preWrap,
@@ -53668,11 +53679,18 @@ const contentRenderers = (renderObject) => {
         const rendered = entry2.value.trim();
         if (options.renderString === "markdown") {
           return {
-            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: rendered, references })
+            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              RenderedText,
+              {
+                markdown: rendered,
+                references,
+                options: { previewRefsOnHover: options.previewRefsOnHover }
+              }
+            )
           };
         } else {
           return {
-            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$U.preWrap, styles$U.preCompact), children: rendered })
+            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$Y.preWrap, styles$Y.preCompact), children: rendered })
           };
         }
       }
@@ -53706,7 +53724,7 @@ const contentRenderers = (renderObject) => {
             id: id2,
             className: "font-size-small",
             entries: arrayMap,
-            plain: true
+            options: { plain: true }
           }
         );
         return { rendered: arrayRendered };
@@ -53721,7 +53739,7 @@ const contentRenderers = (renderObject) => {
       render: (_id, entry2, _options) => {
         const results = [];
         results.push(
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$U.query, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$Y.query, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.search }),
             " ",
             entry2.value.query
@@ -53733,7 +53751,7 @@ const contentRenderers = (renderObject) => {
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: result2.url, children: result2.url }) })
             );
             results.push(
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller", styles$U.summary), children: result2.summary })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller", styles$Y.summary), children: result2.summary })
             );
           }
         );
@@ -53749,7 +53767,7 @@ const contentRenderers = (renderObject) => {
       },
       render: (_id, entry2, _options) => {
         return {
-          rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$U.preWrap, children: entry2.value })
+          rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$Y.preWrap, children: entry2.value })
         };
       }
     },
@@ -53804,7 +53822,7 @@ const contentRenderers = (renderObject) => {
                 id: id2,
                 className: "font-size-small",
                 entries: entry2.value,
-                plain: true
+                options: { plain: true }
               }
             )
           };
@@ -53929,8 +53947,8 @@ const RecordTree = ({
       "div",
       {
         className: clsx(
-          styles$1f.keyPairContainer,
-          index < items.length - 1 && useBorders ? styles$1f.keyPairBordered : void 0,
+          styles$1j.keyPairContainer,
+          index < items.length - 1 && useBorders ? styles$1j.keyPairBordered : void 0,
           "text-size-small"
         ),
         style: {
@@ -53943,7 +53961,7 @@ const RecordTree = ({
               "data-index": index,
               className: clsx(
                 kRecordTreeKey,
-                styles$1f.key,
+                styles$1j.key,
                 "font-monospace",
                 "text-style-secondary"
               ),
@@ -53953,16 +53971,16 @@ const RecordTree = ({
                 setCollapsed(item2.id, !collapsedIds?.[item2.id]);
               },
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: item2.hasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$1f.pre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: item2.hasChildren ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$1j.pre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "i",
                   {
                     className: clsx(
                       collapsedIds && collapsedIds[item2.id] ? ApplicationIcons.tree.closed : ApplicationIcons.tree.open,
-                      styles$1f.treeIcon
+                      styles$1j.treeIcon
                     )
                   }
                 ) }) : void 0 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("pre", { className: clsx(styles$1f.pre), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("pre", { className: clsx(styles$1j.pre), children: [
                   item2.key,
                   ":"
                 ] })
@@ -54132,7 +54150,7 @@ const col1_3$1 = "_col1_3_sq96g_12";
 const col3$1 = "_col3_sq96g_16";
 const separator$3 = "_separator_sq96g_20";
 const padded = "_padded_sq96g_26";
-const styles$T = {
+const styles$X = {
   wrapper: wrapper$1,
   col2: col2$1,
   col1_3: col1_3$1,
@@ -54194,14 +54212,14 @@ const ModelUsagePanel = ({ usage, className: className2 }) => {
     value: usage.total_tokens,
     secondary: false
   });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$T.wrapper, className2), children: rows.map((row2, idx) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$X.wrapper, className2), children: rows.map((row2, idx) => {
     if (row2.label === "---") {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
           className: clsx(
-            styles$T.separator,
-            row2.padded ? styles$T.padded : void 0
+            styles$X.separator,
+            row2.padded ? styles$X.padded : void 0
           )
         },
         `$usage-sep-${idx}`
@@ -54214,12 +54232,12 @@ const ModelUsagePanel = ({ usage, className: className2 }) => {
             className: clsx(
               "text-style-label",
               "text-style-secondary",
-              row2.secondary ? styles$T.col2 : styles$T.col1_3
+              row2.secondary ? styles$X.col2 : styles$X.col1_3
             ),
             children: row2.label
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$T.col3, children: row2.value ? formatNumber(row2.value) : "" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$X.col3, children: row2.value ? formatNumber(row2.value) : "" })
       ] }, `$usage-row-${idx}`);
     }
   }) });
@@ -54229,7 +54247,7 @@ const tableTokens = "_tableTokens_z217i_5";
 const tableH = "_tableH_z217i_9";
 const model = "_model_z217i_14";
 const cellContents = "_cellContents_z217i_18";
-const styles$S = {
+const styles$W = {
   table,
   tableTokens,
   tableH,
@@ -54244,7 +54262,7 @@ const TokenTable = ({ className: className2, children: children2 }) => {
         "table",
         "table-sm",
         "text-size-smaller",
-        styles$S.table,
+        styles$W.table,
         className2
       ),
       children: children2
@@ -54261,7 +54279,7 @@ const TokenHeader = () => {
           colSpan: 3,
           className: clsx(
             "card-subheading",
-            styles$S.tableTokens,
+            styles$W.tableTokens,
             "text-size-small",
             "text-style-label",
             "text-style-secondary"
@@ -54276,7 +54294,7 @@ const TokenHeader = () => {
         "th",
         {
           className: clsx(
-            styles$S.tableH,
+            styles$W.tableH,
             "text-sixe-small",
             "text-style-label",
             "text-style-secondary"
@@ -54288,7 +54306,7 @@ const TokenHeader = () => {
         "th",
         {
           className: clsx(
-            styles$S.tableH,
+            styles$W.tableH,
             "text-sixe-small",
             "text-style-label",
             "text-style-secondary"
@@ -54301,8 +54319,8 @@ const TokenHeader = () => {
 };
 const TokenRow = ({ model: model2, usage }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$S.model, styles$S.cellContents), children: model2 }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage, className: clsx(styles$S.cellContents) }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$W.model, styles$W.cellContents), children: model2 }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage, className: clsx(styles$W.cellContents) }) })
   ] });
 };
 const ModelTokenTable = ({
@@ -54320,13 +54338,13 @@ const ModelTokenTable = ({
   ] });
 };
 const scanInfo = "_scanInfo_76qrl_1";
-const container$d = "_container_76qrl_7";
-const styles$R = {
+const container$f = "_container_76qrl_7";
+const styles$V = {
   scanInfo,
-  container: container$d
+  container: container$f
 };
 const InfoPanel = ({ result: result2 }) => {
-  return result2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$R.container), children: [
+  return result2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$V.container), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Scanner Info", type: "modern" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScannerInfoPanel, { result: result2 }) })
@@ -54354,7 +54372,7 @@ const InfoPanel = ({ result: result2 }) => {
 };
 const ScannerInfoPanel = ({ result: result2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$R.scanInfo), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$V.scanInfo), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "Name", children: result2?.scannerName }),
       result2?.scannerFile && result2.scannerFile !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "File", children: result2?.scannerFile }),
       (result2?.scanTotalTokens || 0) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "Tokens", children: result2?.scanTotalTokens ? formatNumber(result2.scanTotalTokens) : "" })
@@ -54369,11 +54387,28 @@ const ScannerInfoPanel = ({ result: result2 }) => {
     ) })
   ] });
 };
+const container$e = "_container_5gpfz_1";
+const styles$U = {
+  container: container$e
+};
+const MetadataPanel = ({ result: result2 }) => {
+  const hasMetadata = result2 && Object.keys(result2?.metadata).length > 0;
+  return result2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$U.container, "text-size-base"), children: [
+    !hasMetadata && /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "No metadata available" }),
+    hasMetadata && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "Metadata", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      RecordTree,
+      {
+        id: `result-metadata-${result2.uuid}`,
+        record: result2.metadata || {}
+      }
+    ) }) }) })
+  ] });
+};
 const progressContainer = "_progressContainer_1cjjr_1";
-const styles$Q = {
+const styles$T = {
   progressContainer
 };
-const container$c = "_container_4p85e_2";
+const container$d = "_container_4p85e_2";
 const dotsContainer = "_dotsContainer_4p85e_8";
 const small = "_small_4p85e_15";
 const medium = "_medium_4p85e_19";
@@ -54382,8 +54417,8 @@ const dot = "_dot_4p85e_8";
 const subtle = "_subtle_4p85e_36";
 const primary = "_primary_4p85e_40";
 const visuallyHidden = "_visuallyHidden_4p85e_59";
-const styles$P = {
-  container: container$c,
+const styles$S = {
+  container: container$d,
   dotsContainer,
   small,
   medium,
@@ -54404,24 +54439,24 @@ const PulsingDots = ({
     "div",
     {
       className: clsx(
-        styles$P.container,
-        size === "small" ? styles$P.small : size === "medium" ? styles$P.medium : styles$P.large,
+        styles$S.container,
+        size === "small" ? styles$S.small : size === "medium" ? styles$S.medium : styles$S.large,
         className2
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$P.dotsContainer, children: Array.from({ length: dotsCount }, (_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$S.dotsContainer, children: Array.from({ length: dotsCount }, (_, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             className: clsx(
-              styles$P.dot,
-              subtle2 ? styles$P.subtle : styles$P.primary
+              styles$S.dot,
+              subtle2 ? styles$S.subtle : styles$S.primary
             ),
             style: { animationDelay: `${index * 0.2}s` }
           },
           `dot-${index}`
         )) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$P.visuallyHidden, children: text2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$S.visuallyHidden, children: text2 })
       ]
     }
   );
@@ -54555,7 +54590,7 @@ const LiveVirtualList = ({
     return unregister;
   }, [id2, registerVirtualList, searchInData]);
   const Footer3 = () => {
-    return showProgress ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$Q.progressContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0;
+    return showProgress ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$T.progressContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0;
   };
   useEffect(() => {
     const parent = scrollRef?.current;
@@ -54628,7 +54663,7 @@ const LiveVirtualList = ({
   );
 };
 const item$1 = "_item_5fj0m_6";
-const styles$O = {
+const styles$R = {
   item: item$1
 };
 const ChatViewVirtualList = memo$1(
@@ -54772,7 +54807,7 @@ const ChatViewVirtualListComponent = memo$1(
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: clsx(styles$O.item),
+          className: clsx(styles$R.item),
           "data-index": props["data-index"],
           "data-item-group-index": props["data-item-group-index"],
           "data-item-index": props["data-item-index"],
@@ -54795,17 +54830,18 @@ const ChatViewVirtualListComponent = memo$1(
         offsetTop: topOffset,
         live: running,
         showProgress: running,
-        components: { Item }
+        components: { Item },
+        animation: false
       }
     );
   }
 );
-const styles$N = {};
+const styles$Q = {};
 const title$2 = "_title_19l1b_1";
-const contents = "_contents_19l1b_8";
-const styles$M = {
+const contents$1 = "_contents_19l1b_8";
+const styles$P = {
   title: title$2,
-  contents
+  contents: contents$1
 };
 const EventRow = ({
   title: title2,
@@ -54813,12 +54849,12 @@ const EventRow = ({
   className: className2,
   children: children2
 }) => {
-  const contentEl = title2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$M.title, className2), children: [
+  const contentEl = title2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$P.title, className2), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: icon2 || ApplicationIcons.metadata }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: title2 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: children2 })
   ] }) : "";
-  const card2 = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", styles$M.contents), children: contentEl });
+  const card2 = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", styles$P.contents), children: contentEl });
   return card2;
 };
 const ApprovalEventView = ({
@@ -54916,7 +54952,7 @@ class EventNode {
   }
 }
 const tab = "_tab_1je38_1";
-const styles$L = {
+const styles$O = {
   tab
 };
 const EventNav = ({
@@ -54941,7 +54977,7 @@ const EventNav = ({
         active ? "active " : "",
         "text-style-label",
         "text-size-small",
-        styles$L.tab
+        styles$O.tab
       ),
       onClick: handleClick,
       children: title2
@@ -54949,7 +54985,7 @@ const EventNav = ({
   ) });
 };
 const navs$1 = "_navs_1vm6p_1";
-const styles$K = {
+const styles$N = {
   navs: navs$1
 };
 const EventNavs = ({
@@ -54960,7 +54996,7 @@ const EventNavs = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "ul",
     {
-      className: clsx("nav", "nav-pills", styles$K.navs),
+      className: clsx("nav", "nav-pills", styles$N.navs),
       role: "tablist",
       "aria-orientation": "horizontal",
       children: navs2.map((nav2) => {
@@ -54987,7 +55023,7 @@ const hover = "_hover_1nn7f_41";
 const root$2 = "_root_1nn7f_45";
 const bottomDongle = "_bottomDongle_1nn7f_50";
 const dongleIcon = "_dongleIcon_1nn7f_67";
-const styles$J = {
+const styles$M = {
   label: label$3,
   navs,
   card,
@@ -55051,7 +55087,7 @@ const EventPanel = ({
     "div",
     {
       title: subTitle2,
-      className: clsx("text-size-small", mouseOver ? styles$J.hover : ""),
+      className: clsx("text-size-small", mouseOver ? styles$M.hover : ""),
       style: {
         display: "grid",
         gridTemplateColumns: gridColumns.join(" "),
@@ -55091,12 +55127,12 @@ const EventPanel = ({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: clsx("text-style-secondary", styles$J.label),
+            className: clsx("text-style-secondary", styles$M.label),
             onClick: toggleCollapse,
             children: collapsed ? text2 : ""
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$J.navs, children: isCollapsible && collapsibleContent && collapsed ? "" : filteredArrChildren && filteredArrChildren.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$M.navs, children: isCollapsible && collapsibleContent && collapsed ? "" : filteredArrChildren && filteredArrChildren.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           EventNavs,
           {
             navs: filteredArrChildren.map((child, index) => {
@@ -55121,8 +55157,8 @@ const EventPanel = ({
       id: `event-panel-${eventNodeId}`,
       className: clsx(
         className2,
-        styles$J.card,
-        depth === 0 ? styles$J.root : void 0
+        styles$M.card,
+        depth === 0 ? styles$M.root : void 0
       ),
       children: [
         titleEl,
@@ -55131,8 +55167,8 @@ const EventPanel = ({
           {
             className: clsx(
               "tab-content",
-              styles$J.cardContent,
-              isCollapsible && collapsed && collapsibleContent ? styles$J.hidden : void 0
+              styles$M.cardContent,
+              isCollapsible && collapsed && collapsibleContent ? styles$M.hidden : void 0
             ),
             children: filteredArrChildren?.map((child, index) => {
               const id2 = pillId(index);
@@ -55152,7 +55188,7 @@ const EventPanel = ({
         isCollapsible && useBottomDongle ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: clsx(styles$J.bottomDongle, "text-size-smallest"),
+            className: clsx(styles$M.bottomDongle, "text-size-smallest"),
             onClick: toggleCollapse,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -55160,7 +55196,7 @@ const EventPanel = ({
                 {
                   className: clsx(
                     collapsed ? ApplicationIcons.chevron.right : ApplicationIcons.chevron.down,
-                    styles$J.dongleIcon
+                    styles$M.dongleIcon
                   )
                 }
               ),
@@ -55208,7 +55244,7 @@ const ErrorEventView = ({
   );
 };
 const panel = "_panel_vz394_1";
-const styles$I = {
+const styles$L = {
   panel
 };
 const InfoEventView = ({
@@ -55223,12 +55259,12 @@ const InfoEventView = ({
         RenderedText,
         {
           markdown: event.data,
-          className: clsx(styles$I.panel, "text-size-base")
+          className: clsx(styles$L.panel, "text-size-base")
         }
       )
     );
   } else {
-    panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { data: event.data, className: styles$I.panel }));
+    panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { data: event.data, className: styles$L.panel }));
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     EventPanel,
@@ -55267,9 +55303,9 @@ const InputEventView = ({
     }
   );
 };
-const grid = "_grid_1eq5o_1";
-const styles$H = {
-  grid
+const grid$1 = "_grid_1eq5o_1";
+const styles$K = {
+  grid: grid$1
 };
 const LoggerEventView = ({
   eventNode,
@@ -55283,7 +55319,7 @@ const LoggerEventView = ({
       className: className2,
       title: event.message.level,
       icon: ApplicationIcons.logging[event.message.level.toLowerCase()] || ApplicationIcons.info,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-base", styles$H.grid), children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-base", styles$K.grid), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller"), children: obj !== void 0 && obj !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: obj }) : event.message.message }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-smaller", "text-style-secondary"), children: [
           event.message.filename,
@@ -55294,11 +55330,11 @@ const LoggerEventView = ({
     }
   );
 };
-const container$b = "_container_1ww70_1";
+const container$c = "_container_1ww70_1";
 const titleRow = "_titleRow_1ww70_5";
 const title$1 = "_title_1ww70_5";
-const styles$G = {
-  container: container$b,
+const styles$J = {
+  container: container$c,
   titleRow,
   title: title$1
 };
@@ -55308,11 +55344,11 @@ const EventSection = ({
   copyContent,
   className: className2
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$G.container, className2), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$G.titleRow), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$J.container, className2), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$J.titleRow), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: clsx("text-size-small", "text-style-label", styles$G.title),
+        className: clsx("text-size-small", "text-style-label", styles$J.title),
         children: [
           title2,
           copyContent ? /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: copyContent, ariaLabel: "Copy to clipboard" }) : null
@@ -55328,7 +55364,7 @@ const col1_3 = "_col1_3_45f60_12";
 const col3 = "_col3_45f60_16";
 const separator$2 = "_separator_45f60_20";
 const topMargin = "_topMargin_45f60_26";
-const styles$F = {
+const styles$I = {
   wrapper,
   col2,
   col1_3,
@@ -55396,9 +55432,9 @@ const EventTimingPanel = ({
       });
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$F.wrapper), children: rows.map((row2, idx) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$I.wrapper), children: rows.map((row2, idx) => {
     if (row2.label === "---") {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$F.separator }, `$usage-sep-${idx}`);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$I.separator }, `$usage-sep-${idx}`);
     } else {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -55407,13 +55443,13 @@ const EventTimingPanel = ({
             className: clsx(
               "text-style-label",
               "text-style-secondary",
-              row2.secondary ? styles$F.col2 : styles$F.col1_3,
-              row2.topMargin ? styles$F.topMargin : void 0
+              row2.secondary ? styles$I.col2 : styles$I.col1_3,
+              row2.topMargin ? styles$I.topMargin : void 0
             ),
             children: row2.label
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$F.col3, children: row2.value ? row2.value : "" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$I.col3, children: row2.value ? row2.value : "" })
       ] }, `$usage-row-${idx}`);
     }
   }) });
@@ -55437,7 +55473,7 @@ const formatTitle = (title2, total_tokens, working_start) => {
   const subtitle2 = subItems.length > 0 ? ` (${subItems.join(", ")})` : "";
   return `${title2}${subtitle2}`;
 };
-const container$a = "_container_e0l2n_1";
+const container$b = "_container_e0l2n_1";
 const all = "_all_e0l2n_6";
 const tableSelection = "_tableSelection_e0l2n_12";
 const codePre = "_codePre_e0l2n_22";
@@ -55445,8 +55481,8 @@ const code$1 = "_code_e0l2n_22";
 const progress$1 = "_progress_e0l2n_34";
 const toolConfig = "_toolConfig_e0l2n_38";
 const toolChoice = "_toolChoice_e0l2n_46";
-const styles$E = {
-  container: container$a,
+const styles$H = {
+  container: container$b,
   all,
   tableSelection,
   codePre,
@@ -55491,7 +55527,7 @@ const ModelEventView = ({
       subTitle: formatTiming(event.timestamp, event.working_start),
       icon: ApplicationIcons.model,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$E.container, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$H.container, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ChatView,
             {
@@ -55502,20 +55538,20 @@ const ModelEventView = ({
               allowLinking: false
             }
           ),
-          event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
+          event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$H.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "All", className: styles$E.container, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$E.all, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "All", className: styles$H.container, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$H.all, children: [
             Object.keys(entries2).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               EventSection,
               {
                 title: "Configuration",
-                className: styles$E.tableSelection,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: entries2, plain: true })
+                className: styles$H.tableSelection,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: entries2, options: { plain: true } })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Usage", className: styles$E.tableSelection, children: event.output.usage !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage: event.output.usage }) : void 0 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Timing", className: styles$E.tableSelection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Usage", className: styles$H.tableSelection, children: event.output.usage !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage: event.output.usage }) : void 0 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Timing", className: styles$H.tableSelection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               EventTimingPanel,
               {
                 timestamp: event.timestamp,
@@ -55535,13 +55571,13 @@ const ModelEventView = ({
             }
           ) })
         ] }),
-        event.tools.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Tools", className: styles$E.container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolsConfig, { tools: event.tools, toolChoice: event.tool_choice }) }),
+        event.tools.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Tools", className: styles$H.container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolsConfig, { tools: event.tools, toolChoice: event.tool_choice }) }),
         event.call ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           APIView,
           {
             "data-name": "API",
             call: event.call,
-            className: styles$E.container
+            className: styles$H.container
           }
         ) : ""
       ]
@@ -55569,11 +55605,11 @@ const APICodeCell = ({ id: id2, sourceCode }) => {
   if (!sourceCode) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: sourceCodeRef, className: clsx("model-call"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$E.codePre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: sourceCodeRef, className: clsx("model-call"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$H.codePre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "code",
     {
       id: id2,
-      className: clsx("language-json", styles$E.code, "text-size-small"),
+      className: clsx("language-json", styles$H.code, "text-size-small"),
       children: sourceCode
     }
   ) }) });
@@ -55586,8 +55622,8 @@ const ToolsConfig = ({ tools: tools2, toolChoice: toolChoice2 }) => {
     ] }, `${tool2.name}-${idx}`);
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.toolConfig, "text-size-small"), children: toolEls }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$E.toolChoice, "text-size-small"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$H.toolConfig, "text-size-small"), children: toolEls }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$H.toolChoice, "text-size-small"), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Tool Choice" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ToolChoiceView, { toolChoice: toolChoice2 }) })
     ] })
@@ -55616,7 +55652,7 @@ const code = "_code_1a3fk_5";
 const sample = "_sample_1a3fk_10";
 const section$1 = "_section_1a3fk_14";
 const metadata = "_metadata_1a3fk_21";
-const styles$D = {
+const styles$G = {
   noMargin,
   code,
   sample,
@@ -55633,13 +55669,13 @@ const SampleInitEventView = ({
   if (event.sample.files && Object.keys(event.sample.files).length > 0) {
     sections.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Files", children: Object.keys(event.sample.files).map((file) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$D.noMargin, children: file }, `sample-init-file-${file}`);
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$G.noMargin, children: file }, `sample-init-file-${file}`);
       }) }, `event-${eventNode.id}`)
     );
   }
   if (event.sample.setup) {
     sections.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Setup", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$D.code, children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sourceCode", children: event.sample.setup }) }) }, `${eventNode.id}-section-setup`)
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Setup", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$G.code, children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sourceCode", children: event.sample.setup }) }) }, `${eventNode.id}-section-setup`)
     );
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -55652,7 +55688,7 @@ const SampleInitEventView = ({
       icon: ApplicationIcons.sample,
       subTitle: formatDateTime(new Date(event.timestamp)),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Sample", className: styles$D.sample, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Sample", className: styles$G.sample, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             ChatView,
             {
@@ -55668,7 +55704,7 @@ const SampleInitEventView = ({
                 choice
               ] }, `$choice-{choice}`);
             }) : "",
-            sections.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$D.section, children: sections }) : "",
+            sections.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$G.section, children: sections }) : "",
             event.sample.target ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Target", children: toArray(event.sample.target).map((target) => {
               return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-base"), children: target }, target);
             }) }) : void 0
@@ -55678,7 +55714,7 @@ const SampleInitEventView = ({
           MetaDataGrid,
           {
             "data-name": "Metadata",
-            className: styles$D.metadata,
+            className: styles$G.metadata,
             entries: event.sample.metadata
           }
         ) : ""
@@ -55741,7 +55777,7 @@ const exec = "_exec_1irga_15";
 const result$1 = "_result_1irga_19";
 const fileLabel = "_fileLabel_1irga_23";
 const wrapPre = "_wrapPre_1irga_28";
-const styles$C = {
+const styles$F = {
   twoColumn,
   exec,
   result: result$1,
@@ -55775,15 +55811,15 @@ const ExecView = ({ id: id2, event }) => {
   const input2 = event.input;
   const result2 = event.result;
   const output2 = event.output ? event.output.trim() : void 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$C.exec), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Command`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$C.twoColumn), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$C.wrapPre), children: cmd }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$C.wrapPre), children: input2 !== null ? input2?.trim() : void 0 }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$F.exec), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Command`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$F.twoColumn), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$F.wrapPre), children: cmd }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$F.wrapPre), children: input2 !== null ? input2?.trim() : void 0 }),
       options !== null && Object.keys(options).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Options`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         MetaDataGrid,
         {
           entries: options,
-          plain: true
+          options: { plain: true }
         }
       ) }) : void 0
     ] }) }),
@@ -55795,7 +55831,7 @@ const ExecView = ({ id: id2, event }) => {
           entry: { name: "sandbox_output", value: output2 }
         }
       ) }) : void 0,
-      result2 !== 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$C.result, "text-size-base"), children: [
+      result2 !== 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$F.result, "text-size-base"), children: [
         "(exited with code ",
         result2,
         ")"
@@ -55821,29 +55857,29 @@ const WriteFileView = ({ id: id2, event }) => {
 };
 const FileView = ({ id: id2, file, contents: contents2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "File", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$C.fileLabel), children: file }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "File", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$F.fileLabel), children: file }) }),
     contents2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Contents", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandablePanel, { id: `${id2}-file`, collapse: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: contents2 }) }) }) : void 0
   ] });
 };
-const container$9 = "_container_io1r0_1";
+const container$a = "_container_io1r0_1";
 const wrappingContent$1 = "_wrappingContent_io1r0_8";
 const separator$1 = "_separator_io1r0_13";
 const unchanged = "_unchanged_io1r0_22";
 const section = "_section_io1r0_27";
 const spacer = "_spacer_io1r0_31";
-const styles$B = {
-  container: container$9,
+const styles$E = {
+  container: container$a,
   wrappingContent: wrappingContent$1,
   separator: separator$1,
   unchanged,
   section,
   spacer
 };
-const explanation$2 = "_explanation_1k2k0_1";
+const explanation$1 = "_explanation_1k2k0_1";
 const wrappingContent = "_wrappingContent_1k2k0_8";
 const separator = "_separator_1k2k0_13";
-const styles$A = {
-  explanation: explanation$2,
+const styles$D = {
+  explanation: explanation$1,
   wrappingContent,
   separator
 };
@@ -55864,29 +55900,29 @@ const ScoreEventView = ({
       icon: ApplicationIcons.scorer,
       collapsibleContent: true,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Explanation", className: clsx(styles$A.explanation), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Explanation", className: clsx(styles$D.explanation), children: [
           event.target ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.separator) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.separator) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Target" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: resolvedTarget || "" }) })
           ] }) : "",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Answer" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.score.answer || "" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.score.answer || "" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Explanation" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.score.explanation || "" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.score.explanation || "" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Score" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderScore(event.score.value) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.separator) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.separator) })
         ] }),
         event.score.metadata ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Metadata", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           RecordTree,
           {
             id: `${eventNode.id}-score-metadata`,
             record: event.score.metadata,
-            className: styles$A.metadataTree,
+            className: styles$D.metadataTree,
             defaultExpandLevel: 0
           }
         ) }) : void 0
@@ -55927,46 +55963,46 @@ const ScoreEditEventView = ({
             className: clsx(
               "text-style-label",
               "text-style-secondary",
-              styles$B.section
+              styles$E.section
             ),
             children: "Updated Values"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$B.container), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$E.container), children: [
           event.edit.value ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Value" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: renderScore(event.edit.value) })
           ] }) : "",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Answer" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.wrappingContent), children: event.edit.answer === kUnchangedSentinel ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$B.unchanged), children: "[unchanged]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.answer || "" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.wrappingContent), children: event.edit.answer === kUnchangedSentinel ? /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$E.unchanged), children: "[unchanged]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.answer || "" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Explanation" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.explanation || "" }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.explanation || "" }) })
         ] }),
-        event.edit.provenance ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$B.container), children: [
+        event.edit.provenance ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$E.container), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: clsx(
                 "text-style-label",
                 "text-style-secondary",
-                styles$B.section
+                styles$E.section
               ),
               children: "Provenance"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.spacer) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.spacer) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Author" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.provenance.author }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.provenance.author }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Reason" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.provenance.reason || "" }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.separator) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedText, { markdown: event.edit.provenance.reason || "" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.separator) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Time" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.wrappingContent), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             RenderedText,
             {
               markdown: formatDateTime(new Date(event.edit.provenance.timestamp)) || ""
@@ -55978,7 +56014,7 @@ const ScoreEditEventView = ({
           {
             id: `${eventNode.id}-score-metadata`,
             record: event.edit.metadata || {},
-            className: styles$B.metadataTree,
+            className: styles$E.metadataTree,
             defaultExpandLevel: 0
           }
         ) }) : void 0
@@ -63747,7 +63783,7 @@ const lightboxContent = "_lightboxContent_1mvg8_33";
 const lightboxButtonCloseWrapper = "_lightboxButtonCloseWrapper_1mvg8_45";
 const lightboxButtonClose = "_lightboxButtonClose_1mvg8_45";
 const lightboxPreviewButton = "_lightboxPreviewButton_1mvg8_63";
-const styles$z = {
+const styles$C = {
   carouselThumbs,
   carouselThumb,
   carouselPlayIcon,
@@ -63816,12 +63852,12 @@ const LightboxCarousel = ({ id: id2, slides }) => {
     [openLightbox]
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("lightbox-carousel-container"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.carouselThumbs), children: slides.map((slide, index) => {
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$C.carouselThumbs), children: slides.map((slide, index) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           "data-index": index,
-          className: clsx(styles$z.carouselThumb),
+          className: clsx(styles$C.carouselThumb),
           onClick: handleThumbClick,
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: slide.label }),
@@ -63830,7 +63866,7 @@ const LightboxCarousel = ({ id: id2, slides }) => {
               {
                 className: clsx(
                   ApplicationIcons.play,
-                  styles$z.carouselPlayIcon
+                  styles$C.carouselPlayIcon
                 )
               }
             ) })
@@ -63842,12 +63878,12 @@ const LightboxCarousel = ({ id: id2, slides }) => {
     showOverlay && /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        className: clsx(styles$z.lightboxOverlay, isOpen ? "open" : "closed"),
+        className: clsx(styles$C.lightboxOverlay, isOpen ? "open" : "closed"),
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.lightboxButtonCloseWrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$C.lightboxButtonCloseWrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
-              className: styles$z.lightboxButtonClose,
+              className: styles$C.lightboxButtonClose,
               onClick: closeLightbox,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.close })
             }
@@ -63855,7 +63891,7 @@ const LightboxCarousel = ({ id: id2, slides }) => {
           slides.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
-              className: clsx(styles$z.lightboxPreviewButton, "prev"),
+              className: clsx(styles$C.lightboxPreviewButton, "prev"),
               onClick: showPrev,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.previous })
             }
@@ -63863,7 +63899,7 @@ const LightboxCarousel = ({ id: id2, slides }) => {
           slides.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
-              className: clsx(styles$z.lightboxPreviewButton, "next"),
+              className: clsx(styles$C.lightboxPreviewButton, "next"),
               onClick: showNext,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.next })
             }
@@ -63871,7 +63907,7 @@ const LightboxCarousel = ({ id: id2, slides }) => {
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: clsx(styles$z.lightboxContent, isOpen ? "open" : "closed"),
+              className: clsx(styles$C.lightboxContent, isOpen ? "open" : "closed"),
               children: slides[currentIndex || 0]?.render()
             },
             `carousel-slide-${currentIndex}`
@@ -63982,7 +64018,7 @@ const extractSize = (value2, label2, defaultValue) => {
 const toolsGrid = "_toolsGrid_1qqm2_1";
 const tools = "_tools_1qqm2_1";
 const tool = "_tool_1qqm2_1";
-const styles$y = {
+const styles$B = {
   toolsGrid,
   tools,
   tool
@@ -64155,7 +64191,7 @@ const renderTools = (changes, resolvedState) => {
       toolsInfo["Tools"] = /* @__PURE__ */ jsxRuntimeExports.jsx(Tools, { toolDefinitions: filtered });
     }
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$y.tools), children: Object.keys(toolsInfo).map((key2) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.tools), children: Object.keys(toolsInfo).map((key2) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
@@ -64210,7 +64246,7 @@ const StoreSpecificRenderableTypes = [
   human_baseline_session
 ];
 const Tools = ({ toolDefinitions }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$y.toolsGrid, children: toolDefinitions.map((toolDefinition, idx) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$B.toolsGrid, children: toolDefinitions.map((toolDefinition, idx) => {
     const toolName = toolDefinition.name;
     const toolArgs = toolDefinition.parameters?.properties ? Object.keys(toolDefinition.parameters.properties) : [];
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -64225,11 +64261,11 @@ const Tools = ({ toolDefinitions }) => {
 };
 const Tool = ({ toolName, toolArgs }) => {
   const functionCall = toolArgs && toolArgs.length > 0 ? `${toolName}(${toolArgs.join(", ")})` : toolName;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-smallest", styles$y.tool), children: functionCall });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-smallest", styles$B.tool), children: functionCall });
 };
 const diff = "_diff_eobja_1";
 const summary$2 = "_summary_eobja_6";
-const styles$x = {
+const styles$A = {
   diff,
   summary: summary$2
 };
@@ -64275,14 +64311,14 @@ const StateEventView = ({
       text: !changePreview ? summary2 : void 0,
       collapsibleContent: true,
       children: [
-        changePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Summary", className: clsx(styles$x.summary), children: changePreview }) : void 0,
+        changePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Summary", className: clsx(styles$A.summary), children: changePreview }) : void 0,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           StateDiffView,
           {
             before,
             after,
             "data-name": "Diff",
-            className: clsx(styles$x.diff)
+            className: clsx(styles$A.diff)
           }
         )
       ]
@@ -64615,7 +64651,7 @@ const summary$1 = "_summary_ac4z2_1";
 const summaryRendered = "_summaryRendered_ac4z2_6";
 const subtaskSummary = "_subtaskSummary_ac4z2_10";
 const subtaskLabel = "_subtaskLabel_ac4z2_17";
-const styles$w = {
+const styles$z = {
   summary: summary$1,
   summaryRendered,
   subtaskSummary,
@@ -64630,9 +64666,9 @@ const SubtaskEventView = ({
   const body = [];
   if (event.type === "fork") {
     body.push(
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { title: "Summary", className: clsx(styles$w.summary), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { title: "Summary", className: clsx(styles$z.summary), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Inputs" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$w.summaryRendered), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: event.input }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.summaryRendered), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: event.input }) })
       ] })
     );
   } else {
@@ -64668,12 +64704,12 @@ const SubtaskEventView = ({
 };
 const SubtaskSummary = ({ input: input2, result: result2 }) => {
   const output2 = typeof result2 === "object" ? result2 : { result: result2 };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$w.subtaskSummary), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$z.subtaskSummary), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-size-small"), children: "Input" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-large", styles$w.subtaskLabel) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-large", styles$z.subtaskLabel) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-size-small"), children: "Output" }),
     input2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: input2 }) : void 0,
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-title-secondary", styles$w.subtaskLabel), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-title-secondary", styles$z.subtaskLabel), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: output2 }) })
   ] });
 };
@@ -64698,7 +64734,7 @@ const None = () => {
 const summary = "_summary_1qsnv_1";
 const approval = "_approval_1qsnv_6";
 const progress = "_progress_1qsnv_12";
-const styles$v = {
+const styles$y = {
   summary,
   approval,
   progress
@@ -64737,7 +64773,7 @@ const ToolEventView = ({
       icon: ApplicationIcons.solvers.use_tools,
       childIds: children2.map((child) => child.id),
       collapseControl: "bottom",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$v.summary, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$y.summary, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ToolCallView,
           {
@@ -64765,10 +64801,10 @@ const ToolEventView = ({
           ApprovalEventView,
           {
             eventNode: approvalNode,
-            className: styles$v.approval
+            className: styles$y.approval
           }
         ) : "",
-        event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$v.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
+        event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$y.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
       ] })
     }
   );
@@ -64777,7 +64813,7 @@ const node = "_node_1r858_1";
 const attached = "_attached_1r858_5";
 const attachedParent = "_attachedParent_1r858_9";
 const attachedChild = "_attachedChild_1r858_16";
-const styles$u = {
+const styles$x = {
   node,
   attached,
   attachedParent,
@@ -64827,23 +64863,23 @@ const TranscriptVirtualListComponent = ({
   );
   const renderRow = useCallback(
     (index, item2) => {
-      const paddingClass = index === 0 ? styles$u.first : void 0;
+      const paddingClass = index === 0 ? styles$x.first : void 0;
       const previousIndex = index - 1;
       const nextIndex2 = index + 1;
       const previous = previousIndex > 0 && previousIndex <= eventNodes.length ? eventNodes[previousIndex] : void 0;
       const next = nextIndex2 < eventNodes.length ? eventNodes[nextIndex2] : void 0;
       const attached2 = item2.event.event === "tool" && (previous?.event.event === "tool" || previous?.event.event === "model");
       const attachedParent2 = item2.event.event === "model" && next?.event.event === "tool";
-      const attachedClass = attached2 ? styles$u.attached : void 0;
-      const attachedChildClass = attached2 ? styles$u.attachedChild : void 0;
-      const attachedParentClass = attachedParent2 ? styles$u.attachedParent : void 0;
+      const attachedClass = attached2 ? styles$x.attached : void 0;
+      const attachedChildClass = attached2 ? styles$x.attachedChild : void 0;
+      const attachedParentClass = attachedParent2 ? styles$x.attachedParent : void 0;
       const hasToolEvents = hasToolEventsAtCurrentDepth(index);
       const context = hasToolEvents ? contextWithToolEvents : contextWithoutToolEvents;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
           id: item2.id,
-          className: clsx(styles$u.node, paddingClass, attachedClass),
+          className: clsx(styles$x.node, paddingClass, attachedClass),
           style: {
             paddingLeft: `${item2.depth <= 1 ? item2.depth * 0.7 : (0.7 + item2.depth - 1) * 1}em`,
             paddingRight: `${item2.depth === 0 ? void 0 : ".7em"} `
@@ -65453,31 +65489,54 @@ const TranscriptView = ({
       eventNodes: flattenedNodes,
       scrollRef,
       offsetTop: 10,
-      className: styles$N.listContainer,
+      className: styles$Q.listContainer,
       initialEventId
     }
   );
 };
-const container$8 = "_container_kyylo_1";
-const styles$t = {
-  container: container$8
+const header$2 = "_header_189zi_1";
+const styles$w = {
+  header: header$2
+};
+const ColumnHeader$1 = ({ label: label2 }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$w.header), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: clsx(
+        styles$w.label,
+        "text-size-smallest",
+        "text-style-label",
+        "text-style-secondary"
+      ),
+      children: label2
+    }
+  ) });
 };
-const InputPanel = ({ result: result2 }) => {
+const container$9 = "_container_1fgdb_1";
+const scrollable = "_scrollable_1fgdb_6";
+const styles$v = {
+  container: container$9,
+  scrollable
+};
+const ResultBody = ({ result: result2 }) => {
   const scrollRef = useRef(null);
   const [searchParams] = useSearchParams();
   const initialMessageId = searchParams.get("message");
   const initialEventId = searchParams.get("event");
   const highlightLabeled = useStore((state) => state.highlightLabeled);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, className: clsx(styles$t.container), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    InputRenderer,
-    {
-      result: result2,
-      scrollRef,
-      initialMessageId,
-      initialEventId,
-      highlightLabeled
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$v.container, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnHeader$1, { label: "Input" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, className: clsx(styles$v.scrollable), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InputRenderer,
+      {
+        result: result2,
+        scrollRef,
+        initialMessageId,
+        initialEventId,
+        highlightLabeled
+      }
+    ) })
+  ] });
 };
 const InputRenderer = ({
   result: result2,
@@ -65585,6 +65644,32 @@ const InputRenderer = ({
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Unknown Input Type" });
   }
 };
+const container$8 = "_container_u4d55_1";
+const styles$u = {
+  container: container$8
+};
+const useMarkdownRefs = (result2) => {
+  const params = useParams();
+  const buildUrl = useMemo(() => {
+    if (!result2?.uuid) {
+      return (queryParams) => `?${queryParams}`;
+    }
+    const relativePath = getRelativePathFromParams(params);
+    const { scanPath } = parseScanResultPath(relativePath);
+    return (queryParams) => {
+      const searchParams = new URLSearchParams(queryParams);
+      return `#${scanResultRoute(scanPath, result2.uuid, searchParams)}`;
+    };
+  }, [result2?.uuid, params]);
+  const refs = result2 ? toMarkdownRefs(result2, (refId, type) => {
+    if (type === "message") {
+      return buildUrl(`tab=Result&message=${encodeURIComponent(refId)}`);
+    } else {
+      return buildUrl(`tab=Result&event=${encodeURIComponent(refId)}`);
+    }
+  }) : [];
+  return refs;
+};
 const toMarkdownRefs = (core, makeReferenceUrl) => {
   const refLookup = referenceTable(core);
   const refs = [];
@@ -65704,36 +65789,22 @@ const referenceTable = (result2) => {
     return {};
   }
 };
-const Explanation = ({ result: result2 }) => {
-  const params = useParams();
-  const buildUrl = useMemo(() => {
-    if (!result2?.uuid) {
-      return (queryParams) => `?${queryParams}`;
-    }
-    const relativePath = getRelativePathFromParams(params);
-    const { scanPath } = parseScanResultPath(relativePath);
-    return (queryParams) => {
-      const searchParams = new URLSearchParams(queryParams);
-      return `#${scanResultRoute(scanPath, result2.uuid, searchParams)}`;
-    };
-  }, [result2?.uuid, params]);
-  const refs = result2 ? toMarkdownRefs(result2, (refId, type) => {
-    if (type === "message") {
-      return buildUrl(`tab=Input&message=${encodeURIComponent(refId)}`);
-    } else {
-      return buildUrl(`tab=Input&event=${encodeURIComponent(refId)}`);
-    }
-  }) : [];
+const Explanation = ({
+  result: result2,
+  references,
+  options
+}) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MarkdownDivWithReferences,
     {
       markdown: result2?.explanation || "",
-      references: refs
+      references,
+      options
     }
   );
 };
 const result = "_result_f18wg_1";
-const styles$s = {
+const styles$t = {
   result,
   "true": "_true_f18wg_12",
   "false": "_false_f18wg_17"
@@ -65743,11 +65814,11 @@ const ValidationResult = ({ result: result2 }) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(Result, { value: result2 });
   } else if (typeof result2 === "object") {
     const entries2 = Object.entries(result2);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$s.validationTable), children: entries2.map(([_key, value2]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Result, { value: value2 }) })) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$t.validationTable), children: entries2.map(([_key, value2]) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Result, { value: value2 }) })) });
   }
 };
 const Result = ({ value: value2 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(value2 ? styles$s.true : styles$s.false, styles$s.result), children: value2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.check) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.x) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(value2 ? styles$t.true : styles$t.false, styles$t.result), children: value2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.check) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.x) }) });
 };
 const printArray = (arr, size = 50) => {
   const envelope = ["[", "]"];
@@ -65868,7 +65939,7 @@ const valueTable = "_valueTable_1uivt_24";
 const inline = "_inline_1uivt_31";
 const valueValue = "_valueValue_1uivt_31";
 const value = "_value_1uivt_24";
-const styles$r = {
+const styles$s = {
   boolean,
   "true": "_true_1uivt_12",
   "false": "_false_1uivt_18",
@@ -65879,24 +65950,21 @@ const styles$r = {
 };
 const Value = ({
   result: result2,
+  references,
   style: style2,
   maxTableSize = 5,
-  interactive = false
+  interactive = false,
+  options
 }) => {
-  const params = useParams();
-  const buildUrl = useMemo(() => {
-    if (!result2?.uuid) {
-      return (queryParams) => `?${queryParams}`;
-    }
-    const relativePath = getRelativePathFromParams(params);
-    const { scanPath } = parseScanResultPath(relativePath);
-    return (queryParams) => {
-      const searchParams = new URLSearchParams(queryParams);
-      return `#${scanResultRoute(scanPath, result2.uuid, searchParams)}`;
-    };
-  }, [result2?.uuid, params]);
   if (isStringValue(result2)) {
-    return `"${result2.value}"`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MarkdownDivWithReferences,
+      {
+        markdown: result2.value,
+        references,
+        options
+      }
+    );
   } else if (isNumberValue(result2) && result2.value !== null) {
     return formatPrettyDecimal(result2.value);
   } else if (isBooleanValue(result2)) {
@@ -65904,8 +65972,8 @@ const Value = ({
       "div",
       {
         className: clsx(
-          styles$r.boolean,
-          result2.value ? styles$r.true : styles$r.false
+          styles$s.boolean,
+          result2.value ? styles$s.true : styles$s.false
         ),
         children: String(result2.value)
       }
@@ -65918,7 +65986,7 @@ const Value = ({
       {
         value: result2.value,
         result: result2,
-        buildUrl,
+        references,
         style: style2,
         maxListSize: maxTableSize,
         interactive
@@ -65930,7 +65998,7 @@ const Value = ({
       {
         value: result2.value,
         result: result2,
-        buildUrl,
+        references,
         style: style2,
         maxTableSize,
         interactive
@@ -65940,21 +66008,21 @@ const Value = ({
     return "Unknown value type";
   }
 };
-const ValueList2 = ({ value: value2, result: result2, maxListSize, interactive, buildUrl, style: style2 }) => {
+const ValueList2 = ({ value: value2, result: result2, maxListSize, interactive, references, style: style2 }) => {
   const itemsToDisplay = value2.slice(0, maxListSize);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: clsx(
-        styles$r.valueTable,
-        style2 === "inline" ? styles$r.inline : styles$r.block
+        styles$s.valueTable,
+        style2 === "inline" ? styles$s.inline : styles$s.block
       ),
       children: itemsToDisplay.map((item2, index) => {
         const displayValue = renderValue(
           index,
           item2,
           result2,
-          buildUrl,
+          references,
           interactive
         );
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
@@ -65962,7 +66030,7 @@ const ValueList2 = ({ value: value2, result: result2, maxListSize, interactive,
             "div",
             {
               className: clsx(
-                styles$r.valueKey,
+                styles$s.valueKey,
                 "text-style-label",
                 "text-style-secondary",
                 "text-size-smallest"
@@ -65974,28 +66042,28 @@ const ValueList2 = ({ value: value2, result: result2, maxListSize, interactive,
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$r.valueValue), children: displayValue })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$s.valueValue), children: displayValue })
         ] }, `value-table-row-${index}`);
       })
     }
   );
 };
-const ValueTable = ({ value: value2, result: result2, maxTableSize, interactive, buildUrl, style: style2 }) => {
+const ValueTable = ({ value: value2, result: result2, maxTableSize, interactive, references, style: style2 }) => {
   const keys2 = Object.keys(value2);
   const keysToDisplay = keys2.slice(0, maxTableSize);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       className: clsx(
-        styles$r.valueTable,
-        style2 === "inline" ? styles$r.inline : styles$r.block
+        styles$s.valueTable,
+        style2 === "inline" ? styles$s.inline : styles$s.block
       ),
       children: keysToDisplay.map((key2, index) => {
         const displayValue = renderValue(
           index,
           value2[key2],
           result2,
-          buildUrl,
+          references,
           interactive
         );
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
@@ -66003,7 +66071,7 @@ const ValueTable = ({ value: value2, result: result2, maxTableSize, interactive,
             "div",
             {
               className: clsx(
-                styles$r.valueKey,
+                styles$s.valueKey,
                 "text-style-label",
                 "text-style-secondary",
                 "text-size-smallest"
@@ -66011,31 +66079,21 @@ const ValueTable = ({ value: value2, result: result2, maxTableSize, interactive,
               children: key2
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$r.valueValue), children: displayValue })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$s.valueValue), children: displayValue })
         ] }, `value-table-row-${key2}`);
       })
     }
   );
 };
-const renderValue = (index, val, result2, buildUrl, interactive) => {
+const renderValue = (index, val, result2, references, interactive) => {
   if (typeof val === "string") {
-    const refs = toMarkdownRefs(
-      result2,
-      (refId, type) => {
-        if (type === "message") {
-          return buildUrl(`tab=Input&message=${encodeURIComponent(refId)}`);
-        } else {
-          return buildUrl(`tab=Input&event=${encodeURIComponent(refId)}`);
-        }
-      }
-    );
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDivWithReferences, { markdown: val, references: refs });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDivWithReferences, { markdown: val, references });
   } else if (typeof val === "number") {
     return formatPrettyDecimal(val);
   } else if (typeof val === "boolean") {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$r.boolean, val ? styles$r.true : styles$r.false), children: String(val) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$s.boolean, val ? styles$s.true : styles$s.false), children: String(val) });
   } else if (val === null) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$r.value), children: "null" });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$s.value), children: "null" });
   } else if (Array.isArray(val)) {
     return printArray(val, 25);
   } else if (typeof val === "object") {
@@ -66050,121 +66108,119 @@ const renderValue = (index, val, result2, buildUrl, interactive) => {
     return "Unknown value type";
   }
 };
-const container$7 = "_container_15a30_1";
-const explanation$1 = "_explanation_15a30_9";
-const values = "_values_15a30_20";
-const validation = "_validation_15a30_26";
-const validationLabel = "_validationLabel_15a30_32";
-const styles$q = {
+const sidebar = "_sidebar_ruino_1";
+const container$7 = "_container_ruino_7";
+const colspan = "_colspan_ruino_14";
+const values = "_values_ruino_29";
+const validation = "_validation_ruino_35";
+const validationLabel = "_validationLabel_ruino_41";
+const styles$r = {
+  sidebar,
   container: container$7,
-  explanation: explanation$1,
+  colspan,
   values,
   validation,
   validationLabel
 };
-const ResultPanel = ({ result: result2 }) => {
-  const messages2 = useMemo(() => {
-    if (result2 && result2.scanEvents && result2.scanEvents.length > 0) {
-      return messagesFromEvents(result2.scanEvents);
-    }
-    return [];
-  }, [result2?.scanEvents]);
-  return result2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$q.container, "text-size-base"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { className: clsx(styles$q.explanation), children: [
-      result2.label && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: clsx("text-style-label", "text-style-secondary"),
-            children: "Label"
-          }
+const ResultSidebar = ({ result: result2 }) => {
+  const refs = useMarkdownRefs(result2);
+  if (!result2) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "No result to display." });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$r.sidebar), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$r.container, "text-size-base"), children: [
+    result2.label && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Label" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: result2.label })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Value" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx(
+          result2.validationResult !== void 0 ? styles$r.values : void 0
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: result2.label })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Value" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: clsx(
-            result2.validationResult !== void 0 ? styles$q.values : void 0
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Value,
+            {
+              result: result2,
+              style: "block",
+              maxTableSize: 1e3,
+              interactive: true,
+              references: refs,
+              options: { previewRefsOnHover: false }
+            }
           ),
-          children: [
+          result2.validationResult !== void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$r.validation), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Value,
+              "div",
               {
-                result: result2,
-                style: "block",
-                maxTableSize: 1e3,
-                interactive: true
+                className: clsx(
+                  "text-style-label",
+                  "text-style-secondary",
+                  "text-size-smallest",
+                  styles$r.validationLabel
+                ),
+                children: "Validation"
               }
             ),
-            result2.validationResult !== void 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$q.validation), children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "div",
-                {
-                  className: clsx(
-                    "text-style-label",
-                    "text-style-secondary",
-                    "text-size-smallest",
-                    styles$q.validationLabel
-                  ),
-                  children: "Validation"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ValidationResult, { result: result2.validationResult })
-            ] }) : void 0
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Explanation" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Explanation, { result: result2 }) }),
-      result2.metadata && Object.keys(result2.metadata).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: clsx("text-style-label", "text-style-secondary"),
-            children: "Metadata"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: result2.metadata }) })
-      ] })
-    ] }) }),
-    messages2.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "Scanner", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ChatView,
-      {
-        showLabels: false,
-        messages: messages2,
-        id: `scan-result-chat`,
-        toolCallStyle: "complete",
-        indented: false
-      }
-    ) }) }) }),
-    result2.metadata && Object.keys(result2.metadata).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LabeledValue, { label: "Metadata", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      RecordTree,
-      {
-        id: `result-metadata-${result2.uuid}`,
-        record: result2.metadata || {}
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ValidationResult, { result: result2.validationResult })
+          ] }) : void 0
+        ]
       }
-    ) }) }) })
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$r.colspan), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Explanation" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Explanation,
+        {
+          result: result2,
+          references: refs,
+          options: { previewRefsOnHover: false }
+        }
+      )
+    ] }),
+    result2.metadata && Object.keys(result2.metadata).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Metadata" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetaDataGrid,
+        {
+          entries: result2.metadata,
+          references: refs,
+          options: { previewRefsOnHover: false }
+        }
+      ) })
+    ] })
+  ] }) });
+};
+const ResultPanel = ({ result: result2 }) => {
+  return result2 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$u.container, "text-size-base"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ResultSidebar, { result: result2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ResultBody, { result: result2 })
   ] });
 };
-const header$1 = "_header_ph0sv_1";
-const oneCol = "_oneCol_ph0sv_12";
-const twoCol = "_twoCol_ph0sv_16";
-const threeCol = "_threeCol_ph0sv_20";
-const fourCol = "_fourCol_ph0sv_24";
-const fiveCol = "_fiveCol_ph0sv_28";
-const styles$p = {
+const header$1 = "_header_87o1i_1";
+const oneCol = "_oneCol_87o1i_12";
+const twoCol = "_twoCol_87o1i_16";
+const threeCol = "_threeCol_87o1i_20";
+const fourCol = "_fourCol_87o1i_24";
+const fiveCol = "_fiveCol_87o1i_28";
+const sixCol = "_sixCol_87o1i_32";
+const styles$q = {
   header: header$1,
   oneCol,
   twoCol,
   threeCol,
   fourCol,
-  fiveCol
+  fiveCol,
+  sixCol
 };
-const ScanResultHeader = ({ result: result2 }) => {
-  const columns2 = colsForResult(result2) || [];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$p.header, classForCols(columns2.length)), children: [
+const ScanResultHeader = ({
+  result: result2,
+  status
+}) => {
+  const columns2 = colsForResult(result2, status) || [];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$q.header, classForCols(columns2.length)), children: [
     columns2.map((col) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
@@ -66173,7 +66229,7 @@ const ScanResultHeader = ({ result: result2 }) => {
             "text-size-smallest",
             "text-style-label",
             "text-style-secondary",
-            styles$p.label,
+            styles$q.label,
             col.className
           ),
           children: col.label
@@ -66185,7 +66241,7 @@ const ScanResultHeader = ({ result: result2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: clsx("text-size-small", styles$p.value, col.className),
+          className: clsx("text-size-small", styles$q.value, col.className),
           children: col.value
         },
         `header-val-${col.label}`
@@ -66195,17 +66251,17 @@ const ScanResultHeader = ({ result: result2 }) => {
 };
 const classForCols = (numCols) => {
   return clsx(
-    numCols === 1 ? styles$p.oneCol : numCols === 2 ? styles$p.twoCol : numCols === 3 ? styles$p.threeCol : numCols === 4 ? styles$p.fourCol : styles$p.fiveCol
+    numCols === 1 ? styles$q.oneCol : numCols === 2 ? styles$q.twoCol : numCols === 3 ? styles$q.threeCol : numCols === 4 ? styles$q.fourCol : numCols === 5 ? styles$q.fiveCol : styles$q.sixCol
   );
 };
-const colsForResult = (result2) => {
+const colsForResult = (result2, status) => {
   if (!result2) {
     return [];
   }
   if (result2.inputType === "transcript") {
-    return transcriptCols(result2);
+    return transcriptCols(result2, status);
   } else if (result2.inputType === "message") {
-    return messageCols(result2);
+    return messageCols(result2, status);
   } else if (result2.inputType === "messages") {
     return messagesCols(result2);
   } else if (result2.inputType === "event") {
@@ -66216,9 +66272,9 @@ const colsForResult = (result2) => {
     return [];
   }
 };
-const transcriptCols = (result2) => {
+const transcriptCols = (result2, status) => {
   if (result2.inputType === "transcript") {
-    return [
+    const cols = [
       {
         label: "Log",
         value: filename(result2.input.metadata.log)
@@ -66236,9 +66292,16 @@ const transcriptCols = (result2) => {
         value: result2.input.metadata.model
       }
     ];
+    if (status?.spec.model.model) {
+      cols.push({
+        label: "Scanning Model",
+        value: status.spec.model.model
+      });
+    }
+    return cols;
   }
 };
-const messageCols = (result2) => {
+const messageCols = (result2, status) => {
   if (result2.inputType === "message") {
     const cols = [
       {
@@ -66261,6 +66324,12 @@ const messageCols = (result2) => {
         value: result2.input.role
       });
     }
+    if (status?.spec.model.model) {
+      cols.push({
+        label: "Scanning Model",
+        value: status.spec.model.model
+      });
+    }
     return cols;
   }
 };
@@ -66364,7 +66433,7 @@ const resultLog = (scannerCore) => {
 const resultNav = "_resultNav_oszqi_1";
 const nav = "_nav_oszqi_9";
 const disabled$1 = "_disabled_oszqi_9";
-const styles$o = {
+const styles$p = {
   resultNav,
   nav,
   disabled: disabled$1
@@ -66427,23 +66496,23 @@ const ScanResultNav = () => {
     };
   }, [hasPrevious, hasNext, handlePrevious, handleNext]);
   const result2 = visibleScannerResults && currentIndex !== -1 ? visibleScannerResults[currentIndex] : void 0;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$o.resultNav), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$p.resultNav), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         onClick: handlePrevious,
         tabIndex: 0,
-        className: clsx(!hasPrevious && styles$o.disabled, styles$o.nav),
+        className: clsx(!hasPrevious && styles$p.disabled, styles$p.nav),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.previous) })
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$o.sampleInfo, "text-size-smallest"), children: visibleScannerResults && currentIndex !== -1 ? printIdentifier(resultIdentifier(result2), result2?.label) : void 0 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$p.sampleInfo, "text-size-smallest"), children: visibleScannerResults && currentIndex !== -1 ? printIdentifier(resultIdentifier(result2), result2?.label) : void 0 }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         onClick: handleNext,
         tabIndex: 0,
-        className: clsx(!hasNext && styles$o.disabled, styles$o.nav),
+        className: clsx(!hasNext && styles$p.disabled, styles$p.nav),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.next) })
       }
     )
@@ -66461,18 +66530,20 @@ const printIdentifier = (identifier, label2) => {
   }
   return val;
 };
-const root$1 = "_root_12il0_1";
-const tabSet$1 = "_tabSet_12il0_13";
-const tabControl$1 = "_tabControl_12il0_19";
-const tabs$1 = "_tabs_12il0_23";
-const styles$n = {
+const root$1 = "_root_1ewhq_1";
+const tabSet$1 = "_tabSet_1ewhq_13";
+const tabControl$1 = "_tabControl_1ewhq_19";
+const tabs$1 = "_tabs_1ewhq_23";
+const fullHeight = "_fullHeight_1ewhq_27";
+const styles$o = {
   root: root$1,
   tabSet: tabSet$1,
   tabControl: tabControl$1,
-  tabs: tabs$1
+  tabs: tabs$1,
+  fullHeight
 };
 const container$6 = "_container_g5onx_1";
-const styles$m = {
+const styles$n = {
   container: container$6
 };
 const TranscriptPanel = ({
@@ -66481,7 +66552,7 @@ const TranscriptPanel = ({
   nodeFilter
 }) => {
   const scrollRef = useRef(null);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, className: clsx(styles$m.container), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, className: clsx(styles$n.container), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     TranscriptView,
     {
       id: id2,
@@ -66497,6 +66568,7 @@ const kTabIdInput = "Input";
 const kTabIdInfo$1 = "Info";
 const kTabIdJson$1 = "JSON";
 const kTabIdTranscript = "transcript";
+const kTabIdMetadata = "Metadata";
 const ScanResultPanel = () => {
   const params = useParams();
   const relativePath = getRelativePathFromParams(params);
@@ -66519,6 +66591,7 @@ const ScanResultPanel = () => {
   );
   const setSelectedResultTab = useStore((state) => state.setSelectedResultTab);
   const { data: selectedResult, isLoading: resultLoading } = useSelectedResultsRow(scanResultUuid);
+  const status = useStore((state) => state.selectedScanStatus);
   useEffect(() => {
     const tabParam = searchParams.get("tab");
     if (tabParam) {
@@ -66573,18 +66646,18 @@ const ScanResultPanel = () => {
       return [];
     }
   }, [highlightLabeled, toggleHighlightLabeled, selectedTab, selectedResult]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$n.root), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$o.root), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Navbar, { children: visibleScannerResults.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultNav, {}) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityBar, { animating: !!loading || resultLoading }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultHeader, { result: selectedResult }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultHeader, { result: selectedResult, status }),
     selectedResult && /* @__PURE__ */ jsxRuntimeExports.jsx(ExtendedFindProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       TabSet,
       {
         id: "scan-result-tabs",
         type: "pills",
-        tabPanelsClassName: clsx(styles$n.tabSet),
-        tabControlsClassName: clsx(styles$n.tabControl),
-        className: clsx(styles$n.tabs),
+        tabPanelsClassName: clsx(styles$o.tabSet),
+        tabControlsClassName: clsx(styles$o.tabControl),
+        className: clsx(styles$o.tabs),
         tools: tools2,
         children: [
           hasError ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -66611,24 +66684,14 @@ const ScanResultPanel = () => {
               id: kTabIdResult,
               selected: selectedTab === kTabIdResult || !hasError && selectedTab === void 0,
               title: "Result",
+              scrollable: false,
               onSelected: () => {
                 handleTabChange(kTabIdResult);
               },
+              className: styles$o.fullHeight,
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ResultPanel, { result: selectedResult })
             }
           ) : void 0,
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            TabPanel,
-            {
-              id: kTabIdInput,
-              selected: selectedTab === kTabIdInput,
-              title: "Input",
-              onSelected: () => {
-                handleTabChange(kTabIdInput);
-              },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputPanel, { result: selectedResult })
-            }
-          ),
           showEvents ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             TabPanel,
             {
@@ -66648,6 +66711,18 @@ const ScanResultPanel = () => {
               )
             }
           ) : void 0,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TabPanel,
+            {
+              id: kTabIdMetadata,
+              selected: selectedTab === kTabIdMetadata,
+              title: "Metadata",
+              onSelected: () => {
+                handleTabChange(kTabIdMetadata);
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetadataPanel, { result: selectedResult })
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             TabPanel,
             {
@@ -66675,7 +66750,7 @@ const ScanResultPanel = () => {
                   id: "scan-result-json-contents",
                   data: selectedResult,
                   simple: true,
-                  className: styles$n.json
+                  className: styles$o.json
                 }
               )
             }
@@ -66715,7 +66790,7 @@ const label$2 = "_label_14uod_25";
 const right = "_right_14uod_30";
 const left = "_left_14uod_39";
 const center = "_center_14uod_48";
-const styles$l = {
+const styles$m = {
   footer: footer$1,
   spinnerContainer,
   spinner,
@@ -66726,7 +66801,7 @@ const styles$l = {
 };
 const pager = "_pager_jzegk_1";
 const item = "_item_jzegk_11";
-const styles$k = {
+const styles$l = {
   pager,
   item
 };
@@ -66769,8 +66844,8 @@ const Pager = ({
     return segments2;
   };
   const segments = generatePaginationSegments();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { "aria-label": "Log Pagination", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: clsx("pagination", styles$k.pager), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: clsx(currentPage === 0 ? "disabled" : "", styles$k.item), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("nav", { "aria-label": "Log Pagination", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: clsx("pagination", styles$l.pager), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: clsx(currentPage === 0 ? "disabled" : "", styles$l.item), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "a",
       {
         className: clsx("page-link"),
@@ -66788,7 +66863,7 @@ const Pager = ({
         className: clsx(
           segment2.type === "page" && segment2.page === currentPage ? "active" : void 0,
           segment2.type === "ellipsis" ? "disabled" : void 0,
-          styles$k.item
+          styles$l.item
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
@@ -66810,7 +66885,7 @@ const Pager = ({
       {
         className: clsx(
           currentPage + 1 >= pageCount ? "disabled" : "",
-          styles$k.item
+          styles$l.item
         ),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "a",
@@ -66856,13 +66931,13 @@ const Footer2 = ({
     "div",
     {
       id: id2,
-      className: clsx("text-size-smaller", styles$l.footer, className2),
+      className: clsx("text-size-smaller", styles$m.footer, className2),
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$l.left), children: progressText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$l.spinnerContainer), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$m.left), children: progressText ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$m.spinnerContainer), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: clsx("spinner-border", styles$l.spinner),
+              className: clsx("spinner-border", styles$m.spinner),
               role: "status",
               children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: clsx("visually-hidden"), children: [
                 progressText,
@@ -66870,12 +66945,12 @@ const Footer2 = ({
               ] })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-style-secondary", styles$l.label), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-style-secondary", styles$m.label), children: [
             progressText,
             "..."
           ] })
         ] }) : void 0 }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$l.center), children: paginated && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$m.center), children: paginated && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Pager,
           {
             itemCount: effectiveItemCount,
@@ -66884,7 +66959,7 @@ const Footer2 = ({
             setPage
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$l.right), children: progressBar ? progressBar : paginated ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: effectiveItemCount === 0 ? "" : filteredCount !== void 0 && filteredCount !== itemCount ? `${startItem} - ${endItem} / ${effectiveItemCount} (${itemCount} total)` : `${startItem} - ${endItem} / ${effectiveItemCount}` }) : effectiveItemCount === 1 ? `${effectiveItemCount} ${labels.singular}` : `${effectiveItemCount} ${labels.plural}` })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$m.right), children: progressBar ? progressBar : paginated ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: effectiveItemCount === 0 ? "" : filteredCount !== void 0 && filteredCount !== itemCount ? `${startItem} - ${endItem} / ${effectiveItemCount} (${itemCount} total)` : `${startItem} - ${endItem} / ${effectiveItemCount}` }) : effectiveItemCount === 1 ? `${effectiveItemCount} ${labels.singular}` : `${effectiveItemCount} ${labels.plural}` })
       ]
     }
   );
@@ -94031,7 +94106,7 @@ var COLUMN_DEFINITION_MOD_VALIDATIONS = {
   groupHierarchy: "SharedRowGrouping"
 };
 var COLUMN_DEFINITION_VALIDATIONS = () => {
-  const validations = {
+  const validations2 = {
     autoHeight: {
       supportedRowModels: ["clientSide", "serverSide"],
       validate: (_colDef, { paginationAutoPageSize }) => {
@@ -94203,7 +94278,7 @@ ${suggestions}`;
       }
     }
   };
-  return validations;
+  return validations2;
 };
 var colDefPropertyMap = {
   headerName: void 0,
@@ -95230,15 +95305,15 @@ var GRID_OPTION_VALIDATIONS = () => {
       }
     }
   };
-  const validations = {};
+  const validations2 = {};
   for (const key2 of _BOOLEAN_GRID_OPTIONS) {
-    validations[key2] = { expectedType: "boolean" };
+    validations2[key2] = { expectedType: "boolean" };
   }
   for (const key2 of _NUMBER_GRID_OPTIONS) {
-    validations[key2] = { expectedType: "number" };
+    validations2[key2] = { expectedType: "number" };
   }
-  _mergeDeep(validations, definedValidations);
-  return validations;
+  _mergeDeep(validations2, definedValidations);
+  return validations2;
 };
 var GRID_OPTIONS_VALIDATORS = () => ({
   objectName: "gridOptions",
@@ -97258,10 +97333,10 @@ function _validateEdit(beans) {
   if (!map2) {
     return null;
   }
-  const validations = [];
+  const validations2 = [];
   map2.forEach((rowValidations, rowNode) => {
     rowValidations.forEach(({ errorMessages }, column2) => {
-      validations.push({
+      validations2.push({
         column: column2,
         rowIndex: rowNode.rowIndex,
         rowPinned: rowNode.rowPinned,
@@ -97269,7 +97344,7 @@ function _validateEdit(beans) {
       });
     });
   });
-  return validations;
+  return validations2;
 }
 function _createCellEvent(beans, domEvent, eventType, { rowNode, column: column2 }, value2) {
   const event = _addGridCommonParams(beans.gos, {
@@ -105098,7 +105173,7 @@ var ValidationService = class extends BeanStub {
     this.processOptions(colDef, COL_DEF_VALIDATORS());
   }
   processOptions(options, validator) {
-    const { validations, deprecations, allProperties, propertyExceptions, objectName, docsUrl } = validator;
+    const { validations: validations2, deprecations, allProperties, propertyExceptions, objectName, docsUrl } = validator;
     if (allProperties && this.gridOptions.suppressPropertyNamesCheck !== true) {
       this.checkProperties(
         options,
@@ -105120,7 +105195,7 @@ var ValidationService = class extends BeanStub {
       if (value2 == null || value2 === false) {
         return;
       }
-      const rules = validations[key2];
+      const rules = validations2[key2];
       if (!rules) {
         return;
       }
@@ -123712,14 +123787,14 @@ var AgGridReact = class extends Component$1 {
   }
 };
 const gridWrapper$1 = "_gridWrapper_1jp8e_1";
-const row$2 = "_row_1jp8e_11";
+const row$3 = "_row_1jp8e_11";
 const green = "_green_1jp8e_15";
 const red = "_red_1jp8e_19";
 const yellow = "_yellow_1jp8e_23";
 const blue = "_blue_1jp8e_27";
-const styles$j = {
+const styles$k = {
   gridWrapper: gridWrapper$1,
-  row: row$2,
+  row: row$3,
   green,
   red,
   yellow,
@@ -123863,9 +123938,18 @@ const ScanJobGrid = () => {
         sortable: true,
         filter: true,
         resizable: true,
-        valueGetter: (params2) => {
-          const timestamp2 = params2.data?.timestamp;
+        valueFormatter: (params2) => {
+          const timestamp2 = params2.value;
           return timestamp2 ? new Date(timestamp2).toLocaleString() : "";
+        },
+        comparator: (valueA, valueB) => {
+          if (!valueA) {
+            return 1;
+          }
+          if (!valueB) {
+            return -1;
+          }
+          return new Date(valueA).getTime() - new Date(valueB).getTime();
         }
       }
     ];
@@ -123885,7 +123969,7 @@ const ScanJobGrid = () => {
     },
     [setVisibleScanJobCount]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$j.gridWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$k.gridWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     AgGridReact,
     {
       ref: gridRef,
@@ -123906,7 +123990,7 @@ const ScanJobGrid = () => {
       onStateUpdated: (e) => {
         setGridState(GRID_STATE_NAME$1, e.state);
       },
-      rowClass: styles$j.row,
+      rowClass: styles$k.row,
       onRowClicked: (e) => {
         if (e.data) {
           void navigate(`/scan/${e.data.relativeLocation}`);
@@ -123920,19 +124004,19 @@ const ScanJobGrid = () => {
 const classNameForColor = (color) => {
   switch (color) {
     case "green":
-      return styles$j.green;
+      return styles$k.green;
     case "yellow":
-      return styles$j.yellow;
+      return styles$k.yellow;
     case "red":
-      return styles$j.red;
+      return styles$k.red;
     case "blue":
-      return styles$j.blue;
+      return styles$k.blue;
     default:
       return "";
   }
 };
 const container$5 = "_container_18ufx_1";
-const styles$i = {
+const styles$j = {
   container: container$5
 };
 const ScanJobsPanel = () => {
@@ -123944,7 +124028,7 @@ const ScanJobsPanel = () => {
   useEffect(() => {
     clearScansState();
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$i.container), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$j.container), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Navbar, { bordered: false }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityBar, { animating: !!loading }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(ExtendedFindProvider, { children: [
@@ -123962,16 +124046,249 @@ const ScanJobsPanel = () => {
   ] });
 };
 const root = "_root_ke0e7_1";
-const styles$h = {
+const styles$i = {
   root
 };
+const gridWrapper = "_gridWrapper_bykj9_1";
+const styles$h = {
+  gridWrapper
+};
+ModuleRegistry.registerModules([AllCommunityModule]);
+const GRID_STATE_NAME = "DataframeView";
+const DataframeView = ({
+  columnTable,
+  sortedColumns,
+  onRowDoubleClicked,
+  onVisibleRowCountChanged,
+  options,
+  enableKeyboardNavigation = true,
+  showRowNumbers = false,
+  wrapText = false
+}) => {
+  const selectedDataframeRow = useStore((state) => state.selectedResultRow) || 0;
+  const setSelectedDataframeRow = useStore(
+    (state) => state.setSelectedResultRow
+  );
+  const setGridState = useStore((state) => state.setGridState);
+  const gridState = useStore((state) => state.gridStates[GRID_STATE_NAME]);
+  const { columnDefs, rowData } = useMemo(() => {
+    const columnNames = sortedColumns || columnTable?.columnNames() || [];
+    const dataColumnDefs = columnTable ? columnNames.map((name2) => {
+      const col = columnTable.column(name2);
+      if (!col) {
+        return void 0;
+      }
+      const sampleValue = col?.at(0);
+      const valueFormatter = options ? (params) => {
+        if (params.value === null || params.value === void 0) {
+          return String(params.value);
+        }
+        if (typeof params.value === "string") {
+          return centerTruncate(params.value, options.maxStrLen);
+        }
+        return String(params.value);
+      } : void 0;
+      return {
+        field: name2,
+        headerName: name2,
+        sortable: true,
+        filter: true,
+        resizable: true,
+        tooltipField: name2,
+        maxWidth: 800,
+        cellDataType: typeof sampleValue === "boolean" ? false : void 0,
+        hide: !columnNames?.includes(name2) || false,
+        valueFormatter,
+        wrapText,
+        autoHeight: wrapText
+      };
+    }).filter((c2) => c2 !== void 0) : [];
+    const columnDefs2 = showRowNumbers ? [
+      {
+        headerName: "",
+        valueGetter: (params) => {
+          return params.node?.rowIndex !== void 0 && params.node?.rowIndex !== null ? params.node.rowIndex + 1 : "";
+        },
+        sortable: false,
+        filter: false,
+        resizable: false,
+        width: 60,
+        maxWidth: 60,
+        minWidth: 60,
+        pinned: "left",
+        suppressMovable: true,
+        cellClass: "row-number-cell",
+        cellStyle: {
+          textAlign: "right",
+          paddingRight: "12px"
+        },
+        onCellClicked: (params) => {
+          if (params.data && onRowDoubleClicked) {
+            if (params.rowIndex !== null && params.rowIndex !== void 0) {
+              setSelectedDataframeRow(params.rowIndex);
+            }
+            onRowDoubleClicked(params.data);
+          }
+        }
+      },
+      ...dataColumnDefs
+    ] : dataColumnDefs;
+    const rowData2 = columnTable?.objects();
+    return { columnDefs: columnDefs2, rowData: rowData2 };
+  }, [
+    columnTable,
+    sortedColumns,
+    options,
+    showRowNumbers,
+    wrapText,
+    onRowDoubleClicked,
+    setSelectedDataframeRow
+  ]);
+  const gridRef = useRef(null);
+  useEffect(() => {
+    if (gridRef.current?.api && gridState && !gridState.filter) {
+      const currentFilterModel = gridRef.current.api.getFilterModel();
+      if (currentFilterModel && Object.keys(currentFilterModel).length > 0) {
+        gridRef.current.api.setFilterModel(null);
+      }
+    }
+  }, [gridState]);
+  useEffect(() => {
+    if (gridRef.current?.api && selectedDataframeRow >= 0) {
+      gridRef.current.api.forEachNode((node2) => {
+        node2.setSelected(node2.rowIndex === selectedDataframeRow);
+      });
+      gridRef.current.api.ensureIndexVisible(selectedDataframeRow);
+    }
+  }, [selectedDataframeRow]);
+  const handleNext = useCallback(() => {
+    const totalRows = rowData?.length ?? 0;
+    if (selectedDataframeRow < totalRows - 1) {
+      setSelectedDataframeRow(selectedDataframeRow + 1);
+    }
+  }, [selectedDataframeRow, rowData]);
+  const handlePrevious = useCallback(() => {
+    if (selectedDataframeRow > 0) {
+      setSelectedDataframeRow(selectedDataframeRow - 1);
+    }
+  }, [selectedDataframeRow]);
+  const handleEnter = useCallback(() => {
+    if (gridRef.current?.api && selectedDataframeRow >= 0 && onRowDoubleClicked) {
+      const selectedNode = gridRef.current.api.getDisplayedRowAtIndex(selectedDataframeRow);
+      if (selectedNode?.data) {
+        onRowDoubleClicked(selectedNode.data);
+      }
+    }
+  }, [selectedDataframeRow, onRowDoubleClicked]);
+  useEffect(() => {
+    if (!enableKeyboardNavigation) {
+      return;
+    }
+    const handleGlobalKeyDown = (e) => {
+      const activeElement = document.activeElement;
+      const isInputFocused = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT");
+      if (!isInputFocused) {
+        const totalRows = rowData?.length ?? 0;
+        if (e.key === "ArrowUp") {
+          if (e.metaKey || e.ctrlKey) {
+            if (totalRows > 0) {
+              e.preventDefault();
+              setSelectedDataframeRow(0);
+            }
+          } else if (selectedDataframeRow > 0) {
+            e.preventDefault();
+            handlePrevious();
+          }
+        } else if (e.key === "ArrowDown") {
+          if (e.metaKey || e.ctrlKey) {
+            if (totalRows > 0) {
+              e.preventDefault();
+              setSelectedDataframeRow(totalRows - 1);
+            }
+          } else if (selectedDataframeRow < totalRows - 1) {
+            e.preventDefault();
+            handleNext();
+          }
+        } else if (e.key === "Enter") {
+          if (selectedDataframeRow >= 0) {
+            e.preventDefault();
+            handleEnter();
+          }
+        }
+      }
+    };
+    document.addEventListener("keydown", handleGlobalKeyDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleGlobalKeyDown, true);
+    };
+  }, [
+    enableKeyboardNavigation,
+    selectedDataframeRow,
+    rowData,
+    handleNext,
+    handlePrevious,
+    handleEnter
+  ]);
+  const updateVisibleRowCount = useCallback(
+    (api) => {
+      const displayedRowCount = api.getDisplayedRowCount();
+      onVisibleRowCountChanged?.(displayedRowCount);
+    },
+    [onVisibleRowCountChanged]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h.gridWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    AgGridReact,
+    {
+      ref: gridRef,
+      rowData,
+      columnDefs,
+      defaultColDef: {
+        sortable: true,
+        filter: true,
+        resizable: true
+      },
+      rowSelection: {
+        mode: "singleRow",
+        enableClickSelection: true,
+        checkboxes: false
+      },
+      animateRows: false,
+      suppressColumnMoveAnimation: true,
+      suppressCellFocus: true,
+      theme: themeBalham,
+      enableCellTextSelection: true,
+      initialState: gridState,
+      onFirstDataRendered: (e) => {
+        e.api.sizeColumnsToFit();
+        updateVisibleRowCount(e.api);
+      },
+      onStateUpdated: (e) => {
+        setGridState(GRID_STATE_NAME, e.state);
+      },
+      onFilterChanged: (e) => {
+        updateVisibleRowCount(e.api);
+      },
+      autoSizeStrategy: {
+        type: "fitCellContents"
+      },
+      onRowDoubleClicked: (e) => {
+        if (e.data) {
+          if (e.rowIndex !== null) {
+            setSelectedDataframeRow(e.rowIndex);
+          }
+          onRowDoubleClicked?.(e.data);
+        }
+      }
+    }
+  ) });
+};
 const rootControl = "_rootControl_19z32_1";
 const segment = "_segment_19z32_10";
-const selected$2 = "_selected_19z32_10";
+const selected$3 = "_selected_19z32_10";
 const styles$g = {
   rootControl,
   segment,
-  selected: selected$2
+  selected: selected$3
 };
 const SegmentedControl = ({
   id: id2,
@@ -124035,13 +124352,6 @@ const ScanInfo = () => {
         className: clsx(styles$f.container),
         selectedStatus
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TranscriptsInfoCard,
-      {
-        className: clsx(styles$f.container),
-        selectedStatus
-      }
     )
   ] });
 };
@@ -124093,34 +124403,6 @@ const ScanMetadataCard = ({
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCard, { title: "Metadata", className: className2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(RecordTree, { id: "scan-metadata", record: selectedStatus.spec.metadata }) });
 };
-const TranscriptsInfoCard = ({
-  selectedStatus,
-  className: className2
-}) => {
-  const fieldsDict = selectedStatus.spec.transcripts?.fields.reduce(
-    (acc, curr) => {
-      const name2 = curr["name"];
-      const type = curr["type"];
-      if (name2 && type) {
-        acc[name2] = type;
-      }
-      return acc;
-    },
-    {}
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(InfoCard, { title: "Transcripts", className: className2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    MetaDataGrid,
-    {
-      className: "text-size-small",
-      entries: {
-        Type: selectedStatus.spec.transcripts?.type,
-        Count: selectedStatus.spec.transcripts?.count,
-        Fields: fieldsDict
-      }
-    },
-    `plan-md-task`
-  ) });
-};
 const ScannerInfoCard = ({
   selectedStatus,
   className: className2
@@ -124142,6 +124424,284 @@ const InfoCard = ({ title: title2, className: className2, children: children2 })
     /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: children2 })
   ] });
 };
+const ScanDataframeClearFiltersButton = () => {
+  const setGridState = useStore((state) => state.setGridState);
+  const gridState = useStore((state) => state.gridStates[GRID_STATE_NAME]);
+  const clearState = useCallback(() => {
+    const { filter: filter2, ...state } = gridState || {};
+    setGridState(GRID_STATE_NAME, state);
+  }, [gridState, setGridState]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ToolButton,
+    {
+      icon: ApplicationIcons.filter,
+      label: "Clear Filters",
+      onClick: clearState
+    }
+  );
+};
+const grid = "_grid_hbkjn_1";
+const row$2 = "_row_hbkjn_8";
+const links = "_links_hbkjn_22";
+const selected$2 = "_selected_hbkjn_40";
+const styles$e = {
+  grid,
+  row: row$2,
+  links,
+  selected: selected$2
+};
+const defaultColumns = [
+  "transcript_id",
+  "value",
+  "explanation",
+  "metadata",
+  "transcript_source_id",
+  "transcript_metadata",
+  "input_ids",
+  "input",
+  "label",
+  "uuid",
+  "message_references",
+  "validation_target",
+  "validation_result",
+  "scan_total_tokens",
+  "scan_model_usage",
+  "scan_events",
+  "timestamp"
+];
+const columnsGroups = {
+  Transcript: [
+    "transcript_id",
+    "transcript_source_type",
+    "transcript_source_id",
+    "transcript_source_uri",
+    "transcript_metadata"
+  ],
+  Scan: [
+    "scan_id",
+    "scan_tags",
+    "scan_metadata",
+    "scan_git_origin",
+    "scan_git_version",
+    "scan_git_commit"
+  ],
+  Scanner: [
+    "scanner_key",
+    "scanner_name",
+    "scanner_version",
+    "scanner_package_version",
+    "scanner_file",
+    "scanner_params"
+  ],
+  Input: ["input_type", "input_ids", "input"],
+  Validation: ["validation_target", "validation_result"],
+  Result: [
+    "uuid",
+    "value",
+    "explanation",
+    "metadata",
+    "label",
+    "value_type",
+    "answer",
+    "scan_tokens_total",
+    "scan_model_usage",
+    "scan_events",
+    "timestamp",
+    "message_references",
+    "event_references"
+  ],
+  Error: ["scan_error", "scan_error_traceback", "scan_error_type"]
+};
+const useDataframeColumns = () => {
+  const allColumns = Object.values(columnsGroups).flat();
+  const filteredColumns = useStore((state) => state.dataframeFilterColumns) || defaultColumns;
+  const setFilteredColumns = useStore(
+    (state) => state.setDataframeFilterColumns
+  );
+  const isDefaultFilter = filteredColumns?.length === defaultColumns.length && filteredColumns.every((col) => defaultColumns.includes(col));
+  const isAllFilter = filteredColumns?.length === allColumns.length;
+  const setDefaultFilter = () => {
+    setFilteredColumns(defaultColumns);
+  };
+  const setAllFilter = () => {
+    setFilteredColumns(allColumns);
+  };
+  const filterColumn = useCallback(
+    (column2, show) => {
+      if (show && !filteredColumns?.includes(column2)) {
+        setFilteredColumns([...filteredColumns || [], column2]);
+      } else if (!show) {
+        setFilteredColumns(filteredColumns?.filter((c2) => c2 !== column2) || []);
+      }
+    },
+    [filteredColumns, setFilteredColumns]
+  );
+  const arrangedColumns = (cols) => {
+    const groupOrder = [
+      "Result",
+      "Input",
+      "---",
+      "Transcript",
+      "Validation",
+      "Error",
+      "---",
+      "Scan",
+      "Scanner"
+    ];
+    const groupedColumns = {};
+    Object.entries(columnsGroups).forEach(([groupName, columns2]) => {
+      const columnsInGroup = columns2.filter((col) => {
+        if (col.endsWith("*")) {
+          const prefix = col.slice(0, -1);
+          return allColumns.some((c2) => c2.startsWith(prefix));
+        }
+        return allColumns.includes(col);
+      });
+      if (columnsInGroup.length > 0) {
+        groupedColumns[groupName] = columnsInGroup;
+      }
+    });
+    const result2 = [];
+    let currentColumn = {};
+    groupOrder.forEach((item2) => {
+      if (item2 === "---") {
+        if (Object.keys(currentColumn).length > 0) {
+          result2.push(currentColumn);
+          currentColumn = {};
+        }
+      } else if (groupedColumns[item2]) {
+        currentColumn[item2] = groupedColumns[item2];
+      }
+    });
+    if (Object.keys(currentColumn).length > 0) {
+      result2.push(currentColumn);
+    }
+    while (result2.length < cols) {
+      result2.push({});
+    }
+    return result2;
+  };
+  return {
+    defaultFilter: defaultColumns,
+    isDefaultFilter,
+    isAllFilter,
+    setDefaultFilter,
+    setAllFilter,
+    filterColumn,
+    filtered: filteredColumns || [],
+    arrangedColumns
+  };
+};
+const ScanDataframeColumnsPopover = ({ positionEl }) => {
+  const showFilter = useStore((state) => state.dataframeShowFilterColumns);
+  const setShowFilter = useStore(
+    (state) => state.setDataframeShowFilterColumns
+  );
+  const {
+    isDefaultFilter,
+    isAllFilter,
+    setDefaultFilter,
+    setAllFilter,
+    filterColumn,
+    filtered,
+    arrangedColumns
+  } = useDataframeColumns();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    PopOver,
+    {
+      id: `scandata-choose-columns-popover`,
+      positionEl,
+      isOpen: !!showFilter,
+      setIsOpen: setShowFilter,
+      placement: "bottom-end",
+      hoverDelay: -1,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$e.links, "text-size-smaller"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "a",
+            {
+              className: clsx(
+                styles$e.link,
+                isDefaultFilter ? styles$e.selected : void 0
+              ),
+              onClick: () => setDefaultFilter(),
+              children: "Default"
+            }
+          ),
+          "|",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "a",
+            {
+              className: clsx(
+                styles$e.link,
+                isAllFilter ? styles$e.selected : void 0
+              ),
+              onClick: () => setAllFilter(),
+              children: "All"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$e.grid, "text-size-smaller"), children: arrangedColumns(3).map((columnGroup, colIndex) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: Object.entries(columnGroup).map(([groupName, columns2]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                style: {
+                  fontWeight: 600,
+                  marginTop: "0.5em",
+                  marginBottom: "0.25em"
+                },
+                children: groupName
+              }
+            ),
+            columns2.map((column2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: clsx(styles$e.row),
+                onClick: () => {
+                  filterColumn(column2, !filtered.includes(column2));
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: filtered.includes(column2),
+                      onChange: (e) => {
+                        filterColumn(column2, e.target.checked);
+                      }
+                    }
+                  ),
+                  column2
+                ]
+              },
+              column2
+            ))
+          ] }, groupName)) }, colIndex);
+        }) })
+      ]
+    }
+  );
+};
+const ScanDataframeFilterColumnsButton = forwardRef((_, ref2) => {
+  const showFilter = useStore((state) => state.dataframeShowFilterColumns);
+  const setShowFilter = useStore(
+    (state) => state.setDataframeShowFilterColumns
+  );
+  const toggleShowFilter = useCallback(() => {
+    setShowFilter(!showFilter);
+  }, [showFilter, setShowFilter]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ToolButton,
+    {
+      icon: ApplicationIcons.checkbox.checked,
+      label: "Choose Columns",
+      onClick: toggleShowFilter,
+      latched: showFilter,
+      ref: ref2
+    }
+  );
+});
 const ScanDataframeWrapTextButton = () => {
   const wrapText = useStore((state) => state.dataframeWrapText);
   const setWrapText = useStore((state) => state.setDataframeWrapText);
@@ -124160,7 +124720,7 @@ const ScanDataframeWrapTextButton = () => {
 };
 const flex$1 = "_flex_1kye9_1";
 const label$1 = "_label_1kye9_5";
-const styles$e = {
+const styles$d = {
   flex: flex$1,
   label: label$1
 };
@@ -124180,7 +124740,7 @@ const ScanResultsFilter = () => {
     { label: "Positive", val: kFilterPositiveResults },
     { label: "All", val: kFilterAllResults }
   ];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$e.flex, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$d.flex, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -124189,7 +124749,7 @@ const ScanResultsFilter = () => {
           "text-size-smaller",
           "text-style-label",
           "text-style-secondary",
-          styles$e.label
+          styles$d.label
         ),
         children: "Results:"
       }
@@ -124211,7 +124771,7 @@ const ScanResultsFilter = () => {
 };
 const flex = "_flex_1kye9_1";
 const label = "_label_1kye9_5";
-const styles$d = {
+const styles$c = {
   flex,
   label
 };
@@ -124237,7 +124797,7 @@ const ScanResultsGroup = ({
     return null;
   }
   groupByOpts.unshift({ label: "None", value: "none" });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$d.flex, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$c.flex, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -124246,7 +124806,7 @@ const ScanResultsGroup = ({
           "text-size-smaller",
           "text-style-label",
           "text-style-secondary",
-          styles$d.label
+          styles$c.label
         ),
         children: "Group:"
       }
@@ -124279,231 +124839,6 @@ const toVal = (v) => {
     return "none";
   }
 };
-const gridWrapper = "_gridWrapper_bykj9_1";
-const styles$c = {
-  gridWrapper
-};
-ModuleRegistry.registerModules([AllCommunityModule]);
-const GRID_STATE_NAME = "DataframeView";
-const DataframeView = ({
-  columnTable,
-  sortedColumns,
-  onRowDoubleClicked,
-  onVisibleRowCountChanged,
-  options,
-  enableKeyboardNavigation = true,
-  showRowNumbers = false,
-  wrapText = false
-}) => {
-  const selectedDataframeRow = useStore((state) => state.selectedResultRow) || 0;
-  const setSelectedDataframeRow = useStore(
-    (state) => state.setSelectedResultRow
-  );
-  const gridStates = useStore((state) => state.gridStates);
-  const setGridState = useStore((state) => state.setGridState);
-  const gridState = useMemo(() => {
-    const savedState = gridStates[GRID_STATE_NAME];
-    return savedState;
-  }, [gridStates]);
-  const { columnDefs, rowData } = useMemo(() => {
-    const columnNames = sortedColumns || columnTable?.columnNames() || [];
-    const dataColumnDefs = columnTable ? columnNames.map((name2) => {
-      const col = columnTable.column(name2);
-      if (!col) {
-        return void 0;
-      }
-      const sampleValue = col?.at(0);
-      const valueFormatter = options ? (params) => {
-        if (params.value === null || params.value === void 0) {
-          return String(params.value);
-        }
-        if (typeof params.value === "string") {
-          return centerTruncate(params.value, options.maxStrLen);
-        }
-        return String(params.value);
-      } : void 0;
-      return {
-        field: name2,
-        headerName: name2,
-        sortable: true,
-        filter: true,
-        resizable: true,
-        tooltipField: name2,
-        maxWidth: 800,
-        cellDataType: typeof sampleValue === "boolean" ? false : void 0,
-        hide: !columnNames?.includes(name2) || false,
-        valueFormatter,
-        wrapText,
-        autoHeight: wrapText
-      };
-    }).filter((c2) => c2 !== void 0) : [];
-    const columnDefs2 = showRowNumbers ? [
-      {
-        headerName: "",
-        valueGetter: (params) => {
-          return params.node?.rowIndex !== void 0 && params.node?.rowIndex !== null ? params.node.rowIndex + 1 : "";
-        },
-        sortable: false,
-        filter: false,
-        resizable: false,
-        width: 60,
-        maxWidth: 60,
-        minWidth: 60,
-        pinned: "left",
-        suppressMovable: true,
-        cellClass: "row-number-cell",
-        cellStyle: {
-          textAlign: "right",
-          paddingRight: "12px"
-        },
-        onCellClicked: (params) => {
-          if (params.data && onRowDoubleClicked) {
-            if (params.rowIndex !== null && params.rowIndex !== void 0) {
-              setSelectedDataframeRow(params.rowIndex);
-            }
-            onRowDoubleClicked(params.data);
-          }
-        }
-      },
-      ...dataColumnDefs
-    ] : dataColumnDefs;
-    const rowData2 = columnTable?.objects();
-    return { columnDefs: columnDefs2, rowData: rowData2 };
-  }, [
-    columnTable,
-    sortedColumns,
-    options,
-    showRowNumbers,
-    wrapText,
-    onRowDoubleClicked,
-    setSelectedDataframeRow
-  ]);
-  const gridRef = useRef(null);
-  useEffect(() => {
-    if (gridRef.current?.api && selectedDataframeRow >= 0) {
-      gridRef.current.api.forEachNode((node2) => {
-        node2.setSelected(node2.rowIndex === selectedDataframeRow);
-      });
-      gridRef.current.api.ensureIndexVisible(selectedDataframeRow);
-    }
-  }, [selectedDataframeRow]);
-  const handleNext = useCallback(() => {
-    const totalRows = rowData?.length ?? 0;
-    if (selectedDataframeRow < totalRows - 1) {
-      setSelectedDataframeRow(selectedDataframeRow + 1);
-    }
-  }, [selectedDataframeRow, rowData]);
-  const handlePrevious = useCallback(() => {
-    if (selectedDataframeRow > 0) {
-      setSelectedDataframeRow(selectedDataframeRow - 1);
-    }
-  }, [selectedDataframeRow]);
-  const handleEnter = useCallback(() => {
-    if (gridRef.current?.api && selectedDataframeRow >= 0 && onRowDoubleClicked) {
-      const selectedNode = gridRef.current.api.getDisplayedRowAtIndex(selectedDataframeRow);
-      if (selectedNode?.data) {
-        onRowDoubleClicked(selectedNode.data);
-      }
-    }
-  }, [selectedDataframeRow, onRowDoubleClicked]);
-  useEffect(() => {
-    if (!enableKeyboardNavigation) {
-      return;
-    }
-    const handleGlobalKeyDown = (e) => {
-      const activeElement = document.activeElement;
-      const isInputFocused = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT");
-      if (!isInputFocused) {
-        const totalRows = rowData?.length ?? 0;
-        if (e.key === "ArrowUp") {
-          if (e.metaKey || e.ctrlKey) {
-            if (totalRows > 0) {
-              e.preventDefault();
-              setSelectedDataframeRow(0);
-            }
-          } else if (selectedDataframeRow > 0) {
-            e.preventDefault();
-            handlePrevious();
-          }
-        } else if (e.key === "ArrowDown") {
-          if (e.metaKey || e.ctrlKey) {
-            if (totalRows > 0) {
-              e.preventDefault();
-              setSelectedDataframeRow(totalRows - 1);
-            }
-          } else if (selectedDataframeRow < totalRows - 1) {
-            e.preventDefault();
-            handleNext();
-          }
-        } else if (e.key === "Enter") {
-          if (selectedDataframeRow >= 0) {
-            e.preventDefault();
-            handleEnter();
-          }
-        }
-      }
-    };
-    document.addEventListener("keydown", handleGlobalKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleGlobalKeyDown, true);
-    };
-  }, [
-    enableKeyboardNavigation,
-    selectedDataframeRow,
-    rowData,
-    handleNext,
-    handlePrevious,
-    handleEnter
-  ]);
-  const updateVisibleRowCount = useCallback(
-    (api) => {
-      const displayedRowCount = api.getDisplayedRowCount();
-      onVisibleRowCountChanged?.(displayedRowCount);
-    },
-    [onVisibleRowCountChanged]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$c.gridWrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    AgGridReact,
-    {
-      ref: gridRef,
-      rowData,
-      columnDefs,
-      defaultColDef: {
-        sortable: true,
-        filter: true,
-        resizable: true
-      },
-      rowSelection: "single",
-      animateRows: false,
-      suppressColumnMoveAnimation: true,
-      suppressCellFocus: true,
-      theme: themeBalham,
-      enableCellTextSelection: true,
-      initialState: gridState,
-      onFirstDataRendered: (e) => {
-        e.api.sizeColumnsToFit();
-        updateVisibleRowCount(e.api);
-      },
-      onStateUpdated: (e) => {
-        setGridState(GRID_STATE_NAME, e.state);
-      },
-      onFilterChanged: (e) => {
-        updateVisibleRowCount(e.api);
-      },
-      autoSizeStrategy: {
-        type: "fitCellContents"
-      },
-      onRowDoubleClicked: (e) => {
-        if (e.data) {
-          if (e.rowIndex !== null) {
-            setSelectedDataframeRow(e.rowIndex);
-          }
-          onRowDoubleClicked?.(e.data);
-        }
-      }
-    }
-  ) });
-};
 const header = "_header_u9u40_1";
 const clickable = "_clickable_u9u40_19";
 const styles$b = {
@@ -124678,6 +125013,7 @@ const ScanResultsRowComponent = ({
   const hasLabel = gridDescriptor.columns.includes("label");
   const hasErrors = gridDescriptor.columns.includes("error");
   const hasValidations = gridDescriptor.columns.includes("validations");
+  const refs = useMarkdownRefs(entry2);
   const grid2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -124695,7 +125031,7 @@ const ScanResultsRowComponent = ({
       },
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.id, "text-size-smaller"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Identifier, { result: entry2 }) }),
-        hasExplanation && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.explanation, "text-size-smaller"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Explanation, { result: entry2 }) }),
+        hasExplanation && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.explanation, "text-size-smaller"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Explanation, { result: entry2, references: refs }) }),
         hasLabel && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -124708,7 +125044,7 @@ const ScanResultsRowComponent = ({
             children: entry2.label || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-style-secondary"), children: "—" })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.value, "text-size-smaller"), children: !entry2.scanError && /* @__PURE__ */ jsxRuntimeExports.jsx(Value, { result: entry2, style: "inline" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.value, "text-size-smaller"), children: !entry2.scanError && /* @__PURE__ */ jsxRuntimeExports.jsx(Value, { result: entry2, style: "inline", references: refs }) }),
         hasValidations && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ValidationResult, { result: entry2.validationResult }) }),
         hasErrors && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$6.error, "text-size-smallest"), children: entry2.scanError && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Error$1,
@@ -125149,12 +125485,13 @@ const ScanResultsBody = () => {
   const [searchParams] = useSearchParams();
   const relativePath = getRelativePathFromParams(params);
   const { scanPath } = parseScanResultPath(relativePath);
+  const dataframeFilterColumns = useStore(
+    (state) => state.dataframeFilterColumns
+  );
   const sortedColumns = useMemo(() => {
-    if (!columnTable) {
-      return [];
-    }
-    return columnTable.columnNames().sort(sortColumns);
-  }, [columnTable]);
+    const cols = dataframeFilterColumns || defaultColumns;
+    return [...cols].sort(sortColumns);
+  }, [dataframeFilterColumns]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$5.scrollContainer), children: [
     hasScanner && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { height: "100%", width: "100%" }, children: [
       selectedResultsView === kSegmentList && /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -125206,21 +125543,25 @@ const sortColumns = (a2, b) => {
     return indexA - indexB;
   }
 };
-const container$2 = "_container_1a0yr_1";
-const entry = "_entry_1a0yr_5";
-const selected = "_selected_1a0yr_9";
-const titleBlock = "_titleBlock_1a0yr_13";
-const subTitle = "_subTitle_1a0yr_17";
-const title = "_title_1a0yr_13";
-const validationTable = "_validationTable_1a0yr_36";
+const container$2 = "_container_1ov9x_1";
+const entry = "_entry_1ov9x_5";
+const selected = "_selected_1ov9x_12";
+const titleBlock = "_titleBlock_1ov9x_16";
+const validations = "_validations_1ov9x_21";
+const subTitle = "_subTitle_1ov9x_25";
+const title = "_title_1ov9x_16";
+const numericResultTable = "_numericResultTable_1ov9x_44";
+const contents = "_contents_1ov9x_51";
 const styles$4 = {
   container: container$2,
   entry,
   selected,
   titleBlock,
+  validations,
   subTitle,
   title,
-  validationTable
+  numericResultTable,
+  contents
 };
 const ScanResultsOutline = () => {
   const selectedStatus = useStore((state) => state.selectedScanStatus);
@@ -125278,16 +125619,27 @@ const ScanResultsRow = ({
           {
             label: "Positive Results",
             layout: "row",
-            className: clsx("text-size-smallest"),
+            className: clsx("text-size-smallest", styles$4.contents),
             children: entry2.results
           }
         ),
+        Object.keys(entry2.metrics).map((key2) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LabeledValue,
+            {
+              label: key2,
+              layout: "row",
+              className: clsx("text-size-smallest", styles$4.contents),
+              children: entry2.metrics[key2] !== void 0 ? formatPrettyDecimal(entry2.metrics[key2]) : "n/a"
+            }
+          );
+        }),
         !!entry2.errors && /* @__PURE__ */ jsxRuntimeExports.jsx(
           LabeledValue,
           {
             label: "Errors",
             layout: "row",
-            className: clsx("text-size-smallest"),
+            className: clsx("text-size-smallest", styles$4.contents),
             children: entry2.errors
           }
         ),
@@ -125296,8 +125648,14 @@ const ScanResultsRow = ({
           {
             label: "Validations",
             layout: typeof entry2.validations === "number" ? "row" : "column",
-            className: clsx("text-size-smallest"),
-            children: typeof entry2.validations === "number" ? formatPercent(entry2.validations) : /* @__PURE__ */ jsxRuntimeExports.jsx(ValidationTable, { validations: entry2.validations })
+            className: clsx("text-size-smallest", styles$4.validations),
+            children: typeof entry2.validations === "number" ? formatPercent(entry2.validations) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+              NumericResultsTable,
+              {
+                results: entry2.validations,
+                formatter: formatPercent
+              }
+            )
           }
         )
       ]
@@ -125320,7 +125678,8 @@ const toEntries = (status) => {
         formattedParams.push(`${key2}=${JSON.stringify(value2)}`);
       }
     }
-    const validations = summary2?.validations ? resolveValidations(summary2.validations) : void 0;
+    const validations2 = summary2?.validations ? resolveValidations(summary2.validations) : void 0;
+    const metrics = summary2 && Object.keys(summary2?.metrics || {}).includes(scanner) ? summary2.metrics[scanner] : {};
     entries2.push({
       icon: ApplicationIcons.scorer,
       title: scanner,
@@ -125329,24 +125688,25 @@ const toEntries = (status) => {
       tokens: summary2?.tokens,
       errors: summary2?.errors,
       params: formattedParams,
-      validations
+      validations: validations2,
+      metrics
     });
   }
   return entries2;
 };
-const resolveValidations = (validations) => {
-  if (validations.length === 0) {
+const resolveValidations = (validations2) => {
+  if (validations2.length === 0) {
     return void 0;
   }
-  const first2 = validations[0];
+  const first2 = validations2[0];
   if (typeof first2 === "boolean") {
-    const correct = validations.reduce((count2, v) => count2 + (v ? 1 : 0), 0);
-    const total = validations.length;
+    const correct = validations2.reduce((count2, v) => count2 + (v ? 1 : 0), 0);
+    const total = validations2.length;
     return correct / total;
   } else {
     const counts = {};
-    const total = validations.length;
-    for (const validation2 of validations) {
+    const total = validations2.length;
+    for (const validation2 of validations2) {
       if (typeof validation2 === "object") {
         for (const [key2, value2] of Object.entries(validation2)) {
           if (value2) {
@@ -125361,10 +125721,10 @@ const resolveValidations = (validations) => {
     return counts;
   }
 };
-const ValidationTable = ({ validations }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.validationTable), children: Object.entries(validations).map(([key2, value2]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.validationKey), children: key2 }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.validationValue), children: formatPercent(value2) })
+const NumericResultsTable = ({ results: validations2, formatter }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.numericResultTable), children: Object.entries(validations2).map(([key2, value2]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.numericResultKey), children: key2 }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$4.numericResultValue), children: formatter ? formatter(value2) : value2 })
   ] }, key2)) });
 };
 const container$1 = "_container_1db6h_1";
@@ -125496,6 +125856,17 @@ const ScannerPanelBody = () => {
   const visibleScannerResults = useStore(
     (state) => state.visibleScannerResults
   );
+  const chooseColumnnsRef = useRef(null);
+  const [buttonElement, setButtonElement] = useState(
+    null
+  );
+  const gridFilter = useStore(
+    (state) => state.gridStates[GRID_STATE_NAME]?.filter
+  );
+  const buttonRefCallback = (element) => {
+    chooseColumnnsRef.current = element;
+    setButtonElement(element);
+  };
   useEffect(() => {
     const tabParam = searchParams.get("tab");
     if (tabParam) {
@@ -125558,7 +125929,23 @@ const ScannerPanelBody = () => {
       tools2.push(/* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultsFilter, {}, "scan-results-filtering"));
     }
     if (selectedResultsView === kSegmentDataframe) {
-      tools2.push(/* @__PURE__ */ jsxRuntimeExports.jsx(ScanDataframeWrapTextButton, {}));
+      tools2.push(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ScanDataframeWrapTextButton, {}, "scan-dataframe-wrap-text")
+      );
+    }
+    if (selectedResultsView === kSegmentDataframe) {
+      tools2.push(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ScanDataframeFilterColumnsButton,
+          {
+            ref: buttonRefCallback
+          },
+          "scan-dataframe-filter-columns"
+        )
+      );
+    }
+    if (selectedResultsView === kSegmentDataframe && gridFilter) {
+      tools2.push(/* @__PURE__ */ jsxRuntimeExports.jsx(ScanDataframeClearFiltersButton, {}));
     }
     if (selectedResultsView === kSegmentList && groupOptions.length > 0) {
       tools2.push(
@@ -125596,69 +125983,72 @@ const ScannerPanelBody = () => {
       )
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    TabSet,
-    {
-      id: "scan-detail-tabs",
-      type: "pills",
-      tabPanelsClassName: clsx(styles$1.tabSet),
-      tabControlsClassName: clsx(styles$1.tabControl),
-      className: clsx(styles$1.tabs),
-      tools: tools2,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TabPanel,
-          {
-            id: kTabIdScans,
-            selected: selectedTab === kTabIdScans || selectedTab === void 0,
-            title: "Results",
-            onSelected: () => {
-              handleTabChange(kTabIdScans);
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultsPanel, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TabPanel,
-          {
-            id: kTabIdInfo,
-            selected: selectedTab === kTabIdInfo,
-            title: "Info",
-            onSelected: () => {
-              handleTabChange(kTabIdInfo);
-            },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScanInfo, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          TabPanel,
-          {
-            id: kTabIdJson,
-            selected: selectedTab === kTabIdJson,
-            title: "JSON",
-            onSelected: () => {
-              handleTabChange(kTabIdJson);
-            },
-            scrollable: true,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              JSONPanel,
-              {
-                id: "task-json-contents",
-                data: selectedStatus,
-                simple: true
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      TabSet,
+      {
+        id: "scan-detail-tabs",
+        type: "pills",
+        tabPanelsClassName: clsx(styles$1.tabSet),
+        tabControlsClassName: clsx(styles$1.tabControl),
+        className: clsx(styles$1.tabs),
+        tools: tools2,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TabPanel,
+            {
+              id: kTabIdScans,
+              selected: selectedTab === kTabIdScans || selectedTab === void 0,
+              title: "Results",
+              onSelected: () => {
+                handleTabChange(kTabIdScans);
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScanResultsPanel, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TabPanel,
+            {
+              id: kTabIdInfo,
+              selected: selectedTab === kTabIdInfo,
+              title: "Info",
+              onSelected: () => {
+                handleTabChange(kTabIdInfo);
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScanInfo, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TabPanel,
+            {
+              id: kTabIdJson,
+              selected: selectedTab === kTabIdJson,
+              title: "JSON",
+              onSelected: () => {
+                handleTabChange(kTabIdJson);
+              },
+              scrollable: true,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                JSONPanel,
+                {
+                  id: "task-json-contents",
+                  data: selectedStatus,
+                  simple: true
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    selectedResultsView === kSegmentDataframe && buttonElement && /* @__PURE__ */ jsxRuntimeExports.jsx(ScanDataframeColumnsPopover, { positionEl: buttonElement })
+  ] });
 };
-const scanTitleView = "_scanTitleView_1vka4_1";
-const leftColumn = "_leftColumn_1vka4_10";
-const rightColumn = "_rightColumn_1vka4_18";
-const secondaryRow = "_secondaryRow_1vka4_34";
-const subtitle = "_subtitle_1vka4_47";
+const scanTitleView = "_scanTitleView_1ayz3_1";
+const leftColumn = "_leftColumn_1ayz3_10";
+const rightColumn = "_rightColumn_1ayz3_18";
+const secondaryRow = "_secondaryRow_1ayz3_34";
+const subtitle = "_subtitle_1ayz3_40";
 const styles = {
   scanTitleView,
   leftColumn,
@@ -125669,10 +126059,13 @@ const styles = {
 const ScannerPanelTitle = () => {
   const selectedStatus = useStore((state) => state.selectedScanStatus);
   const resultsDir = useStore((state) => state.resultsDir);
-  const errorCount = selectedStatus?.errors.length || 0;
-  const status = selectedStatus === void 0 ? "" : selectedStatus.complete ? "Complete" : "Incomplete";
   const scanJobName = selectedStatus?.spec.scan_name === "job" ? "scan" : selectedStatus?.spec.scan_name;
-  const transcriptCount = selectedStatus?.spec.transcripts?.count || 0;
+  const scannerModel = selectedStatus?.spec.model.model;
+  const deprecatedCount = selectedStatus?.spec.transcripts?.count || 0;
+  const modernCorrectCount = Object.keys(
+    selectedStatus?.spec.transcripts?.transcript_ids || {}
+  ).length;
+  const transcriptCount = Math.max(deprecatedCount, modernCorrectCount);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.scanTitleView), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.leftColumn), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { children: [
@@ -125680,26 +126073,50 @@ const ScannerPanelTitle = () => {
         ":"
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.secondaryRow), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: toRelativePath(selectedStatus?.location || "", resultsDir || "") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { children: [
+          toRelativePath(selectedStatus?.location || "", resultsDir || ""),
+          scannerModel ? ` (${scannerModel})` : ""
+        ] }),
         selectedStatus?.location && /* @__PURE__ */ jsxRuntimeExports.jsx(
           CopyButton,
           {
+            title: "Copy Scan Path",
             className: clsx("text-size-small"),
             value: prettyDirUri(selectedStatus?.location)
           }
         )
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", {}),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: clsx(styles.subtitle, "text-style-secondary"), children: selectedStatus?.spec.timestamp ? formatDateTime(new Date(selectedStatus?.spec.timestamp)) : "" })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.subtitle, "text-style-secondary"), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StatusDisplay, { status: selectedStatus }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "—" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          transcriptCount,
+          " Transcripts "
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "—" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: selectedStatus?.spec.timestamp ? formatDateTime(new Date(selectedStatus?.spec.timestamp)) : "" })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.rightColumn, "text-size-smaller"), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        transcriptCount,
-        " Transcripts"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: status }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: errorCount === 1 ? `${errorCount} Error` : errorCount > 1 ? `${errorCount} Errors` : "" })
-    ] })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles.rightColumn, "text-size-smaller") })
+  ] });
+};
+const StatusDisplay = ({ status }) => {
+  const errorCount = status?.errors.length || 0;
+  if (errorCount > 0) {
+    const errorStr = errorCount === 1 ? `${errorCount} Error` : errorCount > 1 ? `${errorCount} Errors` : "";
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.error }),
+      " ",
+      errorStr
+    ] });
+  }
+  const statusStr = status === void 0 ? "" : status.complete ? "Complete" : "Incomplete";
+  const statusIcon = status === void 0 ? ApplicationIcons.running : status.complete ? ApplicationIcons.successSubtle : ApplicationIcons.pendingTaskSubtle;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: statusIcon }),
+    " ",
+    statusStr
   ] });
 };
 const ScannerPanel = () => {
@@ -125720,7 +126137,7 @@ const ScannerPanel = () => {
     }
   }, [searchParams, setSelectedScanner]);
   const selectedStatus = useStore((state) => state.selectedScanStatus);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$h.root), children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$i.root), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Navbar, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ActivityBar, { animating: !!loading }),
     selectedStatus && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [