inspect-ai 0.3.92__py3-none-any.whl → 0.3.94__py3-none-any.whl

inspect_ai/_view/www/dist/assets/index.js

@@ -22653,6 +22653,8 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const kLogViewSamplesTabId = "samples";
     const kLogViewJsonTabId = "json";
     const kLogViewInfoTabId = "info";
+    const kLogViewModelsTabId = "models";
+    const kLogViewTaskTabId = "task";
     const kSampleMessagesTabId = `messages`;
     const kSampleTranscriptTabId = `transcript`;
     const kSampleScoringTabId = `scoring`;
@@ -23945,7 +23947,6 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         up: "bi bi-chevron-up"
       },
       close: "bi bi-x",
-      config: "bi bi-gear",
       confirm: "bi bi-check",
       copy: "bi bi-copy",
       error: "bi bi-exclamation-circle",
@@ -23983,8 +23984,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       search: "bi bi-search",
       solvers: {
         use_tools: "bi bi-tools"
-      },
-      usage: "bi bi-stopwatch"
+      }
     };
     const ErrorPanel = ({ title: title2, error: error2 }) => {
       const message2 = error2.message;
@@ -24167,7 +24167,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const circle$1 = "_circle_qymy9_1";
     const green$1 = "_green_qymy9_12";
     const red$1 = "_red_qymy9_18";
-    const styles$1l = {
+    const styles$1m = {
       circle: circle$1,
       green: green$1,
       red: red$1
@@ -24183,9 +24183,9 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             "span",
             {
               className: clsx(
-                styles$1l.circle,
+                styles$1m.circle,
                 "text-size-small",
-                score2 ? styles$1l.green : styles$1l.red
+                score2 ? styles$1m.green : styles$1m.red
               ),
               children: String(score2)
             }
@@ -24205,6 +24205,20 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         }
       };
     };
+    function compareWithNan(a, b) {
+      const aIsNaN = Number.isNaN(a);
+      const bIsNaN = Number.isNaN(b);
+      if (aIsNaN && bIsNaN) {
+        return 0;
+      }
+      if (aIsNaN) {
+        return 1;
+      }
+      if (bIsNaN) {
+        return -1;
+      }
+      return a - b;
+    }
     const numericScoreDescriptor = (values) => {
       const onlyNumeric = values.filter((val) => {
         return typeof val === "number";
@@ -24215,7 +24229,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         max: Math.max(...onlyNumeric),
         compare: (a, b) => {
           if (typeof a.value === "number" && typeof b.value === "number") {
-            return a.value - b.value;
+            return compareWithNan(a.value, b.value);
           } else {
             console.warn("Comparing non-numerics using a numeric score descriptor");
             return 0;
@@ -24239,7 +24253,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const container$k = "_container_1ramc_1";
     const key = "_key_1ramc_12";
     const value$3 = "_value_1ramc_16";
-    const styles$1k = {
+    const styles$1l = {
       container: container$k,
       key,
       value: value$3
@@ -24282,12 +24296,12 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             ) : String(value2);
             scores2.push(
               /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1k.key, "text-size-smaller"), children: key2 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1k.value, "text-size-base"), children: formattedValue })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1l.key, "text-size-smaller"), children: key2 }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1l.value, "text-size-base"), children: formattedValue })
               ] })
             );
           });
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1k.container), children: scores2 }, `score-value`);
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1l.container), children: scores2 }, `score-value`);
         }
       };
     };
@@ -24295,7 +24309,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const hidden$2 = "_hidden_tm52u_5";
     const pills = "_pills_tm52u_9";
     const pill = "_pill_tm52u_9";
-    const styles$1j = {
+    const styles$1k = {
       visible,
       hidden: hidden$2,
       pills,
@@ -24327,7 +24341,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: ((_a2 = child["props"]) == null ? void 0 : _a2.title) === activeItem ? styles$1j.visible : styles$1j.hidden,
+            className: ((_a2 = child["props"]) == null ? void 0 : _a2.title) === activeItem ? styles$1k.visible : styles$1k.hidden,
             children: child
           },
           `nav-pill-container-${idx}`
@@ -24337,7 +24351,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "ul",
           {
-            className: clsx("nav", "nav-pills", styles$1j.pills),
+            className: clsx("nav", "nav-pills", styles$1k.pills),
             role: "tablist",
             "aria-orientation": "horizontal",
             children: navPills
@@ -24373,7 +24387,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
               "nav-link",
               "text-style-label",
               active2 ? "active " : "",
-              styles$1j.pill
+              styles$1k.pill
             ),
             "data-target": title2,
             onClick: handleClick,
@@ -24414,7 +24428,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const bordered = "_bordered_1wpxz_24";
     const moreToggleContainer = "_moreToggleContainer_1wpxz_28";
     const moreToggleButton = "_moreToggleButton_1wpxz_39";
-    const styles$1i = {
+    const styles$1j = {
       expandableBordered,
       expandableCollapsed,
       moreToggle,
@@ -24454,9 +24468,9 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
               style: baseStyles,
               ref: contentRef,
               className: clsx(
-                styles$1i.expandablePanel,
-                collapsed ? styles$1i.expandableCollapsed : void 0,
-                border ? styles$1i.expandableBordered : void 0
+                styles$1j.expandablePanel,
+                collapsed ? styles$1j.expandableCollapsed : void 0,
+                border ? styles$1j.expandableBordered : void 0
               ),
               children: children2
             }
@@ -24486,15 +24500,15 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: clsx(styles$1i.moreToggle, border ? styles$1i.bordered : void 0),
+          className: clsx(styles$1j.moreToggle, border ? styles$1j.bordered : void 0),
           style: style2,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1i.moreToggleContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1j.moreToggleContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
-              className: clsx("btn", styles$1i.moreToggleButton, "text-size-smallest"),
+              className: clsx("btn", styles$1j.moreToggleButton, "text-size-smallest"),
               onClick: handleClick,
               children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$1i.icon) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$1j.icon) }),
                 text2
               ]
             }
@@ -24508,7 +24522,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const messageGrid = "_messageGrid_1nz1x_16";
     const messageContents = "_messageContents_1nz1x_24";
     const indented = "_indented_1nz1x_29";
-    const styles$1h = {
+    const styles$1i = {
       message: message$1,
       padded: padded$2,
       systemRole,
@@ -29715,19 +29729,19 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       this.sizeMultiplier = multiplier;
     }
     Style$4.prototype.sup = function() {
-      return styles$1g[sup[this.id]];
+      return styles$1h[sup[this.id]];
     };
     Style$4.prototype.sub = function() {
-      return styles$1g[sub[this.id]];
+      return styles$1h[sub[this.id]];
     };
     Style$4.prototype.fracNum = function() {
-      return styles$1g[fracNum[this.id]];
+      return styles$1h[fracNum[this.id]];
     };
     Style$4.prototype.fracDen = function() {
-      return styles$1g[fracDen[this.id]];
+      return styles$1h[fracDen[this.id]];
     };
     Style$4.prototype.cramp = function() {
-      return styles$1g[cramp[this.id]];
+      return styles$1h[cramp[this.id]];
     };
     Style$4.prototype.cls = function() {
       return sizeNames[this.size] + (this.cramped ? " cramped" : " uncramped");
@@ -29755,7 +29769,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       "reset-scriptstyle",
       "reset-scriptscriptstyle"
     ];
-    var styles$1g = [
+    var styles$1h = [
       new Style$4(D, 0, 1, false),
       new Style$4(Dc, 0, 1, true),
       new Style$4(T, 1, 1, false),
@@ -29771,10 +29785,10 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     var fracDen = [Tc, Tc, Sc, Sc, SSc, SSc, SSc, SSc];
     var cramp = [Dc, Dc, Tc, Tc, Sc, Sc, SSc, SSc];
     var Style_1 = {
-      DISPLAY: styles$1g[D],
-      TEXT: styles$1g[T],
-      SCRIPT: styles$1g[S],
-      SCRIPTSCRIPT: styles$1g[SS]
+      DISPLAY: styles$1h[D],
+      TEXT: styles$1h[T],
+      SCRIPT: styles$1h[S],
+      SCRIPTSCRIPT: styles$1h[SS]
     };
     var nativeIndexOf = Array.prototype.indexOf;
     var indexOf = function(list2, elem) {
@@ -36551,7 +36565,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     }
     const contentImage = "_contentImage_61gdd_1";
     const reasoning = "_reasoning_61gdd_6";
-    const styles$1f = {
+    const styles$1g = {
       contentImage,
       reasoning
     };
@@ -36559,7 +36573,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const output$1 = "_output_18gxl_6";
     const textOutput = "_textOutput_18gxl_10";
     const textCode = "_textCode_18gxl_18";
-    const styles$1e = {
+    const styles$1f = {
       toolImage,
       output: output$1,
       textOutput,
@@ -36581,7 +36595,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "img",
                   {
-                    className: clsx(styles$1e.toolImage),
+                    className: clsx(styles$1f.toolImage),
                     src: out.image
                   },
                   key2
@@ -36597,10 +36611,10 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTextOutput, { text: String(output2) }, "tool-output-single")
         );
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1e.output), children: outputs });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1f.output), children: outputs });
     };
     const ToolTextOutput = ({ text: text2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$1e.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$1e.textCode), children: text2.trim() }) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$1f.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$1f.textCode), children: text2.trim() }) });
     };
     const MessageContent = ({ contents: contents2 }) => {
       if (Array.isArray(contents2)) {
@@ -36663,7 +36677,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           if (!r2.reasoning && !r2.redacted) {
             return void 0;
           }
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1f.reasoning, "text-size-small"), children: [
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1g.reasoning, "text-size-small"), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -36688,7 +36702,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         render: (key2, content2) => {
           const c2 = content2;
           if (c2.image.startsWith("data:")) {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: c2.image, className: styles$1f.contentImage }, key2);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: c2.image, className: styles$1g.contentImage }, key2);
           } else {
             return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: c2.image }, key2);
           }
@@ -36786,14 +36800,14 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     };
     const output = "_output_1tv9l_1";
     const toolCallView = "_toolCallView_1tv9l_4";
-    const styles$1d = {
+    const styles$1e = {
       output,
       toolCallView
     };
     const outputPre = "_outputPre_s62go_1";
     const toolView = "_toolView_s62go_7";
     const outputCode = "_outputCode_s62go_15";
-    const styles$1c = {
+    const styles$1d = {
       outputPre,
       toolView,
       outputCode
@@ -36808,7 +36822,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           {
             markdown: toolCallView2.content,
             ref: prismParentRef,
-            className: clsx("tool-output", styles$1c.toolView)
+            className: clsx("tool-output", styles$1d.toolView)
           }
         );
       }
@@ -36816,7 +36830,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: prismParentRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "pre",
         {
-          className: clsx("tool-output", styles$1c.outputPre, styles$1c.bottomMargin),
+          className: clsx("tool-output", styles$1d.outputPre, styles$1d.bottomMargin),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "code",
             {
@@ -36824,7 +36838,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
                 "source-code",
                 "sourceCode",
                 highlightLanguage ? `language-${highlightLanguage}` : void 0,
-                styles$1c.outputCode
+                styles$1d.outputCode
               ),
               children: formattedContent
             }
@@ -36834,14 +36848,14 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     };
     const image = "_image_a8byr_1";
     const toolTitle = "_toolTitle_a8byr_6";
-    const styles$1b = {
+    const styles$1c = {
       image,
       toolTitle
     };
     const ToolTitle = ({ title: title2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("bi", "bi-tools", styles$1b.image) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-small", styles$1b.toolTitle), children: title2 })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("bi", "bi-tools", styles$1c.image) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-small", styles$1c.toolTitle), children: title2 })
       ] });
     };
     const ToolCallView = ({
@@ -36884,7 +36898,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         }
       });
       const contents2 = mode !== "compact" ? input2 : input2 || functionCall;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1d.toolCallView), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1e.toolCallView), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           mode !== "compact" && (!view || view.title) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTitle, { title: (view == null ? void 0 : view.title) || functionCall }) : "",
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -36903,7 +36917,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             collapse,
             border: true,
             lines: 15,
-            className: styles$1d.output,
+            className: styles$1e.output,
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { contents: normalizedContent })
           }
         ) : void 0
@@ -36929,7 +36943,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     };
     const content$2 = "_content_1b2jp_1";
     const codeCompact = "_codeCompact_1b2jp_5";
-    const styles$1a = {
+    const styles$1b = {
       content: content$2,
       codeCompact
     };
@@ -36955,7 +36969,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           }
           const resolvedToolOutput = resolveToolMessage(toolMessage);
           if (toolCallStyle === "compact") {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { className: clsx(styles$1a.codeCompact), children: [
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("code", { className: clsx(styles$1b.codeCompact), children: [
               "tool: ",
               functionCall
             ] }) }, `tool-call-${idx}`);
@@ -36976,7 +36990,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           }
         });
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-          message2.content && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1a.content, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { contents: message2.content }) }),
+          message2.content && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1b.content, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { contents: message2.content }) }),
           toolCalls
         ] });
       } else {
@@ -37127,12 +37141,12 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           className: clsx(
             message2.role,
             "text-size-base",
-            styles$1h.message,
-            padded2 ? styles$1h.padded : void 0,
-            message2.role === "system" ? styles$1h.systemRole : void 0
+            styles$1i.message,
+            padded2 ? styles$1i.padded : void 0,
+            message2.role === "system" ? styles$1i.systemRole : void 0
           ),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1h.messageGrid, "text-style-label"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1i.messageGrid, "text-style-label"), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: iconForMsg(message2) }),
               message2.role
             ] }),
@@ -37140,8 +37154,8 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
               "div",
               {
                 className: clsx(
-                  styles$1h.messageContents,
-                  indented2 ? styles$1h.indented : void 0
+                  styles$1i.messageContents,
+                  indented2 ? styles$1i.indented : void 0
                 ),
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ExpandablePanel,
@@ -37167,10 +37181,10 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         }
       );
     };
-    const grid$6 = "_grid_140x5_1";
+    const grid$7 = "_grid_140x5_1";
     const number$1 = "_number_140x5_7";
-    const styles$19 = {
-      grid: grid$6,
+    const styles$1a = {
+      grid: grid$7,
       number: number$1
     };
     const ChatMessageRow = ({
@@ -37182,14 +37196,14 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       padded: padded2
     }) => {
       if (number2) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$19.grid, children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1a.grid, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: clsx(
                 "text-size-smaller",
                 "text-style-secondary",
-                styles$19.number
+                styles$1a.number
               ),
               children: number2
             }
@@ -38665,12 +38679,12 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           }
       }
     };
-    const table$2 = "_table_9qith_1";
-    const cell$3 = "_cell_9qith_11";
-    const compact = "_compact_9qith_15";
-    const cellKey = "_cellKey_9qith_19";
-    const cellValue = "_cellValue_9qith_31";
-    const styles$18 = {
+    const table$2 = "_table_1t3ts_1";
+    const cell$3 = "_cell_1t3ts_11";
+    const compact = "_compact_1t3ts_15";
+    const cellKey = "_cellKey_1t3ts_19";
+    const cellValue = "_cellValue_1t3ts_31";
+    const styles$19 = {
       table: table$2,
       cell: cell$3,
       compact,
@@ -38698,15 +38712,15 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             "td",
             {
               className: clsx(
-                styles$18.cell,
-                styles$18.cellKey,
+                styles$19.cell,
+                styles$19.cellKey,
                 "text-size-small",
                 "text-style-label"
               ),
               children: entry2.name
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$18.cell, styles$18.cellValue, "text-size-small"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedContent, { id: id2, entry: entry2 }) })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$19.cell, styles$19.cellValue, "text-size-small"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedContent, { id: id2, entry: entry2 }) })
         ] }, id2);
       });
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -38716,8 +38730,8 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           className: clsx(
             "table",
             tblClz,
-            styles$18.table,
-            compact2 ? styles$18.compact : void 0,
+            styles$19.table,
+            compact2 ? styles$19.compact : void 0,
             className2
           ),
           style: style2,
@@ -38812,7 +38826,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const query = "_query_9u9bt_1";
     const summary$3 = "_summary_9u9bt_6";
     const preWrap = "_preWrap_9u9bt_10";
-    const styles$17 = {
+    const styles$18 = {
       query,
       summary: summary$3,
       preWrap
@@ -38842,7 +38856,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           if (typeof entry2.value === "object") {
             return JSON.stringify(entry2.value);
           }
-          return String(entry2.value);
+          return String(entry2.value).trim();
         } catch (e) {
           return "[Unable to display value]";
         }
@@ -38967,7 +38981,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         render: (_id, entry2) => {
           const results = [];
           results.push(
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$17.query, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$18.query, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.search }),
               " ",
               entry2.value.query
@@ -38979,7 +38993,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
                 /* @__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$17.summary), children: result2.summary })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller", styles$18.summary), children: result2.summary })
               );
             }
           );
@@ -38996,7 +39010,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         },
         render: (_id, entry2) => {
           return {
-            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$17.preWrap, children: entry2.value })
+            rendered: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$18.preWrap, children: entry2.value })
           };
         }
       },
@@ -39064,7 +39078,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     const green = "_green_1iagp_12";
     const red = "_red_1iagp_18";
     const orange = "_orange_1iagp_24";
-    const styles$16 = {
+    const styles$17 = {
       circle,
       green,
       red,
@@ -39105,22 +39119,22 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "span",
               {
-                className: clsx("text-size-small", styles$16.circle, styles$16.green),
+                className: clsx("text-size-small", styles$17.circle, styles$17.green),
                 children: "C"
               }
             );
           } else if (score2 === "I") {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-small", styles$16.circle, styles$16.red), children: "I" });
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-small", styles$17.circle, styles$17.red), children: "I" });
           } else if (score2 === "P") {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "span",
               {
-                className: clsx("text-size-small", styles$16.circle, styles$16.orange),
+                className: clsx("text-size-small", styles$17.circle, styles$17.orange),
                 children: "P"
               }
             );
           } else if (score2 === "N") {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-small", styles$16.circle, styles$16.red), children: "N" });
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-small", styles$17.circle, styles$17.red), children: "N" });
           } else {
             return String(score2);
           }
@@ -42094,7 +42108,7 @@ categories: ${categories.join(" ")}`;
     };
     const flex$1 = "_flex_1kye9_1";
     const label$7 = "_label_1kye9_5";
-    const styles$15 = {
+    const styles$16 = {
       flex: flex$1,
       label: label$7
     };
@@ -42128,7 +42142,7 @@ categories: ${categories.join(" ")}`;
         },
         [setSort]
       );
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$15.flex, children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$16.flex, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
@@ -42137,7 +42151,7 @@ categories: ${categories.join(" ")}`;
               "text-size-smaller",
               "text-style-label",
               "text-style-secondary",
-              styles$15.label
+              styles$16.label
             ),
             children: "Sort:"
           }
@@ -42732,22 +42746,22 @@ categories: ${categories.join(" ")}`;
     const wrapper$4 = "_wrapper_1tajk_1";
     const container$j = "_container_1tajk_12";
     const animate = "_animate_1tajk_21";
-    const styles$14 = {
+    const styles$15 = {
       wrapper: wrapper$4,
       container: container$j,
       animate
     };
     const ProgressBar = ({ animating }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$14.wrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$15.wrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: clsx(styles$14.container),
+          className: clsx(styles$15.container),
           role: "progressbar",
           "aria-label": "Basic example",
           "aria-valuenow": 25,
           "aria-valuemin": 0,
           "aria-valuemax": 100,
-          children: animating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$14.animate })
+          children: animating && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$15.animate })
         }
       ) });
     };
@@ -42885,7 +42899,7 @@ categories: ${categories.join(" ")}`;
     }
     const dirname$1 = "_dirname_1qban_1";
     const directoryLink = "_directoryLink_1qban_7";
-    const styles$13 = {
+    const styles$14 = {
       dirname: dirname$1,
       directoryLink
     };
@@ -42901,7 +42915,7 @@ categories: ${categories.join(" ")}`;
       }, [offCanvas, setOffCanvas]);
       if (log_dir) {
         const displayDir = prettyDir(log_dir);
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: "/logs", className: styles$13.directoryLink, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: "/logs", className: styles$14.directoryLink, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -42917,13 +42931,13 @@ categories: ${categories.join(" ")}`;
             "span",
             {
               title: displayDir,
-              className: clsx("text-size-base", styles$13.dirname),
+              className: clsx("text-size-base", styles$14.dirname),
               children: offCanvas ? displayDir : ""
             }
           )
         ] }) });
       } else {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: "/logs", className: styles$13.directoryLink, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-title"), children: offCanvas ? "Log History" : "" }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: "/logs", className: styles$14.directoryLink, onClick: handleClick, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-title"), children: offCanvas ? "Log History" : "" }) });
       }
     };
     const prettyDir = (path) => {
@@ -42949,7 +42963,7 @@ categories: ${categories.join(" ")}`;
     const active = "_active_1essr_63";
     const item$1 = "_item_1essr_67";
     const logLink = "_logLink_1essr_72";
-    const styles$12 = {
+    const styles$13 = {
       sidebar,
       sidebarClosed,
       sidebarOpen,
@@ -42965,7 +42979,7 @@ categories: ${categories.join(" ")}`;
     const error$1 = "_error_srruf_1";
     const running = "_running_srruf_6";
     const cancelled = "_cancelled_srruf_13";
-    const styles$11 = {
+    const styles$12 = {
       error: error$1,
       running,
       cancelled
@@ -42996,7 +43010,7 @@ categories: ${categories.join(" ")}`;
     const metric = "_metric_1frsg_8";
     const metricName$1 = "_metricName_1frsg_17";
     const metricReducer$1 = "_metricReducer_1frsg_21";
-    const styles$10 = {
+    const styles$11 = {
       container: container$i,
       metric,
       metricName: metricName$1,
@@ -43004,8 +43018,8 @@ categories: ${categories.join(" ")}`;
     };
     const SidebarScoreView = ({ scorer: scorer2 }) => {
       const showReducer = !!scorer2.reducer;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$10.container, children: Object.keys(scorer2.metrics).map((metric2) => {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$10.metric, children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$11.container, children: Object.keys(scorer2.metrics).map((metric2) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$11.metric, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
@@ -43013,12 +43027,12 @@ categories: ${categories.join(" ")}`;
                 "text-style-secondary",
                 "text-style-label",
                 "text-size-small",
-                styles$10.metricName
+                styles$11.metricName
               ),
               children: metricDisplayName(scorer2.metrics[metric2])
             }
           ),
-          showReducer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$10.metricReducer), children: scorer2.reducer || "default" }) : "",
+          showReducer ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$11.metricReducer), children: scorer2.reducer || "default" }) : "",
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-title-secondary", children: formatPrettyDecimal(scorer2.metrics[metric2].value) })
         ] }, metric2);
       }) });
@@ -43029,7 +43043,7 @@ categories: ${categories.join(" ")}`;
     const metricReducer = "_metricReducer_5kpg1_22";
     const metricValues = "_metricValues_5kpg1_27";
     const metricValue = "_metricValue_5kpg1_27";
-    const styles$$ = {
+    const styles$10 = {
       container: container$h,
       scoreWrapper,
       metricName,
@@ -43039,10 +43053,10 @@ categories: ${categories.join(" ")}`;
     };
     const SidebarScoresView = ({ scores: scores2 }) => {
       const showReducer = scores2.findIndex((score2) => !!score2.reducer) !== -1;
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$$.container, children: scores2.map((score2, idx) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$10.container, children: scores2.map((score2, idx) => {
         const name2 = score2.name;
         const reducer = score2.reducer;
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$$.scoreWrapper, children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$10.scoreWrapper, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
@@ -43050,7 +43064,7 @@ categories: ${categories.join(" ")}`;
                 "text-style-secondary",
                 "text-style-label",
                 "text-size-small",
-                styles$$.metricName
+                styles$10.metricName
               ),
               children: name2
             }
@@ -43062,16 +43076,16 @@ categories: ${categories.join(" ")}`;
                 "text-size-small",
                 "text-style-label",
                 "text-style-secondary",
-                styles$$.metricReducer
+                styles$10.metricReducer
               ),
               children: reducer || "default"
             }
           ) : "",
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$$.metricValues), children: Object.keys(score2.metrics).map((key2) => {
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$10.metricValues), children: Object.keys(score2.metrics).map((key2) => {
             const metric2 = score2.metrics[key2];
             return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(), children: metricDisplayName(metric2) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$$.metricValue, children: formatPrettyDecimal(metric2.value) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$10.metricValue, children: formatPrettyDecimal(metric2.value) })
             ] }, key2);
           }) })
         ] }, `scorer-${name2}-${idx}`);
@@ -43106,7 +43120,7 @@ categories: ${categories.join(" ")}`;
             "text-style-secondary",
             "text-style-label",
             "text-size-small",
-            styles$11.cancelled
+            styles$12.cancelled
           ),
           children: message2
         }
@@ -43120,21 +43134,21 @@ categories: ${categories.join(" ")}`;
             "text-style-secondary",
             "text-style-label",
             "text-size-small",
-            styles$11.running
+            styles$12.running
           ),
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: message2 })
         }
       );
     };
     const StatusError = ({ message: message2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$11.error, "text-size-small"), children: message2 });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$12.error, "text-size-small"), children: message2 });
     };
     const entry = "_entry_12m5n_1";
     const title$3 = "_title_12m5n_7";
     const task = "_task_12m5n_12";
     const params = "_params_12m5n_18";
     const scores$1 = "_scores_12m5n_22";
-    const styles$_ = {
+    const styles$$ = {
       entry,
       title: title$3,
       task,
@@ -43166,15 +43180,15 @@ categories: ${categories.join(" ")}`;
         minute: "2-digit"
       })}` : "";
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$_.entry, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$_.title, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$_.task, "text-size-title-secondary"), children: ((_i = logHeader == null ? void 0 : logHeader.eval) == null ? void 0 : _i.task) || task2 }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$$.entry, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$$.title, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$$.task, "text-size-title-secondary"), children: ((_i = logHeader == null ? void 0 : logHeader.eval) == null ? void 0 : _i.task) || task2 }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: clsx("mb-1", "text-size-small"), children: timeStr }),
             model2 && model2 !== kModelNone ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: clsx("mb-1", "text-size-small"), children: model2 }) }) : ""
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(EvalStatus, { logHeader })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$_.params, "three-line-clamp"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "mb-1", children: hyperparameters ? Object.keys(hyperparameters).map((key2) => {
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$$.params, "three-line-clamp"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("small", { className: "mb-1", children: hyperparameters ? Object.keys(hyperparameters).map((key2) => {
           const val = hyperparameters[key2];
           if (Array.isArray(val) || typeof val === "object") {
             return `${key2}: ${JSON.stringify(val)}`;
@@ -43185,13 +43199,13 @@ categories: ${categories.join(" ")}`;
         (((_j = logHeader == null ? void 0 : logHeader.eval) == null ? void 0 : _j.dataset) || ((_k = logHeader == null ? void 0 : logHeader.results) == null ? void 0 : _k.scores)) && (logHeader == null ? void 0 : logHeader.status) === "success" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: clsx("text-truncate", "text-size-small", styles$_.scores),
+            className: clsx("text-truncate", "text-size-small", styles$$.scores),
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
                 "dataset: ",
                 datasetName || "(samples)"
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-truncate", styles$_.scoreInfo), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-truncate", styles$$.scoreInfo), children: [
                 scorerLabel,
                 ": ",
                 scorerNames || "(none)"
@@ -43226,34 +43240,34 @@ categories: ${categories.join(" ")}`;
         }
       }, [selectedIndex]);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        offCanvas && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$12.backdrop, onClick: handleToggle }),
+        offCanvas && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$13.backdrop, onClick: handleToggle }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
             className: clsx(
-              styles$12.sidebar,
-              offCanvas ? styles$12.sidebarOpen : styles$12.sidebarClosed
+              styles$13.sidebar,
+              offCanvas ? styles$13.sidebarOpen : styles$13.sidebarClosed
             ),
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$12.header, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$13.header, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(LogDirectoryTitleView, { log_dir: logs.log_dir }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "button",
                   {
                     onClick: handleToggle,
-                    className: clsx("btn", styles$12.toggle),
+                    className: clsx("btn", styles$13.toggle),
                     type: "button",
                     "aria-label": "Close sidebar",
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.close })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$12.progress, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { animating: loading }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$13.progress, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { animating: loading }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "ul",
                 {
                   ref: sidebarContentsRef,
-                  className: clsx("list-group", styles$12.list),
+                  className: clsx("list-group", styles$13.list),
                   children: logs.files.map((file, index2) => {
                     const logHeader = logHeaders[file.name];
                     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -43265,15 +43279,15 @@ categories: ${categories.join(" ")}`;
                         className: clsx(
                           "list-group-item",
                           "list-group-item-action",
-                          styles$12.item,
-                          selectedIndex === index2 ? styles$12.active : void 0
+                          styles$13.item,
+                          selectedIndex === index2 ? styles$13.active : void 0
                         ),
                         "data-index": index2,
                         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                           Link,
                           {
                             to: logUrl(file.name, logs.log_dir),
-                            className: styles$12.logLink,
+                            className: styles$13.logLink,
                             onClick: () => {
                               onSelectedIndexChanged(index2);
                             },
@@ -43428,11 +43442,11 @@ categories: ${categories.join(" ")}`;
       });
     };
     const navbarWrapper = "_navbarWrapper_838qu_48";
-    const styles$Z = {
+    const styles$_ = {
       navbarWrapper
     };
     const copyButton = "_copyButton_1goi8_1";
-    const styles$Y = {
+    const styles$Z = {
       copyButton
     };
     const CopyButton = ({
@@ -43461,7 +43475,7 @@ categories: ${categories.join(" ")}`;
         "button",
         {
           type: "button",
-          className: clsx(styles$Y.copyButton, className2),
+          className: clsx(styles$Z.copyButton, className2),
           onClick: handleClick,
           "aria-label": ariaLabel,
           disabled: isCopied,
@@ -43508,7 +43522,7 @@ categories: ${categories.join(" ")}`;
     const taskModel = "_taskModel_291sb_36";
     const taskStatus = "_taskStatus_291sb_40";
     const secondaryContainer = "_secondaryContainer_291sb_47";
-    const styles$X = {
+    const styles$Y = {
       container: container$g,
       wrapper: wrapper$3,
       toggle,
@@ -43521,7 +43535,7 @@ categories: ${categories.join(" ")}`;
     };
     const button = "_button_12472_1";
     const label$6 = "_label_12472_14";
-    const styles$W = {
+    const styles$X = {
       button,
       label: label$6
     };
@@ -43537,10 +43551,10 @@ categories: ${categories.join(" ")}`;
         {
           id,
           onClick,
-          className: clsx(className2, styles$W.button, "text-size-smaller"),
+          className: clsx(className2, styles$X.button, "text-size-smaller"),
           children: [
             icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2) }) : void 0,
-            text2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$W.label), children: text2 }) : void 0
+            text2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$X.label), children: text2 }) : void 0
           ]
         }
       );
@@ -43550,7 +43564,7 @@ categories: ${categories.join(" ")}`;
     const modalTitle = "_modalTitle_1tvha_18";
     const btnClose = "_btnClose_1tvha_22";
     const backdrop = "_backdrop_1tvha_28";
-    const styles$V = {
+    const styles$W = {
       modal: modal$1,
       header: header$2,
       modalTitle,
@@ -43566,7 +43580,7 @@ categories: ${categories.join(" ")}`;
       className: className2
     }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        showing && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$V.backdrop, onClick: () => setShowing(false) }),
+        showing && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$W.backdrop, onClick: () => setShowing(false) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -43574,15 +43588,15 @@ categories: ${categories.join(" ")}`;
             className: clsx("modal", "fade", showing ? "show" : "", className2),
             tabIndex: -1,
             style: { display: showing ? "block" : "none" },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("modal-dialog", styles$V.modal), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "modal-content", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-header", styles$V.header), children: [
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("modal-dialog", styles$W.modal), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "modal-content", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-header", styles$W.header), children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "div",
                   {
                     className: clsx(
                       "modal-title",
                       "text-size-base",
-                      styles$V.modalTitle
+                      styles$W.modalTitle
                     ),
                     children: title2
                   }
@@ -43594,7 +43608,7 @@ categories: ${categories.join(" ")}`;
                     className: clsx(
                       "btn-close",
                       "text-size-smaller",
-                      styles$V.btnClose
+                      styles$W.btnClose
                     ),
                     "data-bs-dismiss": "modal",
                     "aria-label": "Close",
@@ -43629,7 +43643,7 @@ categories: ${categories.join(" ")}`;
     const moreButton = "_moreButton_yha6g_91";
     const metricsSummary = "_metricsSummary_yha6g_97";
     const modalScores = "_modalScores_yha6g_103";
-    const styles$U = {
+    const styles$V = {
       simpleMetricsRows,
       verticalMetricReducer,
       verticalMetricName,
@@ -43644,7 +43658,7 @@ categories: ${categories.join(" ")}`;
     const label$5 = "_label_1hgt6_11";
     const groupSeparator = "_groupSeparator_1hgt6_28";
     const tableBody = "_tableBody_1hgt6_33";
-    const styles$T = {
+    const styles$U = {
       table: table$1,
       scorer,
       value: value$2,
@@ -43676,7 +43690,7 @@ categories: ${categories.join(" ")}`;
                     "text-style-label",
                     "text-style-secondary",
                     "text-size-small",
-                    styles$T.label
+                    styles$U.label
                   ),
                   children: metrics2[i2].name
                 }
@@ -43686,7 +43700,7 @@ categories: ${categories.join(" ")}`;
             cells.push(/* @__PURE__ */ jsxRuntimeExports.jsx("td", {}));
           }
         }
-        const headerRow = /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: clsx(styles$T.headerRow), children: [
+        const headerRow = /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { className: clsx(styles$U.headerRow), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
           cells
         ] });
@@ -43696,15 +43710,15 @@ categories: ${categories.join(" ")}`;
           for (let i2 = 0; i2 < columnCount; i2++) {
             if (metrics2.length > i2) {
               cells2.push(
-                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$T.value, "text-size-small"), children: formatPrettyDecimal(g.metrics[i2].value) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$U.value, "text-size-small"), children: formatPrettyDecimal(g.metrics[i2].value) })
               );
             } else {
-              cells2.push(/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$T.value) }));
+              cells2.push(/* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: clsx(styles$U.value) }));
             }
           }
           rows.push(
             /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("th", { className: clsx(styles$T.scorer, "text-size-small"), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("th", { className: clsx(styles$U.scorer, "text-size-small"), children: [
                 g.scorer,
                 " ",
                 showReducer && g.reducer ? `(${g.reducer})` : void 0
@@ -43719,11 +43733,11 @@ categories: ${categories.join(" ")}`;
               "td",
               {
                 colSpan: columnCount + 1,
-                className: clsx(styles$T.groupSeparator)
+                className: clsx(styles$U.groupSeparator)
               }
             ) }) : void 0,
             headerRow,
-            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: clsx("table-group-divider", styles$T.tableBody), children: rows })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { className: clsx("table-group-divider", styles$U.tableBody), children: rows })
           ] })
         );
         index2++;
@@ -43735,7 +43749,7 @@ categories: ${categories.join(" ")}`;
             className2,
             "table",
             striped ? "table-striped" : void 0,
-            styles$T.table,
+            styles$U.table,
             "table-bordered"
           ),
           children: subTables
@@ -43807,7 +43821,7 @@ categories: ${categories.join(" ")}`;
       if (scorers.length === 1) {
         const showReducer = !!scorers[0].reducer;
         const metrics2 = scorers[0].metrics;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$U.simpleMetricsRows, children: metrics2.map((metric2, i2) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$V.simpleMetricsRows, children: metrics2.map((metric2, i2) => {
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             VerticalMetric,
             {
@@ -43831,7 +43845,7 @@ categories: ${categories.join(" ")}`;
             primaryResults = shorterResults;
           }
         }
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$U.metricsSummary), children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$V.metricsSummary), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(ScoreGrid, { scoreGroups: [primaryResults], showReducer }),
           grouped.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -43846,7 +43860,7 @@ categories: ${categories.join(" ")}`;
                   {
                     scoreGroups: grouped,
                     showReducer,
-                    className: styles$U.modalScores,
+                    className: styles$V.modalScores,
                     striped: false
                   }
                 )
@@ -43855,7 +43869,7 @@ categories: ${categories.join(" ")}`;
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               LinkButton,
               {
-                className: styles$U.moreButton,
+                className: styles$V.moreButton,
                 text: "All scoring...",
                 onClick: () => {
                   setShowing(true);
@@ -43895,7 +43909,7 @@ categories: ${categories.join(" ")}`;
               "vertical-metric-label",
               "text-style-label",
               "text-style-secondary",
-              styles$U.verticalMetricName
+              styles$V.verticalMetricName
             ),
             children: metricDisplayName(metric2)
           }
@@ -43906,7 +43920,7 @@ categories: ${categories.join(" ")}`;
             className: clsx(
               "text-style-label",
               "text-style-secondary",
-              styles$U.verticalMetricReducer
+              styles$V.verticalMetricReducer
             ),
             children: reducer || "default"
           }
@@ -43917,7 +43931,7 @@ categories: ${categories.join(" ")}`;
             className: clsx(
               "vertical-metric-value",
               "text-size-largest",
-              styles$U.verticalMetricValue
+              styles$V.verticalMetricValue
             ),
             children: metric2.value !== void 0 && metric2.value !== null ? formatPrettyDecimal(metric2.value) : "n/a"
           }
@@ -43928,20 +43942,20 @@ categories: ${categories.join(" ")}`;
     const status = "_status_1sckj_1";
     const statusText = "_statusText_1sckj_11";
     const icon$1 = "_icon_1sckj_24";
-    const styles$S = {
+    const styles$T = {
       statusContainer,
       status,
       statusText,
       icon: icon$1
     };
     const RunningStatusPanel = ({ sampleCount }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$S.statusContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$S.status), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.running, styles$S.icon) }),
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$T.statusContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$T.status), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.running, styles$T.icon) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
             className: clsx(
-              styles$S.statusText,
+              styles$T.statusText,
               "text-style-label",
               "text-size-smaller"
             ),
@@ -43956,7 +43970,7 @@ categories: ${categories.join(" ")}`;
     };
     const statusPanel = "_statusPanel_66f9o_1";
     const statusIcon = "_statusIcon_66f9o_11";
-    const styles$R = {
+    const styles$S = {
       statusPanel,
       statusIcon
     };
@@ -43985,8 +43999,8 @@ categories: ${categories.join(" ")}`;
       status: status2,
       sampleCount
     }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$R.statusPanel, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$R.statusIcon), style: {} }),
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$S.statusPanel, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$S.statusIcon), style: {} }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: status2 }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
@@ -44000,10 +44014,10 @@ categories: ${categories.join(" ")}`;
       ] });
     };
     const container$f = "_container_q17yq_1";
-    const grid$5 = "_grid_q17yq_10";
-    const styles$Q = {
+    const grid$6 = "_grid_q17yq_10";
+    const styles$R = {
       container: container$f,
-      grid: grid$5
+      grid: grid$6
     };
     const ModelRolesView = ({ roles }) => {
       roles = roles || {};
@@ -44016,7 +44030,7 @@ categories: ${categories.join(" ")}`;
           "div",
           {
             className: clsx(
-              singleLine ? styles$Q.grid : void 0,
+              singleLine ? styles$R.grid : void 0,
               "text-style-secondary",
               "text-size-smallest"
             ),
@@ -44031,7 +44045,7 @@ categories: ${categories.join(" ")}`;
           key2
         );
       });
-      return modelEls.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$Q.container, children: modelEls }) : void 0;
+      return modelEls.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$R.container, children: modelEls }) : void 0;
     };
     const PrimaryBar = ({
       showToggle,
@@ -44052,7 +44066,7 @@ categories: ${categories.join(" ")}`;
         setOffCanvas(!offCanvas);
       }, [offCanvas, setOffCanvas]);
       const hasRunningMetrics = runningMetrics && runningMetrics.length > 0;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$X.wrapper), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$Y.wrapper), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
@@ -44060,7 +44074,7 @@ categories: ${categories.join(" ")}`;
               "navbar-brand",
               "navbar-text",
               "mb-0",
-              styles$X.container
+              styles$Y.container
             ),
             children: [
               showToggle ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -44071,19 +44085,19 @@ categories: ${categories.join(" ")}`;
                   className: clsx(
                     "btn",
                     offCanvas ? "d-md-none" : void 0,
-                    styles$X.toggle
+                    styles$Y.toggle
                   ),
                   type: "button",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.menu })
                 }
               ) : "",
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$X.body, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$X.bodyContainer, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$Y.body, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$Y.bodyContainer, children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "div",
                     {
                       id: "task-title",
-                      className: clsx("task-title", "text-truncate", styles$X.taskTitle),
+                      className: clsx("task-title", "text-truncate", styles$Y.taskTitle),
                       title: evalSpec == null ? void 0 : evalSpec.task,
                       children: evalSpec == null ? void 0 : evalSpec.task
                     }
@@ -44095,7 +44109,7 @@ categories: ${categories.join(" ")}`;
                       className: clsx(
                         "task-model",
                         "text-truncate",
-                        styles$X.taskModel,
+                        styles$Y.taskModel,
                         "text-size-base"
                       ),
                       title: evalSpec == null ? void 0 : evalSpec.model,
@@ -44104,7 +44118,7 @@ categories: ${categories.join(" ")}`;
                   ) : ""
                 ] }),
                 (evalSpec == null ? void 0 : evalSpec.model_roles) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelRolesView, { roles: evalSpec.model_roles }) : void 0,
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$X.secondaryContainer), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$Y.secondaryContainer), children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("navbar-secondary-text", "text-truncate"), children: logFileName }),
                   selectedLogFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value: selectedLogFile }) : ""
                 ] })
@@ -44112,7 +44126,7 @@ categories: ${categories.join(" ")}`;
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$X.taskStatus, "navbar-text"), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$Y.taskStatus, "navbar-text"), children: [
           status2 === "success" || status2 === "started" && streamSamples && hasRunningMetrics ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ResultsPanel,
             {
@@ -44164,7 +44178,7 @@ categories: ${categories.join(" ")}`;
     const justifyRight = "_justifyRight_xzzhl_13";
     const valueGrid = "_valueGrid_xzzhl_17";
     const container$e = "_container_xzzhl_25";
-    const styles$P = {
+    const styles$Q = {
       staticCol,
       justifyLeft,
       justifyCenter,
@@ -44197,7 +44211,7 @@ categories: ${categories.join(" ")}`;
           LabeledValue,
           {
             label: "Dataset",
-            className: clsx(styles$P.staticCol, "text-size-small"),
+            className: clsx(styles$Q.staticCol, "text-size-small"),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               DatasetSummary,
               {
@@ -44218,8 +44232,8 @@ categories: ${categories.join(" ")}`;
           {
             label: label2,
             className: clsx(
-              styles$P.staticCol,
-              hasConfig ? styles$P.justifyLeft : styles$P.justifyCenter,
+              styles$Q.staticCol,
+              hasConfig ? styles$Q.justifyLeft : styles$Q.justifyCenter,
               "text-size-small"
             ),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScorerSummary, { evalDescriptor })
@@ -44234,7 +44248,7 @@ categories: ${categories.join(" ")}`;
             LabeledValue,
             {
               label: "Config",
-              className: clsx(styles$P.justifyRight, "text-size-small"),
+              className: clsx(styles$Q.justifyRight, "text-size-small"),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(ParamSummary, { params: hyperparameters })
             },
             "sb-params"
@@ -44252,7 +44266,7 @@ categories: ${categories.join(" ")}`;
             LabeledValue,
             {
               label: "Duration",
-              className: clsx(styles$P.justifyRight, "text-size-small"),
+              className: clsx(styles$Q.justifyRight, "text-size-small"),
               children: totalDuration
             },
             "sb-duration"
@@ -44263,13 +44277,13 @@ categories: ${categories.join(" ")}`;
         ExpandablePanel,
         {
           id: "secondary-nav-bar",
-          className: clsx(styles$P.container, "text-size-small"),
+          className: clsx(styles$Q.container, "text-size-small"),
           collapse: true,
           lines: 5,
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: styles$P.valueGrid,
+              className: styles$Q.valueGrid,
               style: {
                 gridTemplateColumns: `${values.map((val) => {
                   return val.size;
@@ -44331,7 +44345,7 @@ categories: ${categories.join(" ")}`;
       runningMetrics
     }) => {
       const totalSampleCount = useTotalSampleCount();
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: clsx("navbar", "sticky-top", styles$Z.navbarWrapper), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: clsx("navbar", "sticky-top", styles$_.navbarWrapper), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           PrimaryBar,
           {
@@ -44483,313 +44497,13 @@ categories: ${categories.join(" ")}`;
     const tabSet = "_tabSet_1r3mu_14";
     const tabs = "_tabs_1r3mu_21";
     const tabPanels = "_tabPanels_1r3mu_29";
-    const styles$O = {
+    const styles$P = {
       workspace,
       tabContainer,
       tabSet,
       tabs,
       tabPanels
     };
-    const kBaseFontSize = 0.9;
-    const ScaleBaseFont = (scale) => {
-      return `${kBaseFontSize + scale}rem`;
-    };
-    const FontSize = {
-      smaller: ScaleBaseFont(-0.1)
-    };
-    const TextStyle = {
-      secondary: {
-        color: "var(--bs-secondary)"
-      }
-    };
-    const CardHeader = ({
-      id,
-      icon: icon2,
-      label: label2,
-      className: className2,
-      children: children2
-    }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          className: clsx("card-header-container", "text-style-label", className2),
-          id: id || "",
-          children: [
-            icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("card-header-icon", icon2) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "card-header-icon" }),
-            label2 ? label2 : "",
-            " ",
-            children2
-          ]
-        }
-      );
-    };
-    const CardBody = ({ id, children: children2, className: className2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card-body", className2), id: id || "", children: children2 });
-    };
-    const Card = ({ id, children: children2, className: className2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", className2), id, children: children2 });
-    };
-    const wrapper$2 = "_wrapper_sq96g_1";
-    const col2$2 = "_col2_sq96g_8";
-    const col1_3$1 = "_col1_3_sq96g_12";
-    const col3$1 = "_col3_sq96g_16";
-    const separator$4 = "_separator_sq96g_20";
-    const padded$1 = "_padded_sq96g_26";
-    const styles$N = {
-      wrapper: wrapper$2,
-      col2: col2$2,
-      col1_3: col1_3$1,
-      col3: col3$1,
-      separator: separator$4,
-      padded: padded$1
-    };
-    const ModelUsagePanel = ({ usage }) => {
-      if (!usage) {
-        return null;
-      }
-      const rows = [];
-      if (usage.reasoning_tokens) {
-        rows.push({
-          label: "Reasoning",
-          value: usage.reasoning_tokens,
-          secondary: false,
-          bordered: true
-        });
-        rows.push({
-          label: "---",
-          value: void 0,
-          secondary: false,
-          padded: true
-        });
-      }
-      rows.push({
-        label: "input",
-        value: usage.input_tokens,
-        secondary: false
-      });
-      if (usage.input_tokens_cache_read) {
-        rows.push({
-          label: "cache_read",
-          value: usage.input_tokens_cache_read,
-          secondary: true
-        });
-      }
-      if (usage.input_tokens_cache_write) {
-        rows.push({
-          label: "cache_write",
-          value: usage.input_tokens_cache_write,
-          secondary: true
-        });
-      }
-      rows.push({
-        label: "Output",
-        value: usage.output_tokens,
-        secondary: false,
-        bordered: true
-      });
-      rows.push({
-        label: "---",
-        value: void 0,
-        secondary: false
-      });
-      rows.push({
-        label: "Total",
-        value: usage.total_tokens,
-        secondary: false
-      });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$N.wrapper), children: rows.map((row2, idx) => {
-        if (row2.label === "---") {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: clsx(
-                styles$N.separator,
-                row2.padded ? styles$N.padded : void 0
-              )
-            },
-            `$usage-sep-${idx}`
-          );
-        } else {
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: clsx(
-                  "text-style-label",
-                  "text-style-secondary",
-                  row2.secondary ? styles$N.col2 : styles$N.col1_3
-                ),
-                children: row2.label
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$N.col3, children: row2.value ? formatNumber(row2.value) : "" })
-          ] }, `$usage-row-${idx}`);
-        }
-      }) });
-    };
-    const table = "_table_dbhwb_1";
-    const tableTokens = "_tableTokens_dbhwb_6";
-    const tableH = "_tableH_dbhwb_10";
-    const model = "_model_dbhwb_15";
-    const styles$M = {
-      table,
-      tableTokens,
-      tableH,
-      model
-    };
-    const TokenTable$1 = ({ className: className2, children: children2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "table",
-        {
-          className: clsx(
-            "table",
-            "table-sm",
-            "text-size-smaller",
-            styles$M.table,
-            className2
-          ),
-          children: children2
-        }
-      );
-    };
-    const TokenHeader = () => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("thead", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "td",
-            {
-              colSpan: 3,
-              className: clsx(
-                "card-subheading",
-                styles$M.tableTokens,
-                "text-size-small",
-                "text-style-label",
-                "text-style-secondary"
-              ),
-              align: "center",
-              children: "Tokens"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "th",
-            {
-              className: clsx(
-                styles$M.tableH,
-                "text-sixe-small",
-                "text-style-label",
-                "text-style-secondary"
-              ),
-              children: "Model"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "th",
-            {
-              className: clsx(
-                styles$M.tableH,
-                "text-sixe-small",
-                "text-style-label",
-                "text-style-secondary"
-              ),
-              children: "Usage"
-            }
-          )
-        ] })
-      ] });
-    };
-    const TokenRow = ({ model: model2, usage }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$M.model, children: model2 }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage }) })
-      ] });
-    };
-    const ModelTokenTable = ({
-      model_usage,
-      className: className2
-    }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(TokenTable$1, { className: className2, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TokenHeader, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Object.keys(model_usage).map((key2) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(TokenRow, { model: key2, usage: model_usage[key2] }, key2);
-        }) })
-      ] });
-    };
-    const wrapper$1 = "_wrapper_11ije_1";
-    const col1 = "_col1_11ije_8";
-    const col2$1 = "_col2_11ije_13";
-    const styles$L = {
-      wrapper: wrapper$1,
-      col1,
-      col2: col2$1
-    };
-    const kUsageCardBodyId = "usage-card-body";
-    const UsageCard = ({ stats }) => {
-      if (!stats) {
-        return null;
-      }
-      const totalDuration = formatDuration(
-        new Date(stats.started_at),
-        new Date(stats.completed_at)
-      );
-      const usageMetadataStyle = {
-        fontSize: FontSize.smaller
-      };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { icon: ApplicationIcons.usage, label: "Usage" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: kUsageCardBodyId, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$L.wrapper, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$L.col1, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                className: clsx(
-                  "text-size-smaller",
-                  "text-style-label",
-                  "text-style-secondary"
-                ),
-                children: "Duration"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              MetaDataView,
-              {
-                entries: {
-                  ["Start"]: new Date(stats.started_at).toLocaleString(),
-                  ["End"]: new Date(stats.completed_at).toLocaleString(),
-                  ["Duration"]: totalDuration
-                },
-                tableOptions: "borderless,sm",
-                style: usageMetadataStyle
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$L.col2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelTokenTable, { model_usage: stats.model_usage }) })
-        ] }) })
-      ] });
-    };
-    const styles$K = {
-      "task-error-display": "_task-error-display_1624b_1"
-    };
-    const TaskErrorCard = ({ error: error2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          CardHeader,
-          {
-            icon: ApplicationIcons.error,
-            label: "Task Failed: ${error.message}"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ANSIDisplay,
-          {
-            output: error2.traceback_ansi,
-            className: styles$K["task-error-display"]
-          }
-        ) })
-      ] });
-    };
     const MessageBand = ({
       id,
       message: message2,
@@ -44818,11 +44532,62 @@ categories: ${categories.join(" ")}`;
         )
       ] });
     };
-    const grid$4 = "_grid_ktnsp_1";
-    const cell$2 = "_cell_ktnsp_8";
-    const value$1 = "_value_ktnsp_13";
-    const styles$J = {
-      grid: grid$4,
+    const CardHeader = ({
+      id,
+      icon: icon2,
+      label: label2,
+      className: className2,
+      children: children2
+    }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: clsx("card-header-container", "text-style-label", className2),
+          id: id || "",
+          children: [
+            icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx("card-header-icon", icon2) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "card-header-icon" }),
+            label2 ? label2 : "",
+            " ",
+            children2
+          ]
+        }
+      );
+    };
+    const CardBody = ({ id, children: children2, className: className2 }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card-body", className2), id: id || "", children: children2 });
+    };
+    const Card = ({ id, children: children2, className: className2 }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", className2), id, children: children2 });
+    };
+    const item = "_item_1uzhd_1";
+    const styles$O = {
+      item
+    };
+    const DatasetDetailView = ({
+      dataset,
+      style: style2
+    }) => {
+      const filtered = Object.fromEntries(
+        Object.entries(dataset).filter(([key2]) => key2 !== "sample_ids")
+      );
+      if (!dataset || Object.keys(filtered).length === 0) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-base", styles$O.item), style: style2, children: "No dataset information available" });
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        MetaDataView,
+        {
+          className: clsx("text-size-base", styles$O.item),
+          entries: filtered,
+          tableOptions: "borderless,sm",
+          style: style2
+        }
+      );
+    };
+    const grid$5 = "_grid_ax2xo_1";
+    const cell$2 = "_cell_ax2xo_8";
+    const value$1 = "_value_ax2xo_13";
+    const styles$N = {
+      grid: grid$5,
       cell: cell$2,
       value: value$1
     };
@@ -44851,10 +44616,10 @@ categories: ${categories.join(" ")}`;
             {
               className: clsx(
                 `${baseId}-key`,
-                styles$J.cell,
+                styles$N.cell,
                 "text-style-label",
                 "text-style-secondary",
-                "text-size-small"
+                "text-size-smaller"
               ),
               children: entry2.name
             }
@@ -44862,13 +44627,13 @@ categories: ${categories.join(" ")}`;
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: clsx(styles$J.value, `${baseId}-value`, "text-size-small"),
+              className: clsx(styles$N.value, `${baseId}-value`, "text-size-smaller"),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedContent, { id: id2, entry: entry2 })
             }
           )
         ] }, `${baseId}-record-${index2}`);
       });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, className: clsx(className2, styles$J.grid), style: style2, children: entryEls });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, className: clsx(className2, styles$N.grid), style: style2, children: entryEls });
     };
     const entryRecords = (entries) => {
       if (!entries) {
@@ -44882,107 +44647,12 @@ categories: ${categories.join(" ")}`;
         return entries;
       }
     };
-    const container$d = "_container_304w9_1";
-    const modelInfo = "_modelInfo_304w9_8";
-    const role = "_role_304w9_14";
-    const styles$I = {
-      container: container$d,
-      modelInfo,
-      role
-    };
-    const ModelCard = ({ evalSpec }) => {
-      if (!evalSpec) {
-        return void 0;
-      }
-      const modelsInfo = {
-        eval: {
-          model: evalSpec.model,
-          base_url: evalSpec.model_base_url,
-          config: evalSpec.model_generate_config,
-          args: evalSpec.model_args
-        },
-        ...evalSpec.model_roles
-      };
-      const noneEl = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-style-secondary", children: "None" });
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { icon: ApplicationIcons.model, label: "Models" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-model-card-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$I.container, children: Object.keys(modelsInfo || {}).map((modelKey) => {
-          const modelInfo2 = modelsInfo[modelKey];
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "div",
-            {
-              className: clsx(styles$I.modelInfo, "text-size-small"),
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      styles$I.role,
-                      "text-style-label",
-                      "text-style-secondary"
-                    ),
-                    children: modelKey
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Model" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: modelInfo2.model }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Base Url" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: modelInfo2.base_url || noneEl }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Configuration" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: modelInfo2.config && Object.keys(modelInfo2.config).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  MetaDataGrid,
-                  {
-                    entries: modelInfo2.config
-                  }
-                ) : noneEl }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Args" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: Object.keys(modelInfo2.args).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  MetaDataGrid,
-                  {
-                    entries: modelInfo2.args
-                  }
-                ) : noneEl })
-              ]
-            },
-            modelKey
-          );
-        }) }) })
-      ] });
-    };
-    const ghCommitUrl = (origin, commit) => {
-      const baseUrl2 = origin.replace(/\.git$/, "");
-      return `${baseUrl2}/commit/${commit}`;
-    };
-    const item = "_item_1uzhd_1";
-    const styles$H = {
-      item
-    };
-    const DatasetDetailView = ({
-      dataset,
-      style: style2
-    }) => {
-      const filtered = Object.fromEntries(
-        Object.entries(dataset).filter(([key2]) => key2 !== "sample_ids")
-      );
-      if (!dataset || Object.keys(filtered).length === 0) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("text-size-base", styles$H.item), style: style2, children: "No dataset information available" });
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        MetaDataView,
-        {
-          className: clsx("text-size-base", styles$H.item),
-          entries: filtered,
-          tableOptions: "borderless,sm",
-          style: style2
-        }
-      );
-    };
     const icon = "_icon_59zaz_1";
-    const container$c = "_container_59zaz_5";
+    const container$d = "_container_59zaz_5";
     const metadata$2 = "_metadata_59zaz_11";
-    const styles$G = {
+    const styles$M = {
       icon,
-      container: container$c,
+      container: container$d,
       metadata: metadata$2
     };
     const DetailStep = ({
@@ -44991,16 +44661,16 @@ categories: ${categories.join(" ")}`;
       params: params2,
       className: className2
     }) => {
-      const iconHtml = icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$G.icon) }) : "";
+      const iconHtml = icon2 ? /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(icon2, styles$M.icon) }) : "";
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(className2), children: [
         iconHtml,
         " ",
         name2,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$G.container, children: params2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$M.container, children: params2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           MetaDataGrid,
           {
             entries: params2,
-            className: clsx("text-size-small", styles$G.metadata)
+            className: clsx("text-size-small", styles$M.metadata)
           }
         ) : "" })
       ] });
@@ -45019,49 +44689,43 @@ categories: ${categories.join(" ")}`;
           icon: ApplicationIcons.scorer,
           name: name2,
           params: params2,
-          className: clsx(styles$H.item, "text-size-base")
+          className: clsx(styles$O.item, "text-size-base")
         }
       );
     };
-    const container$b = "_container_12j2k_1";
-    const separator$3 = "_separator_12j2k_11";
-    const styles$F = {
-      container: container$b,
-      separator: separator$3
+    const container$c = "_container_12j2k_1";
+    const separator$4 = "_separator_12j2k_11";
+    const styles$L = {
+      container: container$c,
+      separator: separator$4
     };
     const SolversDetailView = ({ steps }) => {
-      const separator2 = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$F.items, "text-size-small", styles$F.separator), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) });
+      const separator2 = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$L.items, "text-size-small", styles$L.separator), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) });
       const details = steps == null ? void 0 : steps.map((step, index2) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             DetailStep,
             {
               name: step.solver,
-              className: clsx(styles$F.items, "text-size-small")
+              className: clsx(styles$L.items, "text-size-small")
             }
           ),
           index2 < steps.length - 1 ? separator2 : ""
         ] }, `solver-step-${index2}`);
       });
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$F.container, children: details });
-    };
-    const floatingCol = "_floatingCol_q6xma_1";
-    const wideCol = "_wideCol_q6xma_9";
-    const oneCol = "_oneCol_q6xma_16";
-    const twoCol = "_twoCol_q6xma_20";
-    const planCol = "_planCol_q6xma_24";
-    const container$a = "_container_q6xma_28";
-    const grid$3 = "_grid_q6xma_34";
-    const row$1 = "_row_q6xma_42";
-    const styles$E = {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$L.container, children: details });
+    };
+    const floatingCol = "_floatingCol_1y1hk_1";
+    const wideCol = "_wideCol_1y1hk_9";
+    const planCol = "_planCol_1y1hk_24";
+    const container$b = "_container_1y1hk_28";
+    const grid$4 = "_grid_1y1hk_34";
+    const styles$K = {
       floatingCol,
       wideCol,
-      oneCol,
-      twoCol,
       planCol,
-      container: container$a,
-      grid: grid$3,
-      row: row$1
+      container: container$b,
+      grid: grid$4
     };
     const PlanDetailView = ({
       evaluation,
@@ -45071,68 +44735,17 @@ categories: ${categories.join(" ")}`;
       if (!evaluation) {
         return null;
       }
-      const config2 = {};
-      Object.entries((evaluation == null ? void 0 : evaluation.config) || {}).forEach((entry2) => {
-        const key2 = entry2[0];
-        const value2 = entry2[1];
-        config2[key2] = value2;
-      });
       const steps = plan == null ? void 0 : plan.steps;
-      const metadata2 = evaluation == null ? void 0 : evaluation.metadata;
-      const revision = evaluation == null ? void 0 : evaluation.revision;
-      const packages = evaluation == null ? void 0 : evaluation.packages;
-      const model_args = evaluation == null ? void 0 : evaluation.model_args;
-      const task_args = evaluation == null ? void 0 : evaluation.task_args;
-      const generate_config = plan == null ? void 0 : plan.config;
-      const taskInformation = {
-        ["Task ID"]: evaluation == null ? void 0 : evaluation.task_id,
-        ["Run ID"]: evaluation == null ? void 0 : evaluation.run_id
-      };
-      if (revision) {
-        taskInformation[`${revision.type ? `${toTitleCase(revision.type)} ` : ""}Revision`] = {
-          _html: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: ghCommitUrl(revision.origin, revision.commit), children: revision.commit })
-        };
-      }
-      if (packages) {
-        const names = Object.keys(packages).map((key2) => {
-          return `${key2} ${packages[key2]}`;
-        });
-        if (names.length === 1) {
-          taskInformation["Inspect"] = names[0];
-        } else {
-          taskInformation["Inspect"] = names;
-        }
-      }
-      if (evaluation.tags) {
-        taskInformation["Tags"] = evaluation.tags.join(", ");
-      }
-      if ((evaluation == null ? void 0 : evaluation.model) && evaluation.model !== kModelNone) {
-        config2["model"] = evaluation.model;
-      }
-      if (evaluation == null ? void 0 : evaluation.model_base_url) {
-        config2["model_base_url"] = evaluation.model_base_url;
-      }
-      if (evaluation == null ? void 0 : evaluation.sandbox) {
-        if (Array.isArray(evaluation == null ? void 0 : evaluation.sandbox)) {
-          config2["sandbox"] = evaluation.sandbox[0];
-          if (evaluation.sandbox[1]) {
-            config2["sandbox_config"] = evaluation.sandbox[1];
-          }
-        } else {
-          config2["sandbox"] = evaluation == null ? void 0 : evaluation.sandbox.type;
-          config2["sandbox_config"] = evaluation == null ? void 0 : evaluation.sandbox.config;
-        }
-      }
       const taskColumns = [];
       taskColumns.push({
         title: "Dataset",
-        className: styles$E.floatingCol,
+        className: styles$K.floatingCol,
         contents: /* @__PURE__ */ jsxRuntimeExports.jsx(DatasetDetailView, { dataset: evaluation.dataset })
       });
       if (steps) {
         taskColumns.push({
           title: "Solvers",
-          className: styles$E.wideCol,
+          className: styles$K.wideCol,
           contents: /* @__PURE__ */ jsxRuntimeExports.jsx(SolversDetailView, { steps })
         });
       }
@@ -45166,152 +44779,31 @@ categories: ${categories.join(" ")}`;
           });
           taskColumns.push({
             title: label2,
-            className: styles$E.floatingCol,
+            className: styles$K.floatingCol,
             contents: scorerPanels
           });
         }
       }
-      const metadataColumns = [];
-      const cols = colCount(
-        metadataColumns,
-        task_args,
-        model_args,
-        config2,
-        metadata2
-      );
-      metadataColumns.push({
-        title: "Task Information",
-        className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-        contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MetaDataView,
-          {
-            className: "text-size-small",
-            entries: taskInformation,
-            tableOptions: "sm"
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$K.container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: styles$K.grid,
+          style: {
+            gridTemplateColumns: `repeat(${taskColumns.length}, fit-content(50%))`
           },
-          `plan-md-task`
-        )
-      });
-      if (task_args && Object.keys(task_args).length > 0) {
-        metadataColumns.push({
-          title: "Task Args",
-          className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-          contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MetaDataView,
-            {
-              className: "text-size-small",
-              entries: task_args,
-              tableOptions: "sm"
-            },
-            `plan-md-task-args`
-          )
-        });
-      }
-      if (model_args && Object.keys(model_args).length > 0) {
-        metadataColumns.push({
-          title: "Model Args",
-          className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-          contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MetaDataView,
-            {
-              className: "text-size-small",
-              entries: model_args,
-              tableOptions: "sm"
-            },
-            `plan-md-model-args`
-          )
-        });
-      }
-      if (config2 && Object.keys(config2).length > 0) {
-        metadataColumns.push({
-          title: "Configuration",
-          className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-          contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MetaDataView,
-            {
-              className: "text-size-small",
-              entries: config2,
-              tableOptions: "sm"
-            },
-            `plan-md-config`
-          )
-        });
-      }
-      if (generate_config && Object.keys(generate_config).length > 0) {
-        const generate_record = Object.fromEntries(
-          Object.entries(generate_config)
-        );
-        metadataColumns.push({
-          title: "Generate Config",
-          className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-          contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MetaDataView,
-            {
-              className: "text-size-small",
-              entries: generate_record,
-              tableOptions: "sm"
-            },
-            `plan-md-generate-config`
-          )
-        });
-      }
-      if (metadata2 && Object.keys(metadata2).length > 0) {
-        metadataColumns.push({
-          title: "Metadata",
-          className: cols === 1 ? styles$E.oneCol : styles$E.twoCol,
-          contents: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            MetaDataView,
-            {
-              className: "text-size-small",
-              entries: metadata2,
-              tableOptions: "sm"
-            },
-            `plan-md-metadata`
-          )
-        });
-      }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$E.container, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: styles$E.grid,
-            style: {
-              gridTemplateColumns: `repeat(${taskColumns.length}, auto)`
-            },
-            children: taskColumns.map((col) => {
-              return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                PlanColumn,
-                {
-                  title: col.title,
-                  className: col.className,
-                  children: col.contents
-                },
-                `plan-col-${col.title}`
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$E.row), children: metadataColumns.map((col) => {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx(
-            PlanColumn,
-            {
-              title: col.title,
-              className: col.className,
-              children: col.contents
-            },
-            `plan-col-${col.title}`
-          );
-        }) })
-      ] });
-    };
-    const colCount = (...other) => {
-      let count = 0;
-      for (const o in other) {
-        if (o && Object.keys(o).length > 0) {
-          count++;
+          children: taskColumns.map((col) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              PlanColumn,
+              {
+                title: col.title,
+                className: col.className,
+                children: col.contents
+              },
+              `plan-col-${col.title}`
+            );
+          })
         }
-      }
-      return count;
+      ) });
     };
     const PlanColumn = ({ title: title2, className: className2, children: children2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(className2), children: [
@@ -45323,7 +44815,7 @@ categories: ${categories.join(" ")}`;
               "text-size-small",
               "text-style-label",
               "text-style-secondary",
-              styles$E.planCol
+              styles$K.planCol
             ),
             children: title2
           }
@@ -45332,12 +44824,55 @@ categories: ${categories.join(" ")}`;
       ] });
     };
     const PlanCard = ({ evalSpec, evalPlan, scores: scores2 }) => {
+      const metadata2 = (evalSpec == null ? void 0 : evalSpec.metadata) || {};
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Summary" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-plan-card-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            PlanDetailView,
+            {
+              evaluation: evalSpec,
+              plan: evalPlan,
+              scores: scores2
+            }
+          ) })
+        ] }),
+        Object.keys(metadata2).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Metadata" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-metadata`", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            MetaDataView,
+            {
+              className: "text-size-small",
+              entries: metadata2,
+              tableOptions: "sm"
+            },
+            `plan-md-metadata`
+          ) })
+        ] })
+      ] });
+    };
+    const styles$J = {
+      "task-error-display": "_task-error-display_1624b_1"
+    };
+    const TaskErrorCard = ({ error: error2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { icon: ApplicationIcons.config, label: "Config" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-plan-card-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PlanDetailView, { evaluation: evalSpec, plan: evalPlan, scores: scores2 }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CardHeader,
+          {
+            icon: ApplicationIcons.error,
+            label: "Task Failed: ${error.message}"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ANSIDisplay,
+          {
+            output: error2.traceback_ansi,
+            className: styles$J["task-error-display"]
+          }
+        ) })
       ] });
     };
-    const useInfoTabConfig = (evalSpec, evalPlan, evalError, evalResults, evalStats) => {
+    const useInfoTabConfig = (evalSpec, evalPlan, evalError, evalResults) => {
       const totalSampleCount = useTotalSampleCount();
       return reactExports.useMemo(() => {
         return {
@@ -45350,17 +44885,15 @@ categories: ${categories.join(" ")}`;
             evalPlan,
             evalError,
             evalResults,
-            evalStats,
             sampleCount: totalSampleCount
           }
         };
-      }, [evalSpec, evalPlan, evalError, evalResults, evalStats, totalSampleCount]);
+      }, [evalSpec, evalPlan, evalError, evalResults, totalSampleCount]);
     };
     const InfoTab = ({
       evalSpec,
       evalPlan,
       evalResults,
-      evalStats,
       evalStatus,
       evalError,
       sampleCount
@@ -45384,8 +44917,6 @@ categories: ${categories.join(" ")}`;
               scores: evalResults == null ? void 0 : evalResults.scores
             }
           ),
-          evalSpec ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelCard, { evalSpec }) : void 0,
-          evalStatus !== "started" ? /* @__PURE__ */ jsxRuntimeExports.jsx(UsageCard, { stats: evalStats }) : void 0,
           evalStatus === "error" && evalError ? /* @__PURE__ */ jsxRuntimeExports.jsx(TaskErrorCard, { error: evalError }) : void 0
         ] })
       ] });
@@ -47363,7 +46894,7 @@ self.onmessage = function (e) {
     );
     ToolButton.displayName = "ToolButton";
     const jsonTab = "_jsonTab_6pq03_1";
-    const styles$D = {
+    const styles$I = {
       jsonTab
     };
     const kJsonMaxSize = 1e7;
@@ -47442,7 +46973,7 @@ self.onmessage = function (e) {
       const downloadFiles = useStore((state) => state.capabilities.downloadFiles);
       if (logFile && json.length > kJsonMaxSize && downloadFiles) {
         const file = `${filename(logFile)}.json`;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$D.jsonTab, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$I.jsonTab, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           DownloadPanel,
           {
             message: "The JSON for this log file is too large to render.",
@@ -47452,20 +46983,318 @@ self.onmessage = function (e) {
           }
         ) });
       } else {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$D.jsonTab, children: /* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { id: "task-json-contents", json, simple: true }) });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$I.jsonTab, children: /* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { id: "task-json-contents", json, simple: true }) });
+      }
+    };
+    const container$a = "_container_304w9_1";
+    const modelInfo = "_modelInfo_304w9_8";
+    const role = "_role_304w9_14";
+    const styles$H = {
+      container: container$a,
+      modelInfo,
+      role
+    };
+    const ModelCard = ({ evalSpec }) => {
+      if (!evalSpec) {
+        return void 0;
+      }
+      const modelsInfo = {
+        eval: {
+          model: evalSpec.model,
+          base_url: evalSpec.model_base_url,
+          config: evalSpec.model_generate_config,
+          args: evalSpec.model_args
+        },
+        ...evalSpec.model_roles
+      };
+      const noneEl = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-style-secondary", children: "None" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Models" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-model-card-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$H.container, children: Object.keys(modelsInfo || {}).map((modelKey) => {
+          const modelInfo2 = modelsInfo[modelKey];
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: clsx(styles$H.modelInfo, "text-size-small"),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      styles$H.role,
+                      "text-style-label",
+                      "text-style-secondary"
+                    ),
+                    children: modelKey
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Model" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: modelInfo2.model }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Base Url" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: modelInfo2.base_url || noneEl }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Configuration" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: modelInfo2.config && Object.keys(modelInfo2.config).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MetaDataGrid,
+                  {
+                    entries: modelInfo2.config
+                  }
+                ) : noneEl }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Args" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-size-small", children: Object.keys(modelInfo2.args).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MetaDataGrid,
+                  {
+                    entries: modelInfo2.args
+                  }
+                ) : noneEl })
+              ]
+            },
+            modelKey
+          );
+        }) }) })
+      ] });
+    };
+    const wrapper$2 = "_wrapper_sq96g_1";
+    const col2$2 = "_col2_sq96g_8";
+    const col1_3$1 = "_col1_3_sq96g_12";
+    const col3$1 = "_col3_sq96g_16";
+    const separator$3 = "_separator_sq96g_20";
+    const padded$1 = "_padded_sq96g_26";
+    const styles$G = {
+      wrapper: wrapper$2,
+      col2: col2$2,
+      col1_3: col1_3$1,
+      col3: col3$1,
+      separator: separator$3,
+      padded: padded$1
+    };
+    const ModelUsagePanel = ({ usage, className: className2 }) => {
+      if (!usage) {
+        return null;
+      }
+      const rows = [];
+      if (usage.reasoning_tokens) {
+        rows.push({
+          label: "Reasoning",
+          value: usage.reasoning_tokens,
+          secondary: false,
+          bordered: true
+        });
+        rows.push({
+          label: "---",
+          value: void 0,
+          secondary: false,
+          padded: true
+        });
       }
+      rows.push({
+        label: "input",
+        value: usage.input_tokens,
+        secondary: false
+      });
+      if (usage.input_tokens_cache_read) {
+        rows.push({
+          label: "cache_read",
+          value: usage.input_tokens_cache_read,
+          secondary: true
+        });
+      }
+      if (usage.input_tokens_cache_write) {
+        rows.push({
+          label: "cache_write",
+          value: usage.input_tokens_cache_write,
+          secondary: true
+        });
+      }
+      rows.push({
+        label: "Output",
+        value: usage.output_tokens,
+        secondary: false,
+        bordered: true
+      });
+      rows.push({
+        label: "---",
+        value: void 0,
+        secondary: false
+      });
+      rows.push({
+        label: "Total",
+        value: usage.total_tokens,
+        secondary: false
+      });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$G.wrapper, className2), children: rows.map((row2, idx) => {
+        if (row2.label === "---") {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: clsx(
+                styles$G.separator,
+                row2.padded ? styles$G.padded : void 0
+              )
+            },
+            `$usage-sep-${idx}`
+          );
+        } else {
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: clsx(
+                  "text-style-label",
+                  "text-style-secondary",
+                  row2.secondary ? styles$G.col2 : styles$G.col1_3
+                ),
+                children: row2.label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$G.col3, children: row2.value ? formatNumber(row2.value) : "" })
+          ] }, `$usage-row-${idx}`);
+        }
+      }) });
+    };
+    const table = "_table_z217i_1";
+    const tableTokens = "_tableTokens_z217i_5";
+    const tableH = "_tableH_z217i_9";
+    const model = "_model_z217i_14";
+    const cellContents = "_cellContents_z217i_18";
+    const styles$F = {
+      table,
+      tableTokens,
+      tableH,
+      model,
+      cellContents
+    };
+    const TokenTable$1 = ({ className: className2, children: children2 }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "table",
+        {
+          className: clsx(
+            "table",
+            "table-sm",
+            "text-size-smaller",
+            styles$F.table,
+            className2
+          ),
+          children: children2
+        }
+      );
+    };
+    const TokenHeader = () => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("thead", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("td", {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "td",
+            {
+              colSpan: 3,
+              className: clsx(
+                "card-subheading",
+                styles$F.tableTokens,
+                "text-size-small",
+                "text-style-label",
+                "text-style-secondary"
+              ),
+              align: "center",
+              children: "Tokens"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "th",
+            {
+              className: clsx(
+                styles$F.tableH,
+                "text-sixe-small",
+                "text-style-label",
+                "text-style-secondary"
+              ),
+              children: "Model"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "th",
+            {
+              className: clsx(
+                styles$F.tableH,
+                "text-sixe-small",
+                "text-style-label",
+                "text-style-secondary"
+              ),
+              children: "Usage"
+            }
+          )
+        ] })
+      ] });
+    };
+    const TokenRow = ({ model: model2, usage }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$F.model, styles$F.cellContents), children: model2 }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage, className: clsx(styles$F.cellContents) }) })
+      ] });
+    };
+    const ModelTokenTable = ({
+      model_usage,
+      className: className2
+    }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(TokenTable$1, { className: className2, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TokenHeader, {}),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: Object.keys(model_usage).map((key2) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(TokenRow, { model: key2, usage: model_usage[key2] }, key2);
+        }) })
+      ] });
+    };
+    const wrapper$1 = "_wrapper_14r3b_1";
+    const col2$1 = "_col2_14r3b_16";
+    const styles$E = {
+      wrapper: wrapper$1,
+      col2: col2$1
+    };
+    const kUsageCardBodyId = "usage-card-body";
+    const UsageCard = ({ stats }) => {
+      if (!stats) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Usage" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: kUsageCardBodyId, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$E.wrapper, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$E.col2, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelTokenTable, { model_usage: stats.model_usage }) }) }) })
+      ] });
+    };
+    const useModelsTab = (evalSpec, evalStats, evalStatus) => {
+      return reactExports.useMemo(() => {
+        return {
+          id: kLogViewModelsTabId,
+          label: "Models",
+          scrollable: true,
+          component: ModelTab,
+          componentProps: {
+            evalSpec,
+            evalStats,
+            evalStatus
+          }
+        };
+      }, [evalSpec, evalStats]);
+    };
+    const ModelTab = ({
+      evalSpec,
+      evalStats,
+      evalStatus
+    }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { padding: "0.5em 1em 0 1em", width: "100%" }, children: [
+        evalSpec ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelCard, { evalSpec }) : void 0,
+        evalStatus !== "started" && (evalStats == null ? void 0 : evalStats.model_usage) && Object.keys(evalStats.model_usage).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(UsageCard, { stats: evalStats })
+      ] }) });
     };
     function escapeSelector(id) {
       return id.replace(/([ #.;,?!+*~'":^$[\]()=>|/\\])/g, "\\$1");
     }
     const panel$2 = "_panel_twp3v_1";
     const container$9 = "_container_twp3v_7";
-    const styles$C = {
+    const styles$D = {
       panel: panel$2,
       container: container$9
     };
     const NoContentsPanel = ({ text: text2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$C.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$C.container, "text-size-smaller"), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$D.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$D.container, "text-size-smaller"), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.noSamples }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: text2 })
       ] }) });
@@ -50589,7 +50418,7 @@ self.onmessage = function (e) {
     const subtle = "_subtle_1rer0_36";
     const primary = "_primary_1rer0_40";
     const visuallyHidden = "_visuallyHidden_1rer0_59";
-    const styles$B = {
+    const styles$C = {
       container: container$8,
       dotsContainer,
       small,
@@ -50610,29 +50439,29 @@ self.onmessage = function (e) {
         "div",
         {
           className: clsx(
-            styles$B.container,
-            size === "small" ? styles$B.small : size === "medium" ? styles$B.medium : styles$B.large
+            styles$C.container,
+            size === "small" ? styles$C.small : size === "medium" ? styles$C.medium : styles$C.large
           ),
           role: "status",
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$B.dotsContainer, children: [...Array(dotsCount)].map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$C.dotsContainer, children: [...Array(dotsCount)].map((_, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 className: clsx(
-                  styles$B.dot,
-                  subtle2 ? styles$B.subtle : styles$B.primary
+                  styles$C.dot,
+                  subtle2 ? styles$C.subtle : styles$C.primary
                 ),
                 style: { animationDelay: `${index2 * 0.15}s` }
               },
               index2
             )) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$B.visuallyHidden, children: text2 })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$C.visuallyHidden, children: text2 })
           ]
         }
       );
     };
     const progressContainer = "_progressContainer_1cjjr_1";
-    const styles$A = {
+    const styles$B = {
       progressContainer
     };
     const LiveVirtualList = ({
@@ -50710,7 +50539,7 @@ self.onmessage = function (e) {
       const [, forceRender] = reactExports.useState({});
       const forceUpdate = reactExports.useCallback(() => forceRender({}), []);
       const Footer = () => {
-        return showProgress ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.progressContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0;
+        return showProgress ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$B.progressContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0;
       };
       reactExports.useEffect(() => {
         const parent = scrollRef == null ? void 0 : scrollRef.current;
@@ -50791,7 +50620,7 @@ self.onmessage = function (e) {
     const noTop = "_noTop_1p5e1_31";
     const timePanel = "_timePanel_1p5e1_35";
     const chat = "_chat_1p5e1_43";
-    const styles$z = {
+    const styles$A = {
       tabPanel,
       fullWidth: fullWidth$1,
       metadataPanel,
@@ -50805,7 +50634,7 @@ self.onmessage = function (e) {
     const flatBody = "_flatBody_1uw6w_1";
     const iconSmall$1 = "_iconSmall_1uw6w_9";
     const lineBase = "_lineBase_1uw6w_15";
-    const styles$y = {
+    const styles$z = {
       flatBody,
       iconSmall: iconSmall$1,
       lineBase
@@ -50820,23 +50649,23 @@ self.onmessage = function (e) {
       return "Error";
     };
     const FlatSampleError = ({ message: message2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$y.flatBody), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.error, styles$y.iconSmall) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$y.lineBase, "text-truncate"), children: errorType(message2) })
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$z.flatBody), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.error, styles$z.iconSmall) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.lineBase, "text-truncate"), children: errorType(message2) })
       ] });
     };
     const target = "_target_1s9n0_1";
     const answer = "_answer_1s9n0_5";
-    const grid$2 = "_grid_1s9n0_9";
+    const grid$3 = "_grid_1s9n0_9";
     const centerLabel = "_centerLabel_1s9n0_17";
     const centerValue = "_centerValue_1s9n0_22";
     const wrap = "_wrap_1s9n0_27";
     const titled = "_titled_1s9n0_31";
     const value = "_value_1s9n0_35";
-    const styles$x = {
+    const styles$y = {
       target,
       answer,
-      grid: grid$2,
+      grid: grid$3,
       centerLabel,
       centerValue,
       wrap,
@@ -50912,7 +50741,7 @@ self.onmessage = function (e) {
             MarkdownDiv,
             {
               markdown: arrayToString((fields == null ? void 0 : fields.target) || "none"),
-              className: clsx("no-last-para-padding", styles$x.target)
+              className: clsx("no-last-para-padding", styles$y.target)
             }
           ),
           size: `minmax(auto, 3fr)`,
@@ -50926,7 +50755,7 @@ self.onmessage = function (e) {
             MarkdownDiv,
             {
               markdown: fields.answer || "",
-              className: clsx("no-last-para-padding", styles$x.answer)
+              className: clsx("no-last-para-padding", styles$y.answer)
             }
           ) : "",
           size: `minmax(auto, 5fr)`,
@@ -50974,7 +50803,7 @@ self.onmessage = function (e) {
         "div",
         {
           id: `sample-heading-${parent_id}`,
-          className: clsx(styles$x.grid, "text-size-base"),
+          className: clsx(styles$y.grid, "text-size-base"),
           style: {
             gridTemplateColumns: `${columns.map((col) => {
               return col.size;
@@ -50989,8 +50818,8 @@ self.onmessage = function (e) {
                     "text-style-label",
                     "text-style-secondary",
                     "text-size-base",
-                    col.title ? styles$x.titled : void 0,
-                    col.center ? styles$x.centerLabel : void 0
+                    col.title ? styles$y.titled : void 0,
+                    col.center ? styles$y.centerLabel : void 0
                   ),
                   title: col.title,
                   children: col.label
@@ -51003,10 +50832,10 @@ self.onmessage = function (e) {
                 "div",
                 {
                   className: clsx(
-                    styles$x.value,
-                    styles$x.wrap,
+                    styles$y.value,
+                    styles$y.wrap,
                     col.clamp ? "three-line-clamp" : void 0,
-                    col.center ? styles$x.centerValue : void 0
+                    col.center ? styles$y.centerValue : void 0
                   ),
                   children: col.value
                 },
@@ -51035,7 +50864,7 @@ self.onmessage = function (e) {
     const separator$2 = "_separator_8i3m0_25";
     const separatorPadded = "_separatorPadded_8i3m0_30";
     const headerSep = "_headerSep_8i3m0_35";
-    const styles$w = {
+    const styles$x = {
       container: container$7,
       cell: cell$1,
       fullWidth,
@@ -51051,7 +50880,7 @@ self.onmessage = function (e) {
       if (!evalDescriptor) {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyPanel, { children: "No Sample Selected" });
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(className2, styles$w.container), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(className2, styles$x.container), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
@@ -51099,7 +50928,7 @@ self.onmessage = function (e) {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: clsx(styles$w.separator, styles$w.fullWidth, styles$w.headerSep)
+            className: clsx(styles$x.separator, styles$x.fullWidth, styles$x.headerSep)
           }
         ),
         Object.keys(evalSample.scores || {}).map((scorer2) => {
@@ -51111,16 +50940,16 @@ self.onmessage = function (e) {
           const answer2 = scoreData.answer;
           let metadata2 = scoreData.metadata || {};
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-base", styles$w.cell), children: scorer2 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$w.cell, "text-size-base"), children: answer2 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$w.cell, "text-size-base"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-base", styles$x.cell), children: scorer2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$x.cell, "text-size-base"), children: answer2 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$x.cell, "text-size-base"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               SampleScores,
               {
                 sample: evalSample,
                 scorer: scorer2
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-base", styles$w.cell), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: explanation2 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-base", styles$x.cell), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: explanation2 }) }),
             Object.keys(metadata2).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
@@ -51129,19 +50958,19 @@ self.onmessage = function (e) {
                     "text-size-smaller",
                     "text-style-label",
                     "text-style-secondary",
-                    styles$w.fullWidth
+                    styles$x.fullWidth
                   ),
                   children: "Metadata"
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$w.fullWidth), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: metadata2 }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$x.fullWidth), children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries: metadata2 }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
                   className: clsx(
-                    styles$w.separator,
-                    styles$w.separatorPadded,
-                    styles$w.fullWidth
+                    styles$x.separator,
+                    styles$x.separatorPadded,
+                    styles$x.fullWidth
                   )
                 }
               )
@@ -51154,7 +50983,7 @@ self.onmessage = function (e) {
     const wordBreak = "_wordBreak_w4jj8_15";
     const scoreCard = "_scoreCard_w4jj8_56";
     const scores = "_scores_w4jj8_60";
-    const styles$v = {
+    const styles$w = {
       container: container$6,
       wordBreak,
       scoreCard,
@@ -51187,9 +51016,9 @@ self.onmessage = function (e) {
             "container-fluid",
             className2,
             "font-size-base",
-            styles$v.container
+            styles$w.container
           ),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: clsx(styles$v.scoreCard), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { children: [
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { className: clsx(styles$w.scoreCard), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardBody, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -51211,7 +51040,7 @@ self.onmessage = function (e) {
                   MarkdownDiv,
                   {
                     markdown: scoreInput.join("\n"),
-                    className: clsx(styles$v.wordBreak, "text-size-base")
+                    className: clsx(styles$w.wordBreak, "text-size-base")
                   }
                 )
               }
@@ -51220,7 +51049,7 @@ self.onmessage = function (e) {
               SampleScoresGrid,
               {
                 evalSample: sample2,
-                className: clsx(styles$v.scores)
+                className: clsx(styles$w.scores)
               }
             )
           ] }) })
@@ -51229,7 +51058,7 @@ self.onmessage = function (e) {
     };
     const title$2 = "_title_19l1b_1";
     const contents = "_contents_19l1b_8";
-    const styles$u = {
+    const styles$v = {
       title: title$2,
       contents
     };
@@ -51239,12 +51068,12 @@ self.onmessage = function (e) {
       className: className2,
       children: children2
     }) => {
-      const contentEl = title2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$u.title, className2), children: [
+      const contentEl = title2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-small", styles$v.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$u.contents), children: contentEl });
+      const card2 = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("card", styles$v.contents), children: contentEl });
       return card2;
     };
     const ApprovalEventView = ({
@@ -51294,7 +51123,7 @@ self.onmessage = function (e) {
       }
     };
     const tab = "_tab_1je38_1";
-    const styles$t = {
+    const styles$u = {
       tab
     };
     const EventNav = ({
@@ -51319,7 +51148,7 @@ self.onmessage = function (e) {
             active2 ? "active " : "",
             "text-style-label",
             "text-size-small",
-            styles$t.tab
+            styles$u.tab
           ),
           onClick: handleClick,
           children: title2
@@ -51327,7 +51156,7 @@ self.onmessage = function (e) {
       ) });
     };
     const navs$1 = "_navs_1vm6p_1";
-    const styles$s = {
+    const styles$t = {
       navs: navs$1
     };
     const EventNavs = ({
@@ -51338,7 +51167,7 @@ self.onmessage = function (e) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "ul",
         {
-          className: clsx("nav", "nav-pills", styles$s.navs),
+          className: clsx("nav", "nav-pills", styles$t.navs),
           role: "tablist",
           "aria-orientation": "horizontal",
           children: navs2.map((nav2) => {
@@ -51361,7 +51190,7 @@ self.onmessage = function (e) {
     const card = "_card_7z797_12";
     const cardContent = "_cardContent_7z797_18";
     const hidden$1 = "_hidden_7z797_23";
-    const styles$r = {
+    const styles$s = {
       label: label$4,
       navs,
       card,
@@ -51376,8 +51205,7 @@ self.onmessage = function (e) {
       text: text2,
       icon: icon2,
       collapse,
-      children: children2,
-      running: running2
+      children: children2
     }) => {
       const [isCollapsed, setCollapsed] = useProperty(id, "collapsed", {
         defaultValue: !!collapse
@@ -51449,12 +51277,12 @@ self.onmessage = function (e) {
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: clsx("text-style-secondary", styles$r.label),
+                className: clsx("text-style-secondary", styles$s.label),
                 onClick: toggleCollapse,
                 children: isCollapsed ? text2 : ""
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$r.navs, children: (!hasCollapse || !isCollapsed) && filteredArrChildren && filteredArrChildren.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$s.navs, children: (!hasCollapse || !isCollapsed) && filteredArrChildren && filteredArrChildren.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               EventNavs,
               {
                 navs: filteredArrChildren.map((child, index2) => {
@@ -51473,35 +51301,32 @@ self.onmessage = function (e) {
           ]
         }
       ) : "";
-      const card2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id, className: clsx(className2, styles$r.card), children: [
-          titleEl,
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: clsx(
-                "tab-content",
-                styles$r.cardContent,
-                hasCollapse && isCollapsed ? styles$r.hidden : void 0
-              ),
-              children: filteredArrChildren == null ? void 0 : filteredArrChildren.map((child, index2) => {
-                const id2 = pillId(index2);
-                const isSelected = id2 === selectedNav;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    id: id2,
-                    className: clsx("tab-pane", "show", isSelected ? "active" : ""),
-                    children: child
-                  },
-                  `children-${id2}-${index2}`
-                );
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { animating: !!running2 })
-      ] });
+      const card2 = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { id, className: clsx(className2, styles$s.card), children: [
+        titleEl,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: clsx(
+              "tab-content",
+              styles$s.cardContent,
+              hasCollapse && isCollapsed ? styles$s.hidden : void 0
+            ),
+            children: filteredArrChildren == null ? void 0 : filteredArrChildren.map((child, index2) => {
+              const id2 = pillId(index2);
+              const isSelected = id2 === selectedNav;
+              return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  id: id2,
+                  className: clsx("tab-pane", "show", isSelected ? "active" : ""),
+                  children: child
+                },
+                `children-${id2}-${index2}`
+              );
+            })
+          }
+        )
+      ] }) });
       return card2;
     };
     function hasDataDefault(node2) {
@@ -51534,7 +51359,7 @@ self.onmessage = function (e) {
       );
     };
     const panel$1 = "_panel_8zdtn_1";
-    const styles$q = {
+    const styles$r = {
       panel: panel$1
     };
     const InfoEventView = ({
@@ -51544,9 +51369,9 @@ self.onmessage = function (e) {
     }) => {
       const panels = [];
       if (typeof event.data === "string") {
-        panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: event.data, className: styles$q.panel }));
+        panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: event.data, className: styles$r.panel }));
       } else {
-        panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { data: event.data, className: styles$q.panel }));
+        panels.push(/* @__PURE__ */ jsxRuntimeExports.jsx(JSONPanel, { data: event.data, className: styles$r.panel }));
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         EventPanel,
@@ -51583,9 +51408,9 @@ self.onmessage = function (e) {
         }
       );
     };
-    const grid$1 = "_grid_1eq5o_1";
-    const styles$p = {
-      grid: grid$1
+    const grid$2 = "_grid_1eq5o_1";
+    const styles$q = {
+      grid: grid$2
     };
     const LoggerEventView = ({
       event,
@@ -51598,7 +51423,7 @@ self.onmessage = function (e) {
           className: className2,
           title: event.message.level,
           icon: ApplicationIcons.logging[event.message.level.toLowerCase()],
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-base", styles$p.grid), children: [
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-base", styles$q.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,
@@ -51611,7 +51436,7 @@ self.onmessage = function (e) {
     };
     const container$5 = "_container_1brs9_1";
     const title$1 = "_title_1brs9_5";
-    const styles$o = {
+    const styles$p = {
       container: container$5,
       title: title$1
     };
@@ -51620,11 +51445,11 @@ self.onmessage = function (e) {
       children: children2,
       className: className2
     }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$o.container, className2), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$p.container, className2), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: clsx("text-size-small", "text-style-label", styles$o.title),
+            className: clsx("text-size-small", "text-style-label", styles$p.title),
             children: title2
           }
         ),
@@ -51639,7 +51464,7 @@ self.onmessage = function (e) {
     const progress$1 = "_progress_11njc_34";
     const toolConfig = "_toolConfig_11njc_38";
     const toolChoice = "_toolChoice_11njc_46";
-    const styles$n = {
+    const styles$o = {
       container: container$4,
       all,
       tableSelection,
@@ -51655,7 +51480,7 @@ self.onmessage = function (e) {
     const col3 = "_col3_45f60_16";
     const separator$1 = "_separator_45f60_20";
     const topMargin = "_topMargin_45f60_26";
-    const styles$m = {
+    const styles$n = {
       wrapper,
       col2,
       col1_3,
@@ -51723,9 +51548,9 @@ self.onmessage = function (e) {
           });
         }
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$m.wrapper), children: rows.map((row2, idx) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$n.wrapper), children: rows.map((row2, idx) => {
         if (row2.label === "---") {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$m.separator }, `$usage-sep-${idx}`);
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$n.separator }, `$usage-sep-${idx}`);
         } else {
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -51734,13 +51559,13 @@ self.onmessage = function (e) {
                 className: clsx(
                   "text-style-label",
                   "text-style-secondary",
-                  row2.secondary ? styles$m.col2 : styles$m.col1_3,
-                  row2.topMargin ? styles$m.topMargin : void 0
+                  row2.secondary ? styles$n.col2 : styles$n.col1_3,
+                  row2.topMargin ? styles$n.topMargin : void 0
                 ),
                 children: row2.label
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$m.col3, children: row2.value ? row2.value : "" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$n.col3, children: row2.value ? row2.value : "" })
           ] }, `$usage-row-${idx}`);
         }
       }) });
@@ -51795,7 +51620,7 @@ self.onmessage = function (e) {
           subTitle: formatTiming(event.timestamp, event.working_start),
           icon: ApplicationIcons.model,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$n.container, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$o.container, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ChatView,
                 {
@@ -51805,20 +51630,20 @@ self.onmessage = function (e) {
                   toolCallStyle: "omit"
                 }
               ),
-              event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$n.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
+              event.pending ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$o.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "All", className: styles$n.container, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$n.all, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "All", className: styles$o.container, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$o.all, children: [
                 Object.keys(entries).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
                   EventSection,
                   {
                     title: "Configuration",
-                    className: styles$n.tableSelection,
+                    className: styles$o.tableSelection,
                     children: /* @__PURE__ */ jsxRuntimeExports.jsx(MetaDataGrid, { entries, plain: true })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Usage", className: styles$n.tableSelection, children: event.output.usage !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage: event.output.usage }) : void 0 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Timing", className: styles$n.tableSelection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Usage", className: styles$o.tableSelection, children: event.output.usage !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ModelUsagePanel, { usage: event.output.usage }) : void 0 }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Timing", className: styles$o.tableSelection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                   EventTimingPanel,
                   {
                     timestamp: event.timestamp,
@@ -51836,13 +51661,13 @@ self.onmessage = function (e) {
                 }
               ) })
             ] }),
-            event.tools.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Tools", className: styles$n.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$o.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$n.container
+                className: styles$o.container
               }
             ) : ""
           ]
@@ -51866,11 +51691,11 @@ self.onmessage = function (e) {
       if (!contents2) {
         return null;
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: prismParentRef, className: clsx("model-call"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$n.codePre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: prismParentRef, className: clsx("model-call"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$o.codePre), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "code",
         {
           id,
-          className: clsx("language-json", styles$n.code, "text-size-small"),
+          className: clsx("language-json", styles$o.code, "text-size-small"),
           children: sourceCode
         }
       ) }) });
@@ -51883,8 +51708,8 @@ self.onmessage = function (e) {
         ] }, `${tool2.name}-${idx}`);
       });
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$n.toolConfig, children: toolEls }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$n.toolChoice, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$o.toolConfig, children: toolEls }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$o.toolChoice, 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 }) })
         ] })
@@ -51906,7 +51731,7 @@ self.onmessage = function (e) {
     const sample = "_sample_1a3fk_10";
     const section = "_section_1a3fk_14";
     const metadata$1 = "_metadata_1a3fk_21";
-    const styles$l = {
+    const styles$m = {
       noMargin,
       code: code$1,
       sample,
@@ -51923,13 +51748,13 @@ self.onmessage = function (e) {
       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$l.noMargin, children: file }, `sample-init-file-${file}`);
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$m.noMargin, children: file }, `sample-init-file-${file}`);
           }) }, `sample-${id}-init-files`)
         );
       }
       if (event.sample.setup) {
         sections.push(
-          /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Setup", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$l.code, children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sourceCode", children: event.sample.setup }) }) }, `sample-${id}-init-setup`)
+          /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Setup", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: styles$m.code, children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: "sourceCode", children: event.sample.setup }) }) }, `sample-${id}-init-setup`)
         );
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -51941,7 +51766,7 @@ self.onmessage = function (e) {
           icon: ApplicationIcons.sample,
           subTitle: formatDateTime(new Date(event.timestamp)),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Sample", className: styles$l.sample, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Sample", className: styles$m.sample, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(ChatView, { messages: stateObj["messages"] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
                 event.sample.choices ? event.sample.choices.map((choice, index2) => {
@@ -51951,7 +51776,7 @@ self.onmessage = function (e) {
                     choice
                   ] }, `$choice-{choice}`);
                 }) : "",
-                sections.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$l.section, children: sections }) : "",
+                sections.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$m.section, children: sections }) : "",
                 event.sample.target ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Target", children: toArray(event.sample.target).map((target2) => {
                   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: target2 }, target2);
                 }) }) : void 0
@@ -51961,7 +51786,7 @@ self.onmessage = function (e) {
               MetaDataGrid,
               {
                 "data-name": "Metadata",
-                className: styles$l.metadata,
+                className: styles$m.metadata,
                 entries: event.sample.metadata
               }
             ) : ""
@@ -52010,12 +51835,12 @@ self.onmessage = function (e) {
       const icon2 = resolve_icon(event.type);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(EventPanel, { id, title: title2, icon: icon2, className: className2, children: event.message });
     };
-    const twoColumn = "_twoColumn_iwnfd_9";
-    const exec = "_exec_iwnfd_15";
-    const result = "_result_iwnfd_19";
-    const fileLabel = "_fileLabel_iwnfd_23";
-    const wrapPre = "_wrapPre_iwnfd_28";
-    const styles$k = {
+    const twoColumn = "_twoColumn_1irga_9";
+    const exec = "_exec_1irga_15";
+    const result = "_result_1irga_19";
+    const fileLabel = "_fileLabel_1irga_23";
+    const wrapPre = "_wrapPre_1irga_28";
+    const styles$l = {
       twoColumn,
       exec,
       result,
@@ -52048,10 +51873,10 @@ self.onmessage = function (e) {
       const input2 = event.input;
       const result2 = event.result;
       const output2 = event.output;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$k.exec), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Command`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$k.twoColumn), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$k.wrapPre), children: cmd2 }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$k.wrapPre), children: input2 !== null ? input2 == null ? void 0 : input2.trim() : void 0 }),
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$l.exec), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Command`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$l.twoColumn), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$l.wrapPre), children: cmd2 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$l.wrapPre), children: input2 !== null ? input2 == null ? void 0 : input2.trim() : void 0 }),
           options2 !== null && Object.keys(options2).length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: `Options`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             MetaDataGrid,
             {
@@ -52062,7 +51887,7 @@ self.onmessage = function (e) {
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(EventSection, { title: `Result`, children: [
           output2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandablePanel, { id: `${id}-output`, collapse: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: output2 }) }) : void 0,
-          result2 !== 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$k.result), children: [
+          result2 !== 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$l.result), children: [
             "Exited with code ",
             result2
           ] }) : void 0
@@ -52087,14 +51912,14 @@ self.onmessage = function (e) {
     };
     const FileView = ({ id, file, contents: contents2 }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "File", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$k.fileLabel), children: file }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "File", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$l.fileLabel), children: file }) }),
         contents2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EventSection, { title: "Contents", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandablePanel, { id: `${id}-file`, collapse: false, children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { children: contents2 }) }) }) : void 0
       ] });
     };
     const explanation = "_explanation_1ww42_1";
     const separator = "_separator_1ww42_8";
     const metadata = "_metadata_1ww42_13";
-    const styles$j = {
+    const styles$k = {
       explanation,
       separator,
       metadata
@@ -52114,28 +51939,28 @@ self.onmessage = function (e) {
           subTitle: formatDateTime(new Date(event.timestamp)),
           icon: ApplicationIcons.scorer,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Explanation", className: clsx(styles$j.explanation), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Explanation", className: clsx(styles$k.explanation), children: [
               event.target ? /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.separator) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$k.separator) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Target" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: resolvedTarget || "" }) })
               ] }) : "",
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.separator) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$k.separator) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Answer" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: event.score.answer || "" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.separator) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$k.separator) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-style-label", children: "Explanation" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: event.score.explanation || "" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.separator) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$k.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$j.separator) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$k.separator) })
             ] }),
             event.score.metadata ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Metadata", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               MetaDataGrid,
               {
                 entries: event.score.metadata,
-                className: styles$j.metadata
+                className: styles$k.metadata
               }
             ) }) : void 0
           ]
@@ -58880,7 +58705,7 @@ ${events}
     const lightboxButtonCloseWrapper = "_lightboxButtonCloseWrapper_1mvg8_45";
     const lightboxButtonClose = "_lightboxButtonClose_1mvg8_45";
     const lightboxPreviewButton = "_lightboxPreviewButton_1mvg8_63";
-    const styles$i = {
+    const styles$j = {
       carouselThumbs,
       carouselThumb,
       carouselPlayIcon,
@@ -58949,12 +58774,12 @@ ${events}
         [openLightbox]
       );
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("lightbox-carousel-container"), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$i.carouselThumbs), children: slides.map((slide, index2) => {
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.carouselThumbs), children: slides.map((slide, index2) => {
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
               "data-index": index2,
-              className: clsx(styles$i.carouselThumb),
+              className: clsx(styles$j.carouselThumb),
               onClick: handleThumbClick,
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: slide.label }),
@@ -58963,7 +58788,7 @@ ${events}
                   {
                     className: clsx(
                       ApplicationIcons.play,
-                      styles$i.carouselPlayIcon
+                      styles$j.carouselPlayIcon
                     )
                   }
                 ) })
@@ -58975,12 +58800,12 @@ ${events}
         showOverlay && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "div",
           {
-            className: clsx(styles$i.lightboxOverlay, isOpen ? "open" : "closed"),
+            className: clsx(styles$j.lightboxOverlay, isOpen ? "open" : "closed"),
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$i.lightboxButtonCloseWrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$j.lightboxButtonCloseWrapper), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
-                  className: styles$i.lightboxButtonClose,
+                  className: styles$j.lightboxButtonClose,
                   onClick: closeLightbox,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.close })
                 }
@@ -58988,7 +58813,7 @@ ${events}
               slides.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
-                  className: clsx(styles$i.lightboxPreviewButton, "prev"),
+                  className: clsx(styles$j.lightboxPreviewButton, "prev"),
                   onClick: showPrev,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.previous })
                 }
@@ -58996,7 +58821,7 @@ ${events}
               slides.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "button",
                 {
-                  className: clsx(styles$i.lightboxPreviewButton, "next"),
+                  className: clsx(styles$j.lightboxPreviewButton, "next"),
                   onClick: showNext,
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.next })
                 }
@@ -59004,7 +58829,7 @@ ${events}
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
-                  className: clsx(styles$i.lightboxContent, isOpen ? "open" : "closed"),
+                  className: clsx(styles$j.lightboxContent, isOpen ? "open" : "closed"),
                   children: slides[currentIndex].render()
                 },
                 `carousel-slide-${currentIndex}`
@@ -59115,7 +58940,7 @@ ${events}
     const toolsGrid = "_toolsGrid_1qqm2_1";
     const tools = "_tools_1qqm2_1";
     const tool = "_tool_1qqm2_1";
-    const styles$h = {
+    const styles$i = {
       toolsGrid,
       tools,
       tool
@@ -59256,7 +59081,7 @@ ${events}
           toolsInfo["Tools"] = /* @__PURE__ */ jsxRuntimeExports.jsx(Tools, { toolDefinitions: filtered });
         }
       }
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$h.tools), children: Object.keys(toolsInfo).map((key2) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$i.tools), children: Object.keys(toolsInfo).map((key2) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs(reactExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
@@ -59309,7 +59134,7 @@ ${events}
       human_baseline_session
     ];
     const Tools = ({ toolDefinitions }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$h.toolsGrid, children: toolDefinitions.map((toolDefinition, idx) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$i.toolsGrid, children: toolDefinitions.map((toolDefinition, idx) => {
         var _a2;
         const toolName = toolDefinition.name;
         const toolArgs = ((_a2 = toolDefinition.parameters) == null ? void 0 : _a2.properties) ? Object.keys(toolDefinition.parameters.properties) : [];
@@ -59325,11 +59150,11 @@ ${events}
     };
     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$h.tool), children: functionCall });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("text-size-smallest", styles$i.tool), children: functionCall });
     };
     const diff = "_diff_eobja_1";
     const summary$2 = "_summary_eobja_6";
-    const styles$g = {
+    const styles$h = {
       diff,
       summary: summary$2
     };
@@ -59367,14 +59192,14 @@ ${events}
           text: !changePreview ? summary2 : void 0,
           collapse: changePreview === void 0 ? true : void 0,
           children: [
-            changePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Summary", className: clsx(styles$g.summary), children: changePreview }) : void 0,
+            changePreview ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-name": "Summary", className: clsx(styles$h.summary), children: changePreview }) : void 0,
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               StateDiffView,
               {
                 before,
                 after,
                 "data-name": "Diff",
-                className: clsx(styles$g.diff)
+                className: clsx(styles$h.diff)
               }
             )
           ]
@@ -59575,6 +59400,13 @@ ${events}
     function initializeObject(current2) {
       return current2 ?? {};
     }
+    const ET_STEP = "step";
+    const ACTION_BEGIN = "begin";
+    const ET_SPAN_BEGIN = "span_begin";
+    const ET_SPAN_END = "span_end";
+    const hasSpans = (events) => {
+      return events.some((event) => event.event === ET_SPAN_BEGIN);
+    };
     const kSandboxSignalName = "53787D8A-D3FC-426D-B383-9F880B70E4AA";
     const fixupEventStream = (events, filterPending = true) => {
       const collapsed = processPendingEvents(events, filterPending);
@@ -59597,44 +59429,65 @@ ${events}
       }, []);
     };
     const collapseSampleInit = (events) => {
+      const hasSpans2 = events.some((e) => {
+        return e.event === "span_begin" || e.event === "span_end";
+      });
+      if (hasSpans2) {
+        return events;
+      }
       const hasInitStep = events.findIndex((e) => {
         return e.event === "step" && e.name === "init";
       }) !== -1;
+      if (hasInitStep) {
+        return events;
+      }
       const initEventIndex = events.findIndex((e) => {
         return e.event === "sample_init";
       });
       const initEvent = events[initEventIndex];
-      const fixedUp = [...events];
-      if (!hasInitStep && initEvent) {
-        fixedUp.splice(initEventIndex, 0, {
-          timestamp: initEvent.timestamp,
-          event: "step",
-          action: "begin",
-          type: null,
-          name: "sample_init",
-          pending: false,
-          working_start: 0
-        });
-        fixedUp.splice(initEventIndex + 2, 0, {
-          timestamp: initEvent.timestamp,
-          event: "step",
-          action: "end",
-          type: null,
-          name: "sample_init",
-          pending: false,
-          working_start: 0
-        });
+      if (!initEvent) {
+        return events;
       }
+      const fixedUp = [...events];
+      fixedUp.splice(initEventIndex, 0, {
+        timestamp: initEvent.timestamp,
+        event: "step",
+        action: "begin",
+        type: null,
+        name: "sample_init",
+        pending: false,
+        working_start: 0,
+        span_id: initEvent.span_id
+      });
+      fixedUp.splice(initEventIndex + 2, 0, {
+        timestamp: initEvent.timestamp,
+        event: "step",
+        action: "end",
+        type: null,
+        name: "sample_init",
+        pending: false,
+        working_start: 0,
+        span_id: initEvent.span_id
+      });
       return fixedUp;
     };
     const groupSandboxEvents = (events) => {
       const result2 = [];
       const pendingSandboxEvents = [];
+      const useSpans = hasSpans(events);
       const pushPendingSandboxEvents = () => {
         const timestamp = pendingSandboxEvents[pendingSandboxEvents.length - 1].timestamp;
-        result2.push(createStepEvent(kSandboxSignalName, timestamp, "begin"));
+        if (useSpans) {
+          result2.push(createSpanBegin(kSandboxSignalName, timestamp, null));
+        } else {
+          result2.push(createStepEvent(kSandboxSignalName, timestamp, "begin"));
+        }
         result2.push(...pendingSandboxEvents);
-        result2.push(createStepEvent(kSandboxSignalName, timestamp, "end"));
+        if (useSpans) {
+          result2.push(createSpanEnd(kSandboxSignalName, timestamp));
+        } else {
+          result2.push(createStepEvent(kSandboxSignalName, timestamp, "end"));
+        }
         pendingSandboxEvents.length = 0;
       };
       for (const event of events) {
@@ -59659,8 +59512,32 @@ ${events}
       type: null,
       name: name2,
       pending: false,
-      working_start: 0
+      working_start: 0,
+      span_id: null
     });
+    const createSpanBegin = (name2, timestamp, parent_id) => {
+      return {
+        name: name2,
+        id: `${name2}-begin`,
+        span_id: name2,
+        parent_id,
+        timestamp,
+        event: "span_begin",
+        type: null,
+        pending: false,
+        working_start: 0
+      };
+    };
+    const createSpanEnd = (name2, timestamp) => {
+      return {
+        id: `${name2}-end`,
+        timestamp,
+        event: "span_end",
+        pending: false,
+        working_start: 0,
+        span_id: name2
+      };
+    };
     const StepEventView = ({
       id,
       event,
@@ -59669,7 +59546,7 @@ ${events}
     }) => {
       const descriptor = stepDescriptor(event);
       const title2 = descriptor.name || `${event.type ? event.type + ": " : "Step: "}${event.name}`;
-      const text2 = summarize(children2);
+      const text2 = summarize$1(children2);
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         EventPanel,
         {
@@ -59690,7 +59567,7 @@ ${events}
         }
       );
     };
-    const summarize = (children2) => {
+    const summarize$1 = (children2) => {
       if (children2.length === 0) {
         return "(no events)";
       }
@@ -59795,7 +59672,7 @@ ${events}
     const summaryRendered = "_summaryRendered_ac4z2_6";
     const subtaskSummary = "_subtaskSummary_ac4z2_10";
     const subtaskLabel = "_subtaskLabel_ac4z2_17";
-    const styles$f = {
+    const styles$g = {
       summary: summary$1,
       summaryRendered,
       subtaskSummary,
@@ -59810,9 +59687,9 @@ ${events}
       const body2 = [];
       if (event.type === "fork") {
         body2.push(
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { title: "Summary", className: clsx(styles$f.summary), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { title: "Summary", className: clsx(styles$g.summary), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Inputs" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$f.summaryRendered), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: event.input }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$g.summaryRendered), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: event.input }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Transcript" }),
             event.events.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               TranscriptView,
@@ -59869,12 +59746,12 @@ ${events}
     };
     const SubtaskSummary = ({ input: input2, result: result2 }) => {
       const output2 = typeof result2 === "object" ? result2 : { result: result2 };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$f.subtaskSummary), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$g.subtaskSummary), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Input" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-large", styles$f.subtaskLabel) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-large", styles$g.subtaskLabel) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label"), children: "Output" }),
         input2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: input2 }) : void 0,
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-title-secondary", styles$f.subtaskLabel), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-title-secondary", styles$g.subtaskLabel), children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: ApplicationIcons.arrows.right }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Rendered, { values: output2 }) })
       ] });
     };
@@ -59899,7 +59776,7 @@ ${events}
     const summary = "_summary_1qsnv_1";
     const approval = "_approval_1qsnv_6";
     const progress = "_progress_1qsnv_12";
-    const styles$e = {
+    const styles$f = {
       summary,
       approval,
       progress
@@ -59907,7 +59784,7 @@ ${events}
     const ToolEventView = ({
       id,
       event,
-      depth,
+      children: children2,
       className: className2
     }) => {
       var _a2, _b2;
@@ -59934,7 +59811,7 @@ ${events}
           subTitle: formatTiming(event.timestamp, event.working_start),
           icon: ApplicationIcons.solvers.use_tools,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$e.summary, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-name": "Summary", className: styles$f.summary, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ToolCallView,
                 {
@@ -59960,25 +59837,162 @@ ${events}
                 ApprovalEventView,
                 {
                   event: approvalEvent,
-                  className: styles$e.approval
+                  className: styles$f.approval
                 }
               ) : "",
-              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$f.progress), children: /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, { subtle: false, size: "medium" }) }) : void 0
             ] }),
-            event.events.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              TranscriptView,
+            children2.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TranscriptComponent,
               {
-                id: `${id}-subtask`,
                 "data-name": "Transcript",
-                "data-default": event.failed || event.agent ? true : null,
-                events: event.events,
-                depth: depth + 1
+                id: `${id}-subtask`,
+                eventNodes: children2,
+                "data-default": event.failed || event.agent ? true : null
               }
             ) : ""
           ]
         }
       );
     };
+    const SpanEventView = ({
+      id,
+      event,
+      children: children2,
+      className: className2
+    }) => {
+      const descriptor = spanDescriptor(event);
+      const title2 = descriptor.name || `${event.type ? event.type + ": " : "Step: "}${event.name}`;
+      const text2 = summarize(children2);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EventPanel,
+        {
+          id: `span-${event.name}-${id}`,
+          className: clsx("transcript-span", className2),
+          title: title2,
+          subTitle: formatDateTime(new Date(event.timestamp)),
+          text: text2,
+          collapse: descriptor.collapse,
+          icon: descriptor.icon,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TranscriptComponent,
+            {
+              id: `span|${event.name}|${id}`,
+              eventNodes: children2
+            }
+          )
+        }
+      );
+    };
+    const summarize = (children2) => {
+      if (children2.length === 0) {
+        return "(no events)";
+      }
+      const formatEvent = (event, count) => {
+        if (count === 1) {
+          return `${count} ${event} event`;
+        } else {
+          return `${count} ${event} events`;
+        }
+      };
+      const typeCount = {};
+      children2.forEach((child) => {
+        const currentCount = typeCount[child.event.event] || 0;
+        typeCount[child.event.event] = currentCount + 1;
+      });
+      const numberOfTypes = Object.keys(typeCount).length;
+      if (numberOfTypes < 3) {
+        return Object.keys(typeCount).map((key2) => {
+          return formatEvent(key2, typeCount[key2]);
+        }).join(", ");
+      }
+      if (children2.length === 1) {
+        return "1 event";
+      } else {
+        return `${children2.length} events`;
+      }
+    };
+    const spanDescriptor = (event) => {
+      const rootStepDescriptor = {
+        endSpace: true
+      };
+      if (event.type === "solver") {
+        switch (event.name) {
+          case "chain_of_thought":
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+          case "generate":
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+          case "self_critique":
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+          case "system_message":
+            return {
+              ...rootStepDescriptor,
+              collapse: true
+            };
+          case "use_tools":
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+          case "multiple_choice":
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+          default:
+            return {
+              ...rootStepDescriptor,
+              collapse: false
+            };
+        }
+      } else if (event.type === "scorer") {
+        return {
+          ...rootStepDescriptor,
+          collapse: false
+        };
+      } else if (event.event === "span_begin") {
+        if (event.span_id === kSandboxSignalName) {
+          return {
+            ...rootStepDescriptor,
+            name: "Sandbox Events",
+            collapse: true
+          };
+        } else if (event.name === "init") {
+          return {
+            ...rootStepDescriptor,
+            name: "Init",
+            collapse: true
+          };
+        } else {
+          return {
+            ...rootStepDescriptor,
+            collapse: false
+          };
+        }
+      } else {
+        switch (event.name) {
+          case "sample_init":
+            return {
+              ...rootStepDescriptor,
+              name: "Sample Init",
+              collapse: true
+            };
+          default:
+            return {
+              endSpace: false
+            };
+        }
+      }
+    };
     const transcriptComponent = "_transcriptComponent_171gc_19";
     const eventNode = "_eventNode_171gc_25";
     const darkenBg = "_darkenBg_171gc_29";
@@ -59986,7 +60000,7 @@ ${events}
     const eventNodeContainer = "_eventNodeContainer_171gc_37";
     const noBottom = "_noBottom_171gc_41";
     const attached$1 = "_attached_171gc_45";
-    const styles$d = {
+    const styles$e = {
       transcriptComponent,
       eventNode,
       darkenBg,
@@ -59995,11 +60009,11 @@ ${events}
       noBottom,
       attached: attached$1
     };
-    const darkenedBg = "_darkenedBg_1sie6_1";
-    const normalBg = "_normalBg_1sie6_5";
-    const node = "_node_1sie6_9";
-    const attached = "_attached_1sie6_14";
-    const styles$c = {
+    const darkenedBg = "_darkenedBg_u9na2_1";
+    const normalBg = "_normalBg_u9na2_5";
+    const node = "_node_u9na2_9";
+    const attached = "_attached_u9na2_14";
+    const styles$d = {
       darkenedBg,
       normalBg,
       node,
@@ -60007,17 +60021,17 @@ ${events}
     };
     const TranscriptVirtualListComponent = ({ id, eventNodes, scrollRef, running: running2 }) => {
       const renderRow = reactExports.useCallback((index2, item2) => {
-        const bgClass = item2.depth % 2 == 0 ? styles$c.darkenedBg : styles$c.normalBg;
-        const paddingClass = index2 === 0 ? styles$c.first : void 0;
+        const bgClass = item2.depth % 2 == 0 ? styles$d.darkenedBg : styles$d.normalBg;
+        const paddingClass = index2 === 0 ? styles$d.first : void 0;
         const eventId = `${id}-event-${index2}`;
         const previousIndex = index2 - 1;
         const previous = previousIndex > 0 && previousIndex <= eventNodes.length ? eventNodes[previousIndex] : void 0;
         const attached2 = item2.event.event === "tool" && ((previous == null ? void 0 : previous.event.event) === "tool" || (previous == null ? void 0 : previous.event.event) === "model");
-        const attachedClass = attached2 ? styles$c.attached : void 0;
+        const attachedClass = attached2 ? styles$d.attached : void 0;
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: clsx(styles$c.node, paddingClass, attachedClass),
+            className: clsx(styles$d.node, paddingClass, attachedClass),
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(RenderedEventNode, { id: eventId, node: item2, className: clsx(bgClass) })
           },
           eventId
@@ -60044,9 +60058,11 @@ ${events}
       }
     }
     function treeifyEvents(events, depth) {
+      const useSpans = hasSpans(events);
+      const treeFn = useSpans ? treeifyFnSpan : treeifyFnStep;
       const rootNodes = [];
       const stack2 = [];
-      const pushNode = (event) => {
+      const addNode = (event) => {
         const node2 = new EventNode(event, stack2.length + depth);
         if (stack2.length > 0) {
           const parentNode = stack2[stack2.length - 1];
@@ -60056,20 +60072,139 @@ ${events}
         }
         return node2;
       };
+      const pushStack = (node2) => {
+        stack2.push(node2);
+      };
+      const popStack = () => {
+        if (stack2.length > 0) {
+          stack2.pop();
+        }
+      };
       events.forEach((event) => {
-        if (event.event === "step" && event.action === "begin") {
-          const node2 = pushNode(event);
-          stack2.push(node2);
-        } else if (event.event === "step" && event.action === "end") {
-          if (stack2.length > 0) {
-            stack2.pop();
+        treeFn(event, addNode, pushStack, popStack);
+      });
+      if (useSpans) {
+        return transformTree(rootNodes);
+      } else {
+        return rootNodes;
+      }
+    }
+    const treeifyFnStep = (event, addNode, pushStack, popStack) => {
+      switch (event.event) {
+        case ET_STEP:
+          if (event.action === ACTION_BEGIN) {
+            const node2 = addNode(event);
+            pushStack(node2);
+          } else {
+            popStack();
+          }
+          break;
+        case ET_SPAN_BEGIN: {
+          break;
+        }
+        case ET_SPAN_END: {
+          break;
+        }
+        default:
+          addNode(event);
+          break;
+      }
+    };
+    const treeifyFnSpan = (event, addNode, pushStack, popStack) => {
+      switch (event.event) {
+        case ET_STEP:
+          break;
+        case ET_SPAN_BEGIN: {
+          const node2 = addNode(event);
+          pushStack(node2);
+          break;
+        }
+        case ET_SPAN_END: {
+          popStack();
+          break;
+        }
+        default:
+          addNode(event);
+          break;
+      }
+    };
+    const treeNodeTransformers = [
+      {
+        name: "unwrap_tools",
+        matches: (node2) => node2.event.event === "span_begin" && node2.event.type === "tool",
+        process: (node2) => elevateChildNode(node2, "tool") || node2
+      },
+      {
+        name: "unwrap_subtasks",
+        matches: (node2) => node2.event.event === "span_begin" && node2.event.type === "subtask",
+        process: (node2) => elevateChildNode(node2, "subtask") || node2
+      },
+      {
+        name: "unwrap_agent_solver",
+        matches: (node2) => node2.event.event === "span_begin" && node2.event["type"] === "solver" && node2.children.length === 2 && node2.children[0].event.event === "span_begin" && node2.children[0].event.type === "agent" && node2.children[1].event.event === "state",
+        process: (node2) => skipFirstChildNode(node2)
+      },
+      {
+        name: "unwrap_agent_solver w/store",
+        matches: (node2) => node2.event.event === "span_begin" && node2.event["type"] === "solver" && node2.children.length === 3 && node2.children[0].event.event === "span_begin" && node2.children[0].event.type === "agent" && node2.children[1].event.event === "state" && node2.children[2].event.event === "store",
+        process: (node2) => skipFirstChildNode(node2)
+      },
+      {
+        name: "unwrap_handoff",
+        matches: (node2) => node2.event.event === "span_begin" && node2.event["type"] === "handoff" && node2.children.length === 2 && node2.children[0].event.event === "tool" && node2.children[1].event.event === "store" && node2.children[0].children.length === 2 && node2.children[0].children[0].event.event === "span_begin" && node2.children[0].children[0].event.type === "agent",
+        process: (node2) => skipThisNode(node2)
+      }
+    ];
+    const transformTree = (roots) => {
+      const visitNode = (node2) => {
+        let processedNode = node2;
+        processedNode.children = processedNode.children.map(visitNode);
+        for (const transformer of treeNodeTransformers) {
+          if (transformer.matches(processedNode)) {
+            processedNode = transformer.process(processedNode);
+            break;
           }
-        } else {
-          pushNode(event);
         }
+        return processedNode;
+      };
+      return roots.map(visitNode);
+    };
+    const elevateChildNode = (node2, childEventType) => {
+      const targetIndex = node2.children.findIndex(
+        (child) => child.event.event === childEventType
+      );
+      if (targetIndex === -1) {
+        console.log(
+          `No ${childEventType} event found in a span, this is very unexpected.`
+        );
+        return null;
+      }
+      const targetNode = { ...node2.children[targetIndex] };
+      const remainingChildren = node2.children.filter((_, i2) => i2 !== targetIndex);
+      targetNode.depth = node2.depth;
+      targetNode.children = reduceDepth(remainingChildren);
+      return targetNode;
+    };
+    const skipFirstChildNode = (node2) => {
+      const agentSpan = node2.children.splice(0, 1)[0];
+      node2.children.unshift(...reduceDepth(agentSpan.children));
+      return node2;
+    };
+    const skipThisNode = (node2) => {
+      const newNode = { ...node2.children[0] };
+      newNode.depth = node2.depth;
+      newNode.children = reduceDepth(newNode.children[0].children, 2);
+      return newNode;
+    };
+    const reduceDepth = (nodes, depth = 1) => {
+      return nodes.map((node2) => {
+        if (node2.children.length > 0) {
+          node2.children = reduceDepth(node2.children, 1);
+        }
+        node2.depth = node2.depth - depth;
+        return node2;
       });
-      return rootNodes;
-    }
+    };
     const TranscriptView = ({
       id,
       events,
@@ -60107,27 +60242,27 @@ ${events}
         let attached2 = false;
         for (let i2 = 0; i2 < eventNodes.length; i2++) {
           const eventNode2 = eventNodes[i2];
-          const clz = [styles$d.eventNode];
+          const clz = [styles$e.eventNode];
           const containerClz = [];
           if (eventNode2.event.event !== "tool") {
             attached2 = false;
           }
           if (eventNode2.depth % 2 == 0) {
-            clz.push(styles$d.darkenBg);
+            clz.push(styles$e.darkenBg);
           }
           if (i2 === eventNodes.length - 1) {
-            clz.push(styles$d.lastNode);
+            clz.push(styles$e.lastNode);
           }
           if (attached2) {
-            containerClz.push(styles$d.attached);
+            containerClz.push(styles$e.attached);
           }
           const eventId = `${id}|event|${i2}`;
           const row2 = /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               className: clsx(
-                styles$d.eventNodeContainer,
-                i2 === eventNodes.length - 1 ? styles$d.noBottom : void 0,
+                styles$e.eventNodeContainer,
+                i2 === eventNodes.length - 1 ? styles$e.noBottom : void 0,
                 containerClz
               ),
               children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -60150,7 +60285,7 @@ ${events}
           "div",
           {
             id,
-            className: clsx("text-size-small", styles$d.transcriptComponent),
+            className: clsx("text-size-small", styles$e.transcriptComponent),
             children: rows
           }
         );
@@ -60187,6 +60322,16 @@ ${events}
             return /* @__PURE__ */ jsxRuntimeExports.jsx(ScoreEventView, { id, event: node2.event, className: className2 });
           case "state":
             return /* @__PURE__ */ jsxRuntimeExports.jsx(StateEventView, { id, event: node2.event, className: className2 });
+          case "span_begin":
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SpanEventView,
+              {
+                id,
+                event: node2.event,
+                children: node2.children,
+                className: className2
+              }
+            );
           case "step":
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               StepEventView,
@@ -60224,7 +60369,7 @@ ${events}
                 id,
                 event: node2.event,
                 className: className2,
-                depth: node2.depth
+                children: node2.children
               }
             );
           case "input":
@@ -60320,7 +60465,7 @@ ${events}
           {
             id: tabsetId,
             tabControlsClassName: clsx("text-size-base"),
-            tabPanelsClassName: clsx(styles$z.tabPanel),
+            tabPanelsClassName: clsx(styles$A.tabPanel),
             tools: tools2,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -60349,7 +60494,7 @@ ${events}
                 TabPanel,
                 {
                   id: kSampleMessagesTabId,
-                  className: clsx("sample-tab", styles$z.fullWidth, styles$z.chat),
+                  className: clsx("sample-tab", styles$A.fullWidth, styles$A.chat),
                   title: "Messages",
                   onSelected: onSelectedTab,
                   selected: effectiveSelectedTab === kSampleMessagesTabId,
@@ -60389,7 +60534,7 @@ ${events}
                   title: "Metadata",
                   onSelected: onSelectedTab,
                   selected: effectiveSelectedTab === kSampleMetdataTabId,
-                  children: sampleMetadatas.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.metadataPanel), children: sampleMetadatas }) : /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "No metadata" })
+                  children: sampleMetadatas.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.metadataPanel), children: sampleMetadatas }) : /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "No metadata" })
                 }
               ),
               (sample2 == null ? void 0 : sample2.error) || (sample2 == null ? void 0 : sample2.error_retries) && (sample2 == null ? void 0 : sample2.error_retries.length) > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -60400,14 +60545,14 @@ ${events}
                   title: "Errors",
                   onSelected: onSelectedTab,
                   selected: effectiveSelectedTab === kSampleErrorTabId,
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$z.error), children: [
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$A.error), children: [
                     (sample2 == null ? void 0 : sample2.error) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
                       /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: `Sample Error` }),
                       /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                         ANSIDisplay,
                         {
                           output: sample2.error.traceback_ansi,
-                          className: clsx("text-size-small", styles$z.ansi),
+                          className: clsx("text-size-small", styles$A.ansi),
                           style: {
                             fontSize: "clamp(0.4rem, calc(0.15em + 1vw), 0.8rem)",
                             margin: "0.5em 0"
@@ -60422,7 +60567,7 @@ ${events}
                           ANSIDisplay,
                           {
                             output: retry.traceback_ansi,
-                            className: clsx("text-size-small", styles$z.ansi),
+                            className: clsx("text-size-small", styles$A.ansi),
                             style: {
                               fontSize: "clamp(0.4rem, calc(0.15em + 1vw), 0.8rem)",
                               margin: "0.5em 0"
@@ -60442,7 +60587,7 @@ ${events}
                   title: "JSON",
                   onSelected: onSelectedTab,
                   selected: effectiveSelectedTab === kSampleJsonTabId,
-                  children: !sample2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "JSON not available" }) : sample2.messages.length > 100 ? /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "JSON too large too display" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$z.padded, styles$z.fullWidth), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  children: !sample2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "JSON not available" }) : sample2.messages.length > 100 ? /* @__PURE__ */ jsxRuntimeExports.jsx(NoContentsPanel, { text: "JSON too large too display" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$A.padded, styles$A.fullWidth), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                     JSONPanel,
                     {
                       data: sample2,
@@ -60470,7 +60615,7 @@ ${events}
               ModelTokenTable,
               {
                 model_usage: sample2.model_usage,
-                className: clsx(styles$z.noTop)
+                className: clsx(styles$A.noTop)
               }
             ) })
           ] }, `sample-usage-${id}`)
@@ -60480,7 +60625,7 @@ ${events}
         sampleMetadatas.push(
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Time" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$z.timePanel, "text-size-smaller"), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$A.timePanel, "text-size-smaller"), children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Working" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: formatTime$1(sample2.working_time) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-label", "text-style-secondary"), children: "Total" }),
@@ -60498,7 +60643,7 @@ ${events}
               {
                 id: "task-sample-metadata-${id}",
                 entries: sample2 == null ? void 0 : sample2.metadata,
-                className: clsx("tab-pane", styles$z.noTop)
+                className: clsx("tab-pane", styles$A.noTop)
               }
             ) })
           ] }, `sample-metadata-${id}`)
@@ -60513,7 +60658,7 @@ ${events}
               {
                 id: "task-sample-store-${id}",
                 entries: sample2 == null ? void 0 : sample2.store,
-                className: clsx("tab-pane", styles$z.noTop)
+                className: clsx("tab-pane", styles$A.noTop)
               }
             ) })
           ] }, `sample-store-${id}`)
@@ -60590,7 +60735,7 @@ ${events}
     const container$3 = "_container_kgsc6_1";
     const body$1 = "_body_kgsc6_7";
     const scroller = "_scroller_kgsc6_11";
-    const styles$b = {
+    const styles$c = {
       container: container$3,
       body: body$1,
       scroller
@@ -60627,14 +60772,14 @@ ${events}
         (_f = sampleData.sample) == null ? void 0 : _f.epoch
       ]);
       const scrollRef = reactExports.useRef(null);
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.container, children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$c.container, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProgressBar,
           {
             animating: sampleData.status === "loading" || sampleData.status === "streaming"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$b.scroller), ref: scrollRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$b.body, children: sampleData.error ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$c.scroller), ref: scrollRef, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$c.body, children: sampleData.error ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           ErrorPanel,
           {
             title: "Unable to load sample",
@@ -60653,7 +60798,7 @@ ${events}
     const content$1 = "_content_yj2nt_41";
     const header$1 = "_header_yj2nt_45";
     const titleTool = "_titleTool_yj2nt_50";
-    const styles$a = {
+    const styles$b = {
       title,
       detail,
       detailText,
@@ -60693,8 +60838,8 @@ ${events}
           id,
           className: clsx(
             "modal",
-            styles$a.modal,
-            !visible2 ? styles$a.hidden : void 0
+            styles$b.modal,
+            !visible2 ? styles$b.hidden : void 0
           ),
           role: "dialog",
           onKeyUp: onkeyup,
@@ -60706,23 +60851,23 @@ ${events}
               className: clsx(
                 "modal-dialog",
                 "modal-dialog-scrollable",
-                styles$a.modalBody
+                styles$b.modalBody
               ),
               role: "document",
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-content", styles$a.content), children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-header", styles$a.header), children: [
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-content", styles$b.content), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("modal-header", styles$b.header), children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
                     "div",
                     {
-                      className: clsx("modal-title", "text-size-smaller", styles$a.title),
+                      className: clsx("modal-title", "text-size-smaller", styles$b.title),
                       children: title2 || ""
                     }
                   ),
-                  detail2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$a.detail, children: [
+                  detail2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$b.detail, children: [
                     (detailTools == null ? void 0 : detailTools.left) ? detailTools.left.map((tool2, idx) => {
                       return /* @__PURE__ */ jsxRuntimeExports.jsx(TitleTool, { ...tool2 }, `tool-left-${idx}`);
                     }) : "",
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller", styles$a.detailText), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: detail2 }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-smaller", styles$b.detailText), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: detail2 }) }),
                     (detailTools == null ? void 0 : detailTools.right) ? detailTools.right.map((tool2, idx) => {
                       return /* @__PURE__ */ jsxRuntimeExports.jsx(TitleTool, { ...tool2 }, `tool-right-${idx}`);
                     }) : ""
@@ -60735,7 +60880,7 @@ ${events}
                         "btn",
                         "btn-close-large-dialog",
                         "text-size-larger",
-                        styles$a.close
+                        styles$b.close
                       ),
                       onClick: onHide,
                       "aria-label": "Close",
@@ -60762,7 +60907,7 @@ ${events}
             "btn",
             "btn-outline",
             "text-size-small",
-            styles$a.titleTool
+            styles$b.titleTool
           ),
           "aria-label": label2,
           onClick,
@@ -60872,7 +61017,7 @@ ${events}
     };
     const container$2 = "_container_15b4r_1";
     const label$3 = "_label_15b4r_5";
-    const styles$9 = {
+    const styles$a = {
       container: container$2,
       label: label$3
     };
@@ -60889,7 +61034,7 @@ ${events}
         const sel = e.target;
         setEpoch(sel.value);
       };
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$9.container, children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$a.container, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
@@ -60898,7 +61043,7 @@ ${events}
               "text-size-smaller",
               "text-style-label",
               "text-style-secondary",
-              styles$9.label
+              styles$a.label
             ),
             children: "Epochs:"
           }
@@ -81089,7 +81234,7 @@ ${events}
     const label$2 = "_label_jbrqc_1";
     const input = "_input_jbrqc_7";
     const help = "_help_jbrqc_11";
-    const styles$8 = {
+    const styles$9 = {
       label: label$2,
       input,
       help
@@ -81302,7 +81447,7 @@ Supported expressions:
               "text-size-smaller",
               "text-style-label",
               "text-style-secondary",
-              styles$8.label
+              styles$9.label
             ),
             children: "Filter:"
           }
@@ -81313,14 +81458,14 @@ Supported expressions:
             ref: editorRef,
             className: clsx(
               (filteringResultInstant == null ? void 0 : filteringResultInstant.error) && "filter-pending",
-              styles$8.input
+              styles$9.input
             )
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
-            className: clsx("bi", "bi-question-circle", styles$8.help),
+            className: clsx("bi", "bi-question-circle", styles$9.help),
             "data-tooltip": FILTER_TOOLTIP,
             "data-tooltip-position": "bottom-left"
           }
@@ -81331,7 +81476,7 @@ Supported expressions:
     const label$1 = "_label_anstf_5";
     const secondSel = "_secondSel_anstf_9";
     const secondLabel = "_secondLabel_anstf_13";
-    const styles$7 = {
+    const styles$8 = {
       flex,
       label: label$1,
       secondSel,
@@ -81357,7 +81502,7 @@ Supported expressions:
         [setScore, scores2]
       );
       if (scorers.length === 1) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.flex, children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$8.flex, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -81366,7 +81511,7 @@ Supported expressions:
                 "text-size-smaller",
                 "text-style-label",
                 "text-style-secondary",
-                styles$7.label
+                styles$8.label
               ),
               children: "Score:"
             }
@@ -81384,7 +81529,7 @@ Supported expressions:
         const scorerScores = scores2.filter((sc) => {
           return score2 && sc.scorer === score2.scorer;
         });
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.flex, children: [
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$8.flex, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
@@ -81393,8 +81538,8 @@ Supported expressions:
                 "text-size-smaller",
                 "text-style-label",
                 "text-style-secondary",
-                styles$7.label,
-                styles$7.secondLabel
+                styles$8.label,
+                styles$8.secondLabel
               ),
               children: "Scorer:"
             }
@@ -81410,7 +81555,7 @@ Supported expressions:
           scorerScores.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ScoreSelector,
             {
-              className: clsx(styles$7.secondSel),
+              className: clsx(styles$8.secondSel),
               scores: scorerScores,
               selectedIndex: scoreIndex(scorerScores, score2),
               setSelectedIndex: handleSelectScore
@@ -81516,6 +81661,18 @@ Supported expressions:
       }
       return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScorer, { scores: scores2, score: score2, setScore });
     };
+    const kBaseFontSize = 0.9;
+    const ScaleBaseFont = (scale) => {
+      return `${kBaseFontSize + scale}rem`;
+    };
+    const FontSize = {
+      smaller: ScaleBaseFont(-0.1)
+    };
+    const TextStyle = {
+      secondary: {
+        color: "var(--bs-secondary)"
+      }
+    };
     const ApplicationStyles = {
       moreButton: {
         maxHeight: "1.8em",
@@ -81565,7 +81722,7 @@ Supported expressions:
     const body = "_body_12gn4_1";
     const iconSmall = "_iconSmall_12gn4_9";
     const message = "_message_12gn4_15";
-    const styles$6 = {
+    const styles$7 = {
       body,
       iconSmall,
       message
@@ -81575,12 +81732,12 @@ Supported expressions:
       align
     }) => {
       align = align || "center";
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$6.body, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.error, styles$6.iconSmall) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$6.message, style: ApplicationStyles.lineClamp(2), children: errorType(message2) })
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$7.body, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: clsx(ApplicationIcons.error, styles$7.iconSmall) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$7.message, style: ApplicationStyles.lineClamp(2), children: errorType(message2) })
       ] });
     };
-    const grid = "_grid_185sx_1";
+    const grid$1 = "_grid_185sx_1";
     const selected = "_selected_185sx_13";
     const disabled = "_disabled_185sx_23";
     const cell = "_cell_185sx_28";
@@ -81588,8 +81745,8 @@ Supported expressions:
     const noLeft = "_noLeft_185sx_37";
     const score = "_score_185sx_41";
     const centered = "_centered_185sx_46";
-    const styles$5 = {
-      grid,
+    const styles$6 = {
+      grid: grid$1,
       selected,
       disabled,
       cell,
@@ -81622,10 +81779,10 @@ Supported expressions:
         {
           id: `sample-${id}`,
           className: clsx(
-            styles$5.grid,
+            styles$6.grid,
             "text-size-base",
-            selectedSampleIndex === index2 ? styles$5.selected : void 0,
-            !isViewable && !sampleUrl2 ? styles$5.disabled : void 0
+            selectedSampleIndex === index2 ? styles$6.selected : void 0,
+            !isViewable && !sampleUrl2 ? styles$6.disabled : void 0
           ),
           style: {
             height: `${height}px`,
@@ -81633,31 +81790,31 @@ Supported expressions:
             gridTemplateColumns: gridColumnsTemplate
           },
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-id", "three-line-clamp", styles$5.cell), children: sample2.id }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-id", "three-line-clamp", styles$6.cell), children: sample2.id }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 className: clsx(
                   "sample-input",
                   "three-line-clamp",
-                  styles$5.cell,
-                  styles$5.wrapAnywhere
+                  styles$6.cell,
+                  styles$6.wrapAnywhere
                 ),
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownDiv, { markdown: inputString(sample2.input).join(" ") })
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-target", "three-line-clamp", styles$5.cell), children: (sample2 == null ? void 0 : sample2.target) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-target", "three-line-clamp", styles$6.cell), children: (sample2 == null ? void 0 : sample2.target) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               MarkdownDiv,
               {
                 markdown: arrayToString(sample2.target),
-                className: clsx("no-last-para-padding", styles$5.noLeft)
+                className: clsx("no-last-para-padding", styles$6.noLeft)
               }
             ) : void 0 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-answer", "three-line-clamp", styles$5.cell), children: sample2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("sample-answer", "three-line-clamp", styles$6.cell), children: sample2 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               MarkdownDiv,
               {
                 markdown: answer2 || "",
-                className: clsx("no-last-para-padding", styles$5.noLeft)
+                className: clsx("no-last-para-padding", styles$6.noLeft)
               }
             ) : "" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81667,7 +81824,7 @@ Supported expressions:
                   "sample-limit",
                   "text-size-small",
                   "three-line-clamp",
-                  styles$5.cell
+                  styles$6.cell
                 ),
                 children: sample2.limit
               }
@@ -81679,13 +81836,13 @@ Supported expressions:
                   "sample-retries",
                   "text-size-small",
                   "three-line-clamp",
-                  styles$5.cell,
-                  styles$5.centered
+                  styles$6.cell,
+                  styles$6.centered
                 ),
                 children: sample2.retries && sample2.retries > 0 ? sample2.retries : void 0
               }
             ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$5.cell, styles$5.score), children: sample2.error ? /* @__PURE__ */ jsxRuntimeExports.jsx(SampleErrorView, { message: sample2.error }) : completed ? scoreRendered : /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, {}) })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-size-small", styles$6.cell, styles$6.score), children: sample2.error ? /* @__PURE__ */ jsxRuntimeExports.jsx(SampleErrorView, { message: sample2.error }) : completed ? scoreRendered : /* @__PURE__ */ jsxRuntimeExports.jsx(PulsingDots, {}) })
           ]
         }
       );
@@ -81698,7 +81855,7 @@ Supported expressions:
       );
     };
     const row = "_row_utdq5_1";
-    const styles$4 = {
+    const styles$5 = {
       row
     };
     const SampleSeparator = ({
@@ -81710,7 +81867,7 @@ Supported expressions:
         "div",
         {
           id,
-          className: clsx("text-style-secondary", "text-size-smaller", styles$4.row),
+          className: clsx("text-style-secondary", "text-size-smaller", styles$5.row),
           style: { height: `${height}px` },
           children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: title2 })
         }
@@ -81720,7 +81877,7 @@ Supported expressions:
     const spinnerContainer = "_spinnerContainer_vkofn_11";
     const spinner$1 = "_spinner_vkofn_11";
     const label = "_label_vkofn_25";
-    const styles$3 = {
+    const styles$4 = {
       footer,
       spinnerContainer,
       spinner: spinner$1,
@@ -81731,24 +81888,24 @@ Supported expressions:
       totalSampleCount,
       running: running2
     }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-smaller", styles$3.footer), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: running2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$3.spinnerContainer), children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("text-size-smaller", styles$4.footer), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: running2 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$4.spinnerContainer), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
-              className: clsx("spinner-border", styles$3.spinner),
+              className: clsx("spinner-border", styles$4.spinner),
               role: "status",
               children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("visually-hidden"), children: "Running..." })
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-secondary", styles$3.label), children: "running..." })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("text-style-secondary", styles$4.label), children: "running..." })
         ] }) : void 0 }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: sampleCount < totalSampleCount ? `${sampleCount} / ${totalSampleCount} Samples` : `${sampleCount} Samples` })
       ] });
     };
     const header = "_header_16ngy_1";
     const center = "_center_16ngy_11";
-    const styles$2 = {
+    const styles$3 = {
       header,
       center
     };
@@ -81764,7 +81921,7 @@ Supported expressions:
       "div",
       {
         className: clsx(
-          styles$2.header,
+          styles$3.header,
           "text-size-smaller",
           "text-style-label",
           "text-style-secondary"
@@ -81777,12 +81934,12 @@ Supported expressions:
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: answer2 ? "Answer" : "" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: limit ? "Limit" : "" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: retries ? "Retries" : "" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.center, children: score2 ? "Score" : "" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.center, children: score2 ? "Score" : "" })
         ]
       }
     );
     const mainLayout = "_mainLayout_q79zq_7";
-    const styles$1 = {
+    const styles$2 = {
       mainLayout
     };
     const kSampleHeight = 88;
@@ -81918,7 +82075,7 @@ Supported expressions:
       const percentError = errorCount / sampleCount * 100;
       const percentLimit = limitCount / sampleCount * 100;
       const warningMessage = errorCount > 0 ? `INFO: ${errorCount} of ${sampleCount} samples (${formatNoDecimal(percentError)}%) had errors and were not scored.` : limitCount ? `INFO: ${limitCount} of ${sampleCount} samples (${formatNoDecimal(percentLimit)}%) completed due to exceeding a limit.` : void 0;
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.mainLayout, children: [
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.mainLayout, children: [
         warningMessage ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           MessageBand,
           {
@@ -82013,16 +82170,16 @@ Supported expressions:
     const container$1 = "_container_1yknn_7";
     const spinner = "_spinner_1yknn_14";
     const text = "_text_1yknn_20";
-    const styles = {
+    const styles$1 = {
       panel,
       container: container$1,
       spinner,
       text
     };
     const RunningNoSamples = () => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.container, "text-size-smaller"), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles.spinner, "spinner-border"), role: "status", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("visually-hidden"), children: "starting..." }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles.text), children: "starting...." })
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1.panel), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles$1.container, "text-size-smaller"), children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1.spinner, "spinner-border"), role: "status", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("visually-hidden"), children: "starting..." }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$1.text), children: "starting...." })
       ] }) });
     };
     const getSampleProcessor = (samples, epochs, groupBy, groupByOrder, sampleDescriptor, score2) => {
@@ -82316,6 +82473,117 @@ Supported expressions:
         ] });
       }
     };
+    const ghCommitUrl = (origin, commit) => {
+      const baseUrl2 = origin.replace(/\.git$/, "");
+      return `${baseUrl2}/commit/${commit}`;
+    };
+    const grid = "_grid_er9fb_1";
+    const styles = {
+      grid
+    };
+    const useTaskTabConfig = (evalSpec, evalStats) => {
+      return reactExports.useMemo(() => {
+        return {
+          id: kLogViewTaskTabId,
+          label: "Task",
+          scrollable: true,
+          component: TaskTab,
+          componentProps: {
+            evalSpec,
+            evalStats
+          }
+        };
+      }, [evalSpec, evalStats]);
+    };
+    const TaskTab = ({ evalSpec, evalStats }) => {
+      Object.entries((evalSpec == null ? void 0 : evalSpec.config) || {}).forEach((entry2) => {
+        entry2[0];
+        entry2[1];
+      });
+      const revision = evalSpec == null ? void 0 : evalSpec.revision;
+      const packages = evalSpec == null ? void 0 : evalSpec.packages;
+      const taskInformation = {
+        ["Task ID"]: evalSpec == null ? void 0 : evalSpec.task_id,
+        ["Run ID"]: evalSpec == null ? void 0 : evalSpec.run_id
+      };
+      if (revision) {
+        taskInformation[`${revision.type ? `${toTitleCase(revision.type)} ` : ""}Revision`] = {
+          _html: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: ghCommitUrl(revision.origin, revision.commit), children: revision.commit })
+        };
+      }
+      if (packages) {
+        const names = Object.keys(packages).map((key2) => {
+          return `${key2} ${packages[key2]}`;
+        });
+        if (names.length === 1) {
+          taskInformation["Inspect"] = names[0];
+        } else {
+          taskInformation["Inspect"] = names;
+        }
+      }
+      if (evalSpec == null ? void 0 : evalSpec.tags) {
+        taskInformation["tags"] = evalSpec == null ? void 0 : evalSpec.tags.join(", ");
+      }
+      if (evalSpec == null ? void 0 : evalSpec.sandbox) {
+        if (Array.isArray(evalSpec == null ? void 0 : evalSpec.sandbox)) {
+          taskInformation["sandbox"] = evalSpec.sandbox[0];
+          if (evalSpec.sandbox[1]) {
+            taskInformation["sandbox_config"] = evalSpec.sandbox[1];
+          }
+        } else {
+          taskInformation["sandbox"] = evalSpec == null ? void 0 : evalSpec.sandbox.type;
+          taskInformation["sandbox_config"] = evalSpec == null ? void 0 : evalSpec.sandbox.config;
+        }
+      }
+      const totalDuration = formatDuration(
+        new Date((evalStats == null ? void 0 : evalStats.started_at) || 0),
+        new Date((evalStats == null ? void 0 : evalStats.completed_at) || 0)
+      );
+      const task_args = (evalSpec == null ? void 0 : evalSpec.task_args) || {};
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { padding: "0.5em 1em 0 1em", width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Task Info" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-card-config", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(styles.grid), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MetaDataView,
+              {
+                className: "text-size-small",
+                entries: taskInformation,
+                tableOptions: "sm"
+              },
+              `plan-md-task`
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MetaDataView,
+              {
+                entries: {
+                  ["Start"]: new Date(
+                    (evalStats == null ? void 0 : evalStats.started_at) || 0
+                  ).toLocaleString(),
+                  ["End"]: new Date(
+                    (evalStats == null ? void 0 : evalStats.completed_at) || 0
+                  ).toLocaleString(),
+                  ["Duration"]: totalDuration
+                },
+                tableOptions: "sm"
+              }
+            )
+          ] }) })
+        ] }),
+        Object.keys(task_args).length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardHeader, { label: "Task Args" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardBody, { id: "task-card-config", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            MetaDataView,
+            {
+              className: "text-size-small",
+              entries: task_args,
+              tableOptions: "sm"
+            },
+            `plan-md-task-args`
+          ) })
+        ] })
+      ] }) });
+    };
     const LogView = () => {
       const divRef = reactExports.useRef(null);
       const refreshLog = useRefreshLog();
@@ -82338,8 +82606,13 @@ Supported expressions:
         evalSpec,
         selectedLogSummary == null ? void 0 : selectedLogSummary.plan,
         selectedLogSummary == null ? void 0 : selectedLogSummary.error,
-        selectedLogSummary == null ? void 0 : selectedLogSummary.results,
-        selectedLogSummary == null ? void 0 : selectedLogSummary.stats
+        selectedLogSummary == null ? void 0 : selectedLogSummary.results
+      );
+      const taskTabConfig = useTaskTabConfig(evalSpec, selectedLogSummary == null ? void 0 : selectedLogSummary.stats);
+      const modelsTabConfig = useModelsTab(
+        evalSpec,
+        selectedLogSummary == null ? void 0 : selectedLogSummary.stats,
+        selectedLogSummary == null ? void 0 : selectedLogSummary.status
       );
       const jsonTabConfig = useJsonTabConfig(
         selectedLogSummary == null ? void 0 : selectedLogSummary.version,
@@ -82352,6 +82625,8 @@ Supported expressions:
       );
       const tabs2 = {
         ...samplesTabConfig ? { samples: samplesTabConfig } : {},
+        task: taskTabConfig,
+        model: modelsTabConfig,
         config: configTabConfig,
         json: jsonTabConfig
       };
@@ -82397,15 +82672,15 @@ Supported expressions:
               showToggle
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: divRef, className: clsx("workspace", styles$O.workspace), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("log-detail", styles$O.tabContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: divRef, className: clsx("workspace", styles$P.workspace), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("log-detail", styles$P.tabContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
             TabSet,
             {
               id: "log-details",
               tools: tabTools2,
               type: "pills",
-              className: clsx(styles$O.tabSet, "text-size-smaller"),
-              tabControlsClassName: clsx(styles$O.tabs, "text-size-smaller"),
-              tabPanelsClassName: clsx(styles$O.tabPanels),
+              className: clsx(styles$P.tabSet, "text-size-smaller"),
+              tabControlsClassName: clsx(styles$P.tabs, "text-size-smaller"),
+              tabPanelsClassName: clsx(styles$P.tabPanels),
               children: Object.keys(tabs2).map((key2) => {
                 const tab2 = tabs2[key2];
                 return /* @__PURE__ */ jsxRuntimeExports.jsx(