inspect-ai 0.3.99__py3-none-any.whl → 0.3.101__py3-none-any.whl

inspect_ai/_view/www/src/app/samples/transcript/ToolEventView.tsx

@@ -28,7 +28,6 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
   className,
 }) => {
   const event = eventNode.event;
-  const id = eventNode.id;
 
   // Extract tool input
   const { input, functionCall, highlightLanguage } = useMemo(
@@ -56,7 +55,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
   const title = `Tool: ${event.view?.title || event.function}`;
   return (
     <EventPanel
-      id={id}
+      eventNodeId={eventNode.id}
       depth={eventNode.depth}
       title={formatTitle(title, undefined, event.working_time)}
       className={className}
@@ -67,7 +66,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
     >
       <div data-name="Summary" className={styles.summary}>
         <ToolCallView
-          id={`${id}-tool-call`}
+          id={`${eventNode.id}-tool-call`}
           functionCall={functionCall}
           input={input}
           highlightLanguage={highlightLanguage}
@@ -78,7 +77,7 @@ export const ToolEventView: FC<ToolEventViewProps> = ({
 
         {lastModelNode ? (
           <ChatView
-            id={`${id}-toolcall-chatmessage`}
+            id={`${eventNode.id}-toolcall-chatmessage`}
             messages={lastModelNode.event.output.choices.map((m) => m.message)}
             numbered={false}
             toolCallStyle="compact"

inspect_ai/_view/www/src/app/samples/transcript/TranscriptPanel.module.css

@@ -0,0 +1,42 @@
+.container {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 180px 1fr;
+  min-height: 100vh;
+  transition: grid-template-columns 0.3s ease;
+}
+
+.container.collapsed {
+  grid-template-columns: 1.5em 1fr;
+}
+
+.treeContainer {
+  padding: 0.5em;
+  border-right: solid 1px var(--bs-light-border-subtle);
+  width: 100%;
+  height: 100%;
+}
+
+.collapsed .treeContainer {
+  border-top: solid 1px var(--bs-light-border-subtle);
+}
+
+.listContainer {
+  background-color: var(--bs-body-bg);
+}
+
+.outline {
+  margin-bottom: 1em;
+}
+
+.outlineToggle {
+  cursor: pointer;
+  font-size: 0.8em;
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+}
+
+.collapsed .outline {
+  display: none;
+}

inspect_ai/_view/www/src/app/samples/transcript/TranscriptPanel.tsx

@@ -0,0 +1,77 @@
+import clsx from "clsx";
+import { FC, memo, RefObject } from "react";
+import { useParams } from "react-router-dom";
+import { Events } from "../../../@types/log";
+import { StickyScroll } from "../../../components/StickyScroll";
+import { useCollapsedState } from "../../../state/hooks";
+import { ApplicationIcons } from "../../appearance/icons";
+import { TranscriptOutline } from "./outline/TranscriptOutline";
+import styles from "./TranscriptPanel.module.css";
+import { TranscriptVirtualList } from "./TranscriptVirtualList";
+import { useEventNodes } from "./transform/hooks";
+
+interface TranscriptPanelProps {
+  id: string;
+  events: Events;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  running?: boolean;
+  initialEventId?: string | null;
+  topOffset?: number;
+}
+
+/**
+ * Renders the Transcript Virtual List.
+ */
+export const TranscriptPanel: FC<TranscriptPanelProps> = memo((props) => {
+  let { id, scrollRef, events, running, initialEventId, topOffset } = props;
+
+  const { eventNodes, defaultCollapsedIds } = useEventNodes(
+    events,
+    running === true,
+  );
+  const { logPath } = useParams<{ logPath: string }>();
+
+  const [collapsed, setCollapsed] = useCollapsedState(
+    `transcript-panel-${logPath || "na"}`,
+    false,
+  );
+
+  return (
+    <div
+      className={clsx(
+        styles.container,
+        collapsed ? styles.collapsed : undefined,
+      )}
+    >
+      <StickyScroll
+        scrollRef={scrollRef}
+        className={styles.treeContainer}
+        offsetTop={topOffset}
+      >
+        <TranscriptOutline
+          className={clsx(styles.outline)}
+          eventNodes={eventNodes}
+          running={running}
+          defaultCollapsedIds={defaultCollapsedIds}
+          scrollRef={scrollRef}
+        />
+        <div
+          className={styles.outlineToggle}
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <i className={ApplicationIcons.sidebar} />
+        </div>
+      </StickyScroll>
+      <TranscriptVirtualList
+        id={id}
+        eventNodes={eventNodes}
+        defaultCollapsedIds={defaultCollapsedIds}
+        scrollRef={scrollRef}
+        running={running}
+        initialEventId={initialEventId === undefined ? null : initialEventId}
+        offsetTop={topOffset}
+        className={styles.listContainer}
+      />
+    </div>
+  );
+});

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualList.tsx

@@ -2,7 +2,6 @@ import { FC, memo, RefObject, useEffect, useMemo } from "react";
 import {
   ApprovalEvent,
   ErrorEvent,
-  Events,
   InfoEvent,
   InputEvent,
   LoggerEvent,
@@ -32,20 +31,22 @@ import { StateEventView } from "./state/StateEventView";
 import { StepEventView } from "./StepEventView";
 import { SubtaskEventView } from "./SubtaskEventView";
 import { ToolEventView } from "./ToolEventView";
-import { EventNode } from "./types";
+import { EventNode, kTranscriptCollapseScope } from "./types";
 
 import { useStore } from "../../../state/store";
 import { SpanEventView } from "./SpanEventView";
 import { TranscriptVirtualListComponent } from "./TranscriptVirtualListComponent";
-import { fixupEventStream, kSandboxSignalName } from "./transform/fixups";
-import { flatTree, treeifyEvents } from "./transform/treeify";
+import { flatTree } from "./transform/treeify";
 
 interface TranscriptVirtualListProps {
   id: string;
-  events: Events;
+  eventNodes: EventNode[];
+  defaultCollapsedIds: Record<string, boolean>;
   initialEventId: string | null;
+  offsetTop?: number;
   scrollRef: RefObject<HTMLDivElement | null>;
   running?: boolean;
+  className?: string | string[];
 }
 
 /**
@@ -53,7 +54,16 @@ interface TranscriptVirtualListProps {
  */
 export const TranscriptVirtualList: FC<TranscriptVirtualListProps> = memo(
   (props) => {
-    let { id, scrollRef, events, running, initialEventId } = props;
+    let {
+      id,
+      scrollRef,
+      eventNodes,
+      defaultCollapsedIds,
+      running,
+      initialEventId,
+      offsetTop,
+      className,
+    } = props;
 
     // The list of events that have been collapsed
     const collapsedEvents = useStore((state) => state.sample.collapsedEvents);
@@ -61,93 +71,39 @@ export const TranscriptVirtualList: FC<TranscriptVirtualListProps> = memo(
       (state) => state.sampleActions.setCollapsedEvents,
     );
 
-    // Normalize Events in a flattened filtered list
-    const { eventNodes, defaultCollapsedIds } = useMemo(() => {
-      // Apply fixups to the event string
-      const resolvedEvents = fixupEventStream(events, !running);
-
-      // Build the event tree
-      const eventTree = treeifyEvents(resolvedEvents, 0);
-
-      // Apply collapse filters to the event tree
-      const defaultCollapsedIds: Record<string, true> = {};
-      const findCollapsibleEvents = (nodes: EventNode[]) => {
-        for (const node of nodes) {
-          if (
-            (node.event.event === "step" ||
-              node.event.event === "span_begin" ||
-              node.event.event === "tool" ||
-              node.event.event === "subtask") &&
-            collapseFilters.some((filter) =>
-              filter(
-                node.event as
-                  | StepEvent
-                  | SpanBeginEvent
-                  | ToolEvent
-                  | SubtaskEvent,
-              ),
-            )
-          ) {
-            defaultCollapsedIds[node.id] = true;
-          }
-
-          // Recursively check children
-          findCollapsibleEvents(node.children);
-        }
-      };
-      findCollapsibleEvents(eventTree);
-
+    const flattenedNodes = useMemo(() => {
       // flattten the event tree
-      const eventNodes = flatTree(
-        eventTree,
-        collapsedEvents || defaultCollapsedIds,
+      return flatTree(
+        eventNodes,
+        (collapsedEvents
+          ? collapsedEvents[kTranscriptCollapseScope]
+          : undefined) || defaultCollapsedIds,
       );
-
-      return { eventNodes, defaultCollapsedIds };
-    }, [events, running, collapsedEvents]);
+    }, [eventNodes, collapsedEvents, defaultCollapsedIds]);
 
     // Update the collapsed events when the default collapsed IDs change
     // This effect only depends on defaultCollapsedIds, not eventNodes
     useEffect(() => {
       // Only initialize collapsedEvents if it's empty
       if (!collapsedEvents && Object.keys(defaultCollapsedIds).length > 0) {
-        setCollapsedEvents(defaultCollapsedIds);
+        setCollapsedEvents(kTranscriptCollapseScope, defaultCollapsedIds);
       }
     }, [defaultCollapsedIds, collapsedEvents, setCollapsedEvents]);
 
     return (
       <TranscriptVirtualListComponent
         id={id}
-        eventNodes={eventNodes}
+        eventNodes={flattenedNodes}
         initialEventId={initialEventId}
+        offsetTop={offsetTop}
         scrollRef={scrollRef}
         running={running}
+        className={className}
       />
     );
   },
 );
 
-const collapseFilters: Array<
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => boolean
-> = [
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.type === "solver" && event.name === "system_message",
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) => {
-    if (event.event === "step" || event.event === "span_begin") {
-      return (
-        event.name === kSandboxSignalName ||
-        event.name === "init" ||
-        event.name === "sample_init"
-      );
-    }
-    return false;
-  },
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.event === "tool" && !event.agent && !event.failed,
-  (event: StepEvent | SpanBeginEvent | ToolEvent | SubtaskEvent) =>
-    event.event === "subtask",
-];
-
 interface RenderedEventNodeProps {
   node: EventNode;
   className?: string | string[];

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualListComponent.module.css

@@ -1,9 +1,19 @@
 .node {
-  padding-top: 0.7rem;
-  padding-bottom: 1px;
+  padding-top: 0.8rem;
 }
 
 .attached {
   padding-top: 0rem;
-  margin-top: -8px;
+}
+
+.attachedParent {
+  padding-bottom: 0px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+
+.attachedChild {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }

inspect_ai/_view/www/src/app/samples/transcript/TranscriptVirtualListComponent.tsx

@@ -10,8 +10,10 @@ interface TranscriptVirtualListComponentProps {
   id: string;
   eventNodes: EventNode[];
   initialEventId?: string | null;
+  offsetTop?: number;
   scrollRef?: RefObject<HTMLDivElement | null>;
   running?: boolean;
+  className?: string | string[];
 }
 
 /**
@@ -19,7 +21,15 @@ interface TranscriptVirtualListComponentProps {
  */
 export const TranscriptVirtualListComponent: FC<
   TranscriptVirtualListComponentProps
-> = ({ id, eventNodes, scrollRef, running, initialEventId }) => {
+> = ({
+  id,
+  eventNodes,
+  scrollRef,
+  running,
+  initialEventId,
+  offsetTop,
+  className,
+}) => {
   const initialEventIndex = useMemo(() => {
     if (initialEventId === null || initialEventId === undefined) {
       return undefined;
@@ -35,14 +45,24 @@ export const TranscriptVirtualListComponent: FC<
       const paddingClass = index === 0 ? styles.first : undefined;
 
       const previousIndex = index - 1;
+      const nextIndex = index + 1;
       const previous =
         previousIndex > 0 && previousIndex <= eventNodes.length
           ? eventNodes[previousIndex]
           : undefined;
+      const next =
+        nextIndex < eventNodes.length ? eventNodes[nextIndex] : undefined;
       const attached =
         item.event.event === "tool" &&
         (previous?.event.event === "tool" || previous?.event.event === "model");
+
+      const attachedParent =
+        item.event.event === "model" && next?.event.event === "tool";
       const attachedClass = attached ? styles.attached : undefined;
+      const attachedChildClass = attached ? styles.attachedChild : undefined;
+      const attachedParentClass = attachedParent
+        ? styles.attachedParent
+        : undefined;
 
       return (
         <div
@@ -54,7 +74,10 @@ export const TranscriptVirtualListComponent: FC<
             paddingRight: `${item.depth === 0 ? undefined : ".7em"} `,
           }}
         >
-          <RenderedEventNode node={item} />
+          <RenderedEventNode
+            node={item}
+            className={clsx(attachedParentClass, attachedChildClass)}
+          />
         </div>
       );
     },
@@ -63,10 +86,12 @@ export const TranscriptVirtualListComponent: FC<
 
   return (
     <LiveVirtualList<EventNode>
+      className={className}
       id={id}
       scrollRef={scrollRef}
       data={eventNodes}
       initialTopMostItemIndex={initialEventIndex}
+      offsetTop={offsetTop}
       renderRow={renderRow}
       live={running}
     />

inspect_ai/_view/www/src/app/samples/transcript/event/EventPanel.module.css

@@ -32,6 +32,7 @@
 
 .copyLink {
   font-size: 1.2em;
+  height: 1em;
   opacity: 0;
   padding-left: 0.2em;
   padding-right: 2em;

inspect_ai/_view/www/src/app/samples/transcript/event/EventPanel.tsx

@@ -10,18 +10,18 @@ import {
 import { ApplicationIcons } from "../../../appearance/icons";
 import { EventNavs } from "./EventNavs";
 
-import { useParams } from "react-router-dom";
 import { CopyButton } from "../../../../components/CopyButton";
 import { useCollapseSampleEvent, useProperty } from "../../../../state/hooks";
 import {
-  sampleEventUrl,
   supportsLinking,
   toFullUrl,
+  useSampleEventUrl,
 } from "../../../routing/url";
+import { kTranscriptCollapseScope } from "../types";
 import styles from "./EventPanel.module.css";
 
 interface EventPanelProps {
-  id: string;
+  eventNodeId: string;
   depth: number;
   className?: string | string[];
   title?: string;
@@ -42,7 +42,7 @@ interface ChildProps {
  * Renders the StateEventView component.
  */
 export const EventPanel: FC<EventPanelProps> = ({
-  id,
+  eventNodeId,
   depth,
   className,
   title,
@@ -54,26 +54,21 @@ export const EventPanel: FC<EventPanelProps> = ({
   collapsibleContent,
   collapseControl = "top",
 }) => {
-  const [collapsed, setCollapsed] = useCollapseSampleEvent(id);
+  const [collapsed, setCollapsed] = useCollapseSampleEvent(
+    kTranscriptCollapseScope,
+    eventNodeId,
+  );
   const isCollapsible = (childIds || []).length > 0 || collapsibleContent;
   const useBottomDongle = isCollapsible && collapseControl === "bottom";
 
-  // Get all URL parameters at component level
-  const { logPath, sampleId, epoch } = useParams<{
-    logPath?: string;
-    tabId?: string;
-    sampleId?: string;
-    epoch?: string;
-  }>();
-
+  const sampleEventUrl = useSampleEventUrl(eventNodeId);
   const url =
-    logPath && supportsLinking()
-      ? toFullUrl(sampleEventUrl(id, logPath, sampleId, epoch))
-      : undefined;
+    supportsLinking() && sampleEventUrl ? toFullUrl(sampleEventUrl) : undefined;
 
   const pillId = (index: number) => {
-    return `${id}-nav-pill-${index}`;
+    return `${eventNodeId}-nav-pill-${index}`;
   };
+
   const filteredArrChildren = (
     Array.isArray(children) ? children : [children]
   ).filter((child) => !!child);
@@ -83,9 +78,13 @@ export const EventPanel: FC<EventPanelProps> = ({
   });
   const defaultPillId = defaultPill !== -1 ? pillId(defaultPill) : pillId(0);
 
-  const [selectedNav, setSelectedNav] = useProperty(id, "selectedNav", {
-    defaultValue: defaultPillId,
-  });
+  const [selectedNav, setSelectedNav] = useProperty(
+    eventNodeId,
+    "selectedNav",
+    {
+      defaultValue: defaultPillId,
+    },
+  );
 
   const gridColumns = [];
 
@@ -186,7 +185,7 @@ export const EventPanel: FC<EventPanelProps> = ({
                     ? (child.props as ChildProps)["data-name"] || defaultTitle
                     : defaultTitle;
                 return {
-                  id: `eventpanel-${id}-${index}`,
+                  id: `eventpanel-${eventNodeId}-${index}`,
                   title: title,
                   target: pillId(index),
                 };
@@ -205,7 +204,7 @@ export const EventPanel: FC<EventPanelProps> = ({
 
   const card = (
     <div
-      id={id}
+      id={`event-panel-${eventNodeId}`}
       className={clsx(
         className,
         styles.card,

inspect_ai/_view/www/src/app/samples/transcript/outline/OutlineRow.module.css

@@ -0,0 +1,45 @@
+.eventRow {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  column-gap: 3px;
+  cursor: pointer;
+}
+
+.eventRow.selected {
+  font-weight: 800;
+}
+
+.eventRow .toggle {
+  font-size: 0.7em;
+  margin-top: 4px;
+}
+
+.eventLink {
+  color: var(--bs-body);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.eventLink:hover {
+  text-decoration: underline;
+  color: var(--bs-link-hover-color);
+}
+
+.label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon {
+  margin-right: 3px;
+}
+
+.progress {
+  margin-left: 0.3em !important;
+}
+
+.popover {
+  min-width: 300px;
+  max-width: 80%;
+}