inspect-ai 0.3.93__py3-none-any.whl → 0.3.95__py3-none-any.whl

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

@@ -23080,7 +23080,8 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       pendingSampleSummaries: void 0,
       loadedLog: void 0,
       // Filter state
-      filter: {},
+      filter: "",
+      filterError: void 0,
       epoch: "all",
       sort: kDefaultSort,
       score: void 0,
@@ -23115,6 +23116,14 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
           setFilter: (filter) => set2((state) => {
             state.log.filter = filter;
           }),
+          setFilterError: (error2) => set2((state) => {
+            state.log.filterError = error2;
+          }),
+          clearFilterError: () => {
+            set2((state) => {
+              state.log.filterError = void 0;
+            });
+          },
           setEpoch: (epoch) => set2((state) => {
             state.log.epoch = epoch;
           }),
@@ -23128,7 +23137,8 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
             state.log.scores = scores2;
           }),
           resetFiltering: () => set2((state) => {
-            state.log.filter = {};
+            state.log.filter = "";
+            state.log.filterError = void 0;
             state.log.epoch = "all";
             state.log.sort = kDefaultSort;
             state.log.score = void 0;
@@ -24422,12 +24432,12 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       }, [callback]);
       return elementRef;
     };
-    const expandableBordered = "_expandableBordered_1wpxz_1";
-    const expandableCollapsed = "_expandableCollapsed_1wpxz_13";
-    const moreToggle = "_moreToggle_1wpxz_17";
-    const bordered = "_bordered_1wpxz_24";
-    const moreToggleContainer = "_moreToggleContainer_1wpxz_28";
-    const moreToggleButton = "_moreToggleButton_1wpxz_39";
+    const expandableBordered = "_expandableBordered_59eal_1";
+    const expandableCollapsed = "_expandableCollapsed_59eal_13";
+    const moreToggle = "_moreToggle_59eal_17";
+    const bordered = "_bordered_59eal_24";
+    const moreToggleContainer = "_moreToggleContainer_59eal_28";
+    const moreToggleButton = "_moreToggleButton_59eal_39";
     const styles$1j = {
       expandableBordered,
       expandableCollapsed,
@@ -24440,15 +24450,16 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       ({ id, collapse, border, lines = 15, children: children2, className: className2 }) => {
         const [collapsed, setCollapsed] = useCollapsedState(id, collapse);
         const [showToggle, setShowToggle] = reactExports.useState(false);
-        const lineHeightRef = reactExports.useRef(0);
+        const baseFontSizeRef = reactExports.useRef(0);
         const checkOverflow = reactExports.useCallback(
           (entry2) => {
             const element = entry2.target;
-            if (!lineHeightRef.current) {
+            if (baseFontSizeRef.current === 0) {
               const computedStyle = window.getComputedStyle(element);
-              lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16;
+              const rootFontSize = parseFloat(computedStyle.fontSize);
+              baseFontSizeRef.current = rootFontSize;
             }
-            const maxCollapsedHeight = lines * lineHeightRef.current;
+            const maxCollapsedHeight = baseFontSizeRef.current * lines;
             const contentHeight = element.scrollHeight;
             setShowToggle(contentHeight > maxCollapsedHeight);
           },
@@ -41943,7 +41954,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
         has_retries: sample2.retries !== void 0 && sample2.retries > 0
       };
     };
-    const scoreFilterItems = (evalDescriptor) => {
+    const sampleFilterItems = (evalDescriptor) => {
       const items = [];
       const bannedShortNames = bannedShortScoreNames(evalDescriptor.scores);
       const valueToString = (value2) => typeof value2 === "string" ? `"${value2}"` : String(value2);
@@ -42090,7 +42101,8 @@ categories: ${categories.join(" ")}`;
       }
     };
     const filterSamples = (evalDescriptor, samples, filterValue) => {
-      var error2 = void 0;
+      let error2 = void 0;
+      let errorCount = 0;
       const result2 = samples.filter((sample2) => {
         if (filterValue) {
           const { matches, error: sampleError } = filterExpression(
@@ -42099,12 +42111,15 @@ categories: ${categories.join(" ")}`;
             filterValue
           );
           error2 || (error2 = sampleError);
+          if (sampleError) {
+            errorCount++;
+          }
           return matches;
         } else {
           return true;
         }
       });
-      return { result: result2, error: error2 };
+      return { result: result2, error: error2, allErrors: errorCount === samples.length };
     };
     const flex$1 = "_flex_1kye9_1";
     const label$7 = "_label_1kye9_5";
@@ -42381,12 +42396,22 @@ categories: ${categories.join(" ")}`;
       const evalDescriptor = useEvalDescriptor();
       const sampleSummaries = useSampleSummaries();
       const filter = useStore((state) => state.log.filter);
+      const setFilterError = useStore((state) => state.logActions.setFilterError);
+      const clearFilterError = useStore(
+        (state) => state.logActions.clearFilterError
+      );
       const epoch = useStore((state) => state.log.epoch);
       const sort = useStore((state) => state.log.sort);
       const samplesDescriptor = useSampleDescriptor();
       const score2 = useScore();
       return reactExports.useMemo(() => {
-        const prefiltered = evalDescriptor && filter.value ? filterSamples(evalDescriptor, sampleSummaries, filter.value).result : sampleSummaries;
+        const { result: result2, error: error2, allErrors } = evalDescriptor && filter ? filterSamples(evalDescriptor, sampleSummaries, filter) : { result: sampleSummaries, error: void 0, allErrors: false };
+        if (error2 && allErrors) {
+          setFilterError(error2);
+        } else {
+          clearFilterError();
+        }
+        const prefiltered = error2 === void 0 || !allErrors ? result2 : sampleSummaries;
         const filtered = epoch && epoch !== "all" ? prefiltered.filter((sample2) => epoch === String(sample2.epoch)) : prefiltered;
         const sorted = samplesDescriptor ? sortSamples(sort, filtered, samplesDescriptor, score2) : filtered;
         return [...sorted];
@@ -42394,6 +42419,8 @@ categories: ${categories.join(" ")}`;
         evalDescriptor,
         sampleSummaries,
         filter,
+        setFilterError,
+        clearFilterError,
         epoch,
         sort,
         samplesDescriptor,
@@ -44311,7 +44338,7 @@ categories: ${categories.join(" ")}`;
       if (!evalDescriptor) {
         return null;
       }
-      const items = scoreFilterItems(evalDescriptor);
+      const items = sampleFilterItems(evalDescriptor);
       return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { position: "relative" }, children: Array.from(items).map((item2, index2, array) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: item2.tooltip, children: item2.canonicalName }),
         index2 < array.length - 1 ? ", " : ""
@@ -51205,8 +51232,7 @@ self.onmessage = function (e) {
       text: text2,
       icon: icon2,
       collapse,
-      children: children2,
-      running: running2
+      children: children2
     }) => {
       const [isCollapsed, setCollapsed] = useProperty(id, "collapsed", {
         defaultValue: !!collapse
@@ -51302,35 +51328,32 @@ self.onmessage = function (e) {
           ]
         }
       ) : "";
-      const card2 = /* @__PURE__ */ jsxRuntimeExports.jsxs(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}`
-                );
-              })
-            }
-          )
-        ] }),
-        /* @__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) {
@@ -51839,11 +51862,11 @@ 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 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,
@@ -59404,6 +59427,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);
@@ -59426,44 +59456,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) {
@@ -59488,8 +59539,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,
@@ -59498,7 +59573,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,
         {
@@ -59519,7 +59594,7 @@ ${events}
         }
       );
     };
-    const summarize = (children2) => {
+    const summarize$1 = (children2) => {
       if (children2.length === 0) {
         return "(no events)";
       }
@@ -59736,7 +59811,7 @@ ${events}
     const ToolEventView = ({
       id,
       event,
-      depth,
+      children: children2,
       className: className2
     }) => {
       var _a2, _b2;
@@ -59794,20 +59869,157 @@ ${events}
               ) : "",
               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";
@@ -59824,10 +60036,10 @@ ${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 darkenedBg = "_darkenedBg_u9na2_1";
+    const normalBg = "_normalBg_u9na2_5";
+    const node = "_node_u9na2_9";
+    const attached = "_attached_u9na2_14";
     const styles$d = {
       darkenedBg,
       normalBg,
@@ -59873,9 +60085,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];
@@ -59885,20 +60099,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,
@@ -60016,6 +60349,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,
@@ -60053,7 +60396,7 @@ ${events}
                 id,
                 event: node2.event,
                 className: className2,
-                depth: node2.depth
+                children: node2.children
               }
             );
           case "input":
@@ -80985,14 +81328,6 @@ Supported expressions:
         overflow: "hidden"
       }
     });
-    const getFilteringResult = (evalDescriptor, sampleSummaries, filterValue) => {
-      const { result: result2, error: error2 } = filterSamples(
-        evalDescriptor,
-        sampleSummaries,
-        filterValue
-      );
-      return { numSamples: result2.length, error: error2 };
-    };
     const ensureOneLine = (tr2) => {
       const newDoc = tr2.newDoc.toString();
       if (!newDoc.includes("\n")) return tr2;
@@ -81021,11 +81356,7 @@ Supported expressions:
         }
       ];
     };
-    const SampleFilter = ({
-      samples,
-      scoreFilter,
-      setScoreFilter
-    }) => {
+    const SampleFilter = () => {
       const editorRef = reactExports.useRef(null);
       const editorViewRef = reactExports.useRef(null);
       const linterCompartment = reactExports.useRef(new Compartment());
@@ -81033,41 +81364,50 @@ Supported expressions:
       const updateListenerCompartment = reactExports.useRef(new Compartment());
       const evalDescriptor = useEvalDescriptor();
       const filterItems = reactExports.useMemo(
-        () => evalDescriptor ? scoreFilterItems(evalDescriptor) : [],
+        () => evalDescriptor ? sampleFilterItems(evalDescriptor) : [],
         [evalDescriptor]
       );
-      const [filteringResultInstant, setFilteringResultInstant] = reactExports.useState(null);
-      const handleFocus = (event, view) => {
+      const filter = useStore((state) => state.log.filter);
+      const filterError = useStore((state) => state.log.filterError);
+      const setFilter = useStore((state) => state.logActions.setFilter);
+      const handleFocus = reactExports.useCallback((event, view) => {
         if (event.isTrusted && view.state.doc.toString() === "") {
           setTimeout(() => startCompletion(view), 0);
         }
-      };
-      const makeAutocompletion = () => autocompletion({
-        override: [(context) => getCompletions(context, filterItems)],
-        activateOnCompletion: (c2) => c2.label.endsWith(" ")
-      });
-      const makeLinter = () => linter((view) => getLints(view, filteringResultInstant == null ? void 0 : filteringResultInstant.error));
-      const makeUpdateListener = () => EditorView.updateListener.of((update) => {
-        if (update.docChanged && evalDescriptor) {
-          const newValue = update.state.doc.toString();
-          const filteringResult = getFilteringResult(
-            evalDescriptor,
-            samples,
-            newValue
-          );
-          if (!filteringResult.error) {
-            setScoreFilter({ value: newValue });
+      }, []);
+      const makeAutocompletion = reactExports.useCallback(
+        () => autocompletion({
+          override: [(context) => getCompletions(context, filterItems)],
+          activateOnCompletion: (c2) => c2.label.endsWith(" ")
+        }),
+        []
+      );
+      const makeLinter = reactExports.useCallback(
+        () => linter((view) => getLints(view, filterError)),
+        [filterError]
+      );
+      const debounceSetFilter = reactExports.useCallback(
+        debounce$1((value2) => {
+          setFilter(value2);
+        }, 200),
+        [setFilter]
+      );
+      const makeUpdateListener = reactExports.useCallback(
+        () => EditorView.updateListener.of((update) => {
+          if (update.docChanged && evalDescriptor) {
+            const newValue = update.state.doc.toString();
+            debounceSetFilter(newValue);
           }
-          setFilteringResultInstant(filteringResult);
-        }
-      });
+        }),
+        [setFilter]
+      );
       reactExports.useEffect(() => {
         var _a2;
         (_a2 = editorViewRef.current) == null ? void 0 : _a2.destroy();
         editorViewRef.current = new EditorView({
           parent: editorRef.current ?? void 0,
           state: EditorState.create({
-            doc: scoreFilter.value || "",
+            doc: filter || "",
             extensions: [
               minimalSetup,
               bracketMatching(),
@@ -81090,20 +81430,15 @@ Supported expressions:
       reactExports.useEffect(() => {
         if (!editorViewRef.current) return;
         const currentValue = editorViewRef.current.state.doc.toString();
-        if (scoreFilter.value === currentValue) return;
-        if (evalDescriptor) {
-          setFilteringResultInstant(
-            getFilteringResult(evalDescriptor, samples, scoreFilter.value || "")
-          );
-        }
+        if (filter === currentValue) return;
         editorViewRef.current.dispatch({
           changes: {
             from: 0,
             to: currentValue.length,
-            insert: scoreFilter.value || ""
+            insert: filter || ""
           }
         });
-      }, [evalDescriptor, scoreFilter.value]);
+      }, [filter]);
       reactExports.useEffect(() => {
         var _a2;
         (_a2 = editorViewRef.current) == null ? void 0 : _a2.dispatch({
@@ -81121,7 +81456,7 @@ Supported expressions:
         (_a2 = editorViewRef.current) == null ? void 0 : _a2.dispatch({
           effects: linterCompartment.current.reconfigure(makeLinter())
         });
-      }, [filteringResultInstant == null ? void 0 : filteringResultInstant.error]);
+      }, [filterError]);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
@@ -81140,10 +81475,7 @@ Supported expressions:
           "div",
           {
             ref: editorRef,
-            className: clsx(
-              (filteringResultInstant == null ? void 0 : filteringResultInstant.error) && "filter-pending",
-              styles$9.input
-            )
+            className: clsx(filterError && "filter-pending", styles$9.input)
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81171,20 +81503,16 @@ Supported expressions:
       score: score2,
       setScore
     }) => {
-      const scorers = scores2.reduce((accum, scorer2) => {
-        if (!accum.find((sc) => {
-          return scorer2.scorer === sc.scorer;
-        })) {
-          accum.push(scorer2);
-        }
-        return accum;
-      }, []);
-      const handleSelectScore = reactExports.useCallback(
-        (index2) => {
-          setScore(scores2[index2]);
-        },
-        [setScore, scores2]
-      );
+      const scorers = reactExports.useMemo(() => {
+        return scores2.reduce((accum, scorer2) => {
+          if (!accum.find((sc) => {
+            return scorer2.scorer === sc.scorer;
+          })) {
+            accum.push(scorer2);
+          }
+          return accum;
+        }, []);
+      }, [scores2]);
       if (scorers.length === 1) {
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$8.flex, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81204,8 +81532,8 @@ Supported expressions:
             ScoreSelector,
             {
               scores: scores2,
-              selectedIndex: scoreIndex(scores2, score2),
-              setSelectedIndex: handleSelectScore
+              selectedScore: score2,
+              setSelectedScore: setScore
             }
           )
         ] });
@@ -81232,8 +81560,8 @@ Supported expressions:
             ScorerSelector,
             {
               scorers,
-              selectedIndex: scorerIndex(scorers, score2),
-              setSelectedIndex: handleSelectScore
+              selectedScore: score2,
+              setSelectedScore: setScore
             }
           ),
           scorerScores.length > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -81241,8 +81569,8 @@ Supported expressions:
             {
               className: clsx(styles$8.secondSel),
               scores: scorerScores,
-              selectedIndex: scoreIndex(scorerScores, score2),
-              setSelectedIndex: handleSelectScore
+              selectedScore: score2,
+              setSelectedScore: setScore
             }
           ) : void 0
         ] });
@@ -81250,17 +81578,20 @@ Supported expressions:
     };
     const ScoreSelector = ({
       scores: scores2,
-      selectedIndex,
-      setSelectedIndex,
+      selectedScore,
+      setSelectedScore,
       className: className2
     }) => {
       const handleChange = reactExports.useCallback(
         (e) => {
           const sel = e.target;
-          setSelectedIndex(sel.selectedIndex);
+          setSelectedScore(scores2[sel.selectedIndex]);
         },
-        [setSelectedIndex]
+        [setSelectedScore, scores2]
       );
+      const index2 = scores2.findIndex((sc) => {
+        return selectedScore && sc.name === selectedScore.name && sc.scorer === selectedScore.scorer;
+      });
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "select",
         {
@@ -81271,7 +81602,7 @@ Supported expressions:
             className2
           ),
           "aria-label": ".select-scorer-label",
-          value: scores2[selectedIndex].name,
+          value: scores2[index2].name,
           onChange: handleChange,
           children: scores2.map((score2) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: score2.name, children: score2.name }, score2.name);
@@ -81281,22 +81612,25 @@ Supported expressions:
     };
     const ScorerSelector = ({
       scorers,
-      selectedIndex,
-      setSelectedIndex
+      selectedScore,
+      setSelectedScore
     }) => {
       const handleChange = reactExports.useCallback(
         (e) => {
           const sel = e.target;
-          setSelectedIndex(sel.selectedIndex);
+          setSelectedScore(scorers[sel.selectedIndex]);
         },
-        [setSelectedIndex]
+        [setSelectedScore, scorers]
       );
+      const index2 = scorers.findIndex((sc) => {
+        return selectedScore && sc.scorer === selectedScore.scorer;
+      });
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "select",
         {
           className: clsx("form-select", "form-select-sm", "text-size-smaller"),
           "aria-label": ".epoch-filter-label",
-          value: scorers[selectedIndex].scorer,
+          value: scorers[index2].scorer,
           onChange: handleChange,
           children: scorers.map((scorer2) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: scorer2.scorer, children: scorer2.scorer }, scorer2.scorer);
@@ -81304,16 +81638,8 @@ Supported expressions:
         }
       );
     };
-    const scoreIndex = (scores2, score2) => scores2.findIndex((sc) => {
-      return score2 && sc.name === score2.name && sc.scorer === score2.scorer;
-    });
-    const scorerIndex = (scores2, score2) => scores2.findIndex((sc) => {
-      return score2 && sc.scorer === score2.scorer;
-    });
-    const SampleTools = ({ samples }) => {
+    const SampleTools = () => {
       const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
-      const filter = useStore((state) => state.log.filter);
-      const setFilter = useStore((state) => state.logActions.setFilter);
       const scores2 = useScores();
       const score2 = useScore();
       const setScore = useStore((state) => state.logActions.setScore);
@@ -81323,14 +81649,7 @@ Supported expressions:
       const setSort = useStore((state) => state.logActions.setSort);
       const epochs = (selectedLogSummary == null ? void 0 : selectedLogSummary.eval.config.epochs) || 1;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SampleFilter,
-          {
-            samples,
-            scoreFilter: filter,
-            setScoreFilter: setFilter
-          }
-        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SampleFilter, {}),
         (scores2 == null ? void 0 : scores2.length) > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(SelectScorer, { scores: scores2, score: score2, setScore }) : void 0,
         epochs > 1 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EpochFilter, { epoch, setEpoch, epochs }) : void 0,
         /* @__PURE__ */ jsxRuntimeExports.jsx(SortFilter, { sort, setSort, epochs })
@@ -82026,13 +82345,7 @@ Supported expressions:
             running: evalStatus === "started"
           },
           tools: () => !samplesDescriptor ? void 0 : totalSampleCount === 1 ? [/* @__PURE__ */ jsxRuntimeExports.jsx(ScoreFilterTools, {})] : [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SampleTools,
-              {
-                samples: sampleSummaries || []
-              },
-              "sample-tools"
-            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SampleTools, {}, "sample-tools"),
             evalStatus === "started" && !streamSamples && /* @__PURE__ */ jsxRuntimeExports.jsx(
               ToolButton,
               {