inspect-ai 0.3.96__py3-none-any.whl → 0.3.98__py3-none-any.whl

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

@@ -24,10 +24,10 @@ import { usePrismHighlight } from "../../../state/hooks";
 import styles from "./ModelEventView.module.css";
 import { EventTimingPanel } from "./event/EventTimingPanel";
 import { formatTiming, formatTitle } from "./event/utils";
+import { EventNode } from "./types";
 
 interface ModelEventViewProps {
-  id: string;
-  event: ModelEvent;
+  eventNode: EventNode<ModelEvent>;
   className?: string | string[];
 }
 
@@ -35,10 +35,10 @@ interface ModelEventViewProps {
  * Renders the StateEventView component.
  */
 export const ModelEventView: FC<ModelEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   const totalUsage = event.output.usage?.total_tokens;
   const callTime = event.output.time;
 
@@ -69,7 +69,8 @@ export const ModelEventView: FC<ModelEventViewProps> = ({
 
   return (
     <EventPanel
-      id={id}
+      id={eventNode.id}
+      depth={eventNode.depth}
       className={className}
       title={formatTitle(panelTitle, totalUsage, callTime)}
       subTitle={formatTiming(event.timestamp, event.working_start)}
@@ -77,7 +78,7 @@ export const ModelEventView: FC<ModelEventViewProps> = ({
     >
       <div data-name="Summary" className={styles.container}>
         <ChatView
-          id={`${id}-model-output`}
+          id={`${eventNode.id}-model-output`}
           messages={[...userMessages, ...(outputMessages || [])]}
           numbered={false}
           toolCallStyle="omit"
@@ -117,7 +118,7 @@ export const ModelEventView: FC<ModelEventViewProps> = ({
 
         <EventSection title="Messages">
           <ChatView
-            id={`${id}-model-input-full`}
+            id={`${eventNode.id}-model-input-full`}
             messages={[...event.input, ...(outputMessages || [])]}
           />
         </EventSection>
@@ -212,7 +213,9 @@ const ToolsConfig: FC<ToolConfigProps> = ({ tools, toolChoice }) => {
 
   return (
     <>
-      <div className={styles.toolConfig}>{toolEls}</div>
+      <div className={clsx(styles.toolConfig, "text-size-small")}>
+        {toolEls}
+      </div>
       <div className={styles.toolChoice}>
         <div className={clsx("text-style-label", "text-style-secondary")}>
           Tool Choice

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

@@ -8,12 +8,13 @@ import { ChatView } from "../chat/ChatView";
 import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
 
+import clsx from "clsx";
 import { FC } from "react";
 import styles from "./SampleInitEventView.module.css";
+import { EventNode } from "./types";
 
 interface SampleInitEventViewProps {
-  id: string;
-  event: SampleInitEvent;
+  eventNode: EventNode<SampleInitEvent>;
   className?: string | string[];
 }
 
@@ -21,17 +22,17 @@ interface SampleInitEventViewProps {
  * Renders the SampleInitEventView component.
  */
 export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   const stateObj = event.state as Record<string, unknown>;
 
   const sections = [];
 
   if (event.sample.files && Object.keys(event.sample.files).length > 0) {
     sections.push(
-      <EventSection title="Files" key={`sample-${id}-init-files`}>
+      <EventSection title="Files" key={`event-${eventNode.id}`}>
         {Object.keys(event.sample.files).map((file) => {
           return (
             <pre key={`sample-init-file-${file}`} className={styles.noMargin}>
@@ -45,7 +46,7 @@ export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
 
   if (event.sample.setup) {
     sections.push(
-      <EventSection title="Setup" key={`sample-${id}-init-setup`}>
+      <EventSection title="Setup" key={`${eventNode.id}-section-setup`}>
         <pre className={styles.code}>
           <code className="sourceCode">{event.sample.setup}</code>
         </pre>
@@ -55,7 +56,8 @@ export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
 
   return (
     <EventPanel
-      id={id}
+      id={eventNode.id}
+      depth={eventNode.depth}
       className={className}
       title="Sample"
       icon={ApplicationIcons.sample}
@@ -81,7 +83,11 @@ export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
           {event.sample.target ? (
             <EventSection title="Target">
               {toArray(event.sample.target).map((target) => {
-                return <div key={target}>{target}</div>;
+                return (
+                  <div key={target} className={clsx("text-size-base")}>
+                    {target}
+                  </div>
+                );
               })}
             </EventSection>
           ) : undefined}

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

@@ -2,10 +2,10 @@ import { FC } from "react";
 import { SampleLimitEvent, Type10 } from "../../../@types/log";
 import { ApplicationIcons } from "../../appearance/icons";
 import { EventPanel } from "./event/EventPanel";
+import { EventNode } from "./types";
 
 interface SampleLimitEventViewProps {
-  id: string;
-  event: SampleLimitEvent;
+  eventNode: EventNode<SampleLimitEvent>;
   className?: string | string[];
 }
 
@@ -13,8 +13,7 @@ interface SampleLimitEventViewProps {
  * Renders the InfoEventView component.
  */
 export const SampleLimitEventView: FC<SampleLimitEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
   const resolve_title = (type: Type10) => {
@@ -51,12 +50,18 @@ export const SampleLimitEventView: FC<SampleLimitEventViewProps> = ({
     }
   };
 
-  const title = resolve_title(event.type);
-  const icon = resolve_icon(event.type);
+  const title = resolve_title(eventNode.event.type);
+  const icon = resolve_icon(eventNode.event.type);
 
   return (
-    <EventPanel id={id} title={title} icon={icon} className={className}>
-      {event.message}
+    <EventPanel
+      id={eventNode.id}
+      depth={eventNode.depth}
+      title={title}
+      icon={icon}
+      className={className}
+    >
+      {eventNode.event.message}
     </EventPanel>
   );
 };

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

@@ -1,6 +1,5 @@
 import { SandboxEvent } from "../../../@types/log";
 import ExpandablePanel from "../../../components/ExpandablePanel";
-import { MarkdownDiv } from "../../../components/MarkdownDiv";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MetaDataGrid } from "../../content/MetaDataGrid";
 import { EventPanel } from "./event/EventPanel";
@@ -8,12 +7,13 @@ import { EventSection } from "./event/EventSection";
 
 import clsx from "clsx";
 import { FC } from "react";
+import { RenderedContent } from "../../content/RenderedContent";
 import styles from "./SandboxEventView.module.css";
 import { formatTiming } from "./event/utils";
+import { EventNode } from "./types";
 
 interface SandboxEventViewProps {
-  id: string;
-  event: SandboxEvent;
+  eventNode: EventNode<SandboxEvent>;
   className?: string | string[];
 }
 
@@ -21,13 +21,15 @@ interface SandboxEventViewProps {
  * Renders the SandboxEventView component.
  */
 export const SandboxEventView: FC<SandboxEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       className={className}
       title={`Sandbox: ${event.action}`}
       icon={ApplicationIcons.sandbox}
@@ -57,7 +59,7 @@ const ExecView: FC<ExecViewProps> = ({ id, event }) => {
   const options = event.options;
   const input = event.input;
   const result = event.result;
-  const output = event.output;
+  const output = event.output ? event.output.trim() : undefined;
 
   return (
     <div className={clsx(styles.exec)}>
@@ -78,16 +80,23 @@ const ExecView: FC<ExecViewProps> = ({ id, event }) => {
           ) : undefined}
         </div>
       </EventSection>
-      <EventSection title={`Result`}>
-        {output ? (
-          <ExpandablePanel id={`${id}-output`} collapse={false}>
-            <MarkdownDiv markdown={output} />
-          </ExpandablePanel>
-        ) : undefined}
-        {result !== 0 ? (
-          <div className={clsx(styles.result)}>Exited with code {result}</div>
-        ) : undefined}
-      </EventSection>
+      {output || (result !== null && result !== 0) ? (
+        <EventSection title={`Result`}>
+          {output ? (
+            <ExpandablePanel id={`${id}-output`} collapse={false}>
+              <RenderedContent
+                id={`${id}-output-content`}
+                entry={{ name: "sandbox_output", value: output }}
+              />
+            </ExpandablePanel>
+          ) : undefined}
+          {result !== 0 ? (
+            <div className={clsx(styles.result, "text-size-base")}>
+              (exited with code {result})
+            </div>
+          ) : undefined}
+        </EventSection>
+      ) : undefined}
     </div>
   );
 };

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

@@ -8,10 +8,10 @@ import { EventPanel } from "./event/EventPanel";
 
 import clsx from "clsx";
 import styles from "./ScoreEventView.module.css";
+import { EventNode } from "./types";
 
 interface ScoreEventViewProps {
-  id: string;
-  event: ScoreEvent;
+  eventNode: EventNode<ScoreEvent>;
   className?: string | string[];
 }
 
@@ -19,10 +19,10 @@ interface ScoreEventViewProps {
  * Renders the ScoreEventView component.
  */
 export const ScoreEventView: FC<ScoreEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   className,
 }) => {
+  const event = eventNode.event;
   const resolvedTarget = event.target
     ? Array.isArray(event.target)
       ? event.target.join("\n")
@@ -31,11 +31,13 @@ export const ScoreEventView: FC<ScoreEventViewProps> = ({
 
   return (
     <EventPanel
-      id={id}
+      id={eventNode.id}
+      depth={eventNode.depth}
       title={(event.intermediate ? "Intermediate " : "") + "Score"}
       className={clsx(className, "text-size-small")}
       subTitle={formatDateTime(new Date(event.timestamp))}
       icon={ApplicationIcons.scorer}
+      collapsibleContent={true}
     >
       <div data-name="Explanation" className={clsx(styles.explanation)}>
         {event.target ? (

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

@@ -3,14 +3,12 @@ import { FC } from "react";
 import { SpanBeginEvent } from "../../../@types/log";
 import { formatDateTime } from "../../../utils/format";
 import { EventPanel } from "./event/EventPanel";
-import { TranscriptComponent } from "./TranscriptView";
 import { kSandboxSignalName } from "./transform/fixups";
-import { EventNode } from "./types";
+import { EventNode, EventType } from "./types";
 
 interface SpanEventViewProps {
-  id: string;
-  event: SpanBeginEvent;
-  children: EventNode[];
+  eventNode: EventNode<SpanBeginEvent>;
+  children: EventNode<EventType>[];
   className?: string | string[];
 }
 
@@ -18,11 +16,12 @@ interface SpanEventViewProps {
  * Renders the SpanEventView component.
  */
 export const SpanEventView: FC<SpanEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   children,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
   const descriptor = spanDescriptor(event);
   const title =
     descriptor.name ||
@@ -31,19 +30,15 @@ export const SpanEventView: FC<SpanEventViewProps> = ({
 
   return (
     <EventPanel
-      id={`span-${event.name}-${id}`}
+      id={id}
+      depth={eventNode.depth}
+      childIds={children.map((child) => child.id)}
       className={clsx("transcript-span", className)}
       title={title}
       subTitle={formatDateTime(new Date(event.timestamp))}
       text={text}
-      collapse={descriptor.collapse}
       icon={descriptor.icon}
-    >
-      <TranscriptComponent
-        id={`span|${event.name}|${id}`}
-        eventNodes={children}
-      />
-    </EventPanel>
+    />
   );
 };
 
@@ -90,7 +85,7 @@ const summarize = (children: EventNode[]) => {
  */
 const spanDescriptor = (
   event: SpanBeginEvent,
-): { icon?: string; name?: string; endSpace?: boolean; collapse?: boolean } => {
+): { icon?: string; name?: string; endSpace?: boolean } => {
   const rootStepDescriptor = {
     endSpace: true,
   };
@@ -100,61 +95,50 @@ const spanDescriptor = (
       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 {
@@ -163,7 +147,6 @@ const spanDescriptor = (
         return {
           ...rootStepDescriptor,
           name: "Sample Init",
-          collapse: true,
         };
       default:
         return {

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

@@ -3,14 +3,12 @@ import { FC } from "react";
 import { StepEvent } from "../../../@types/log";
 import { formatDateTime } from "../../../utils/format";
 import { EventPanel } from "./event/EventPanel";
-import { TranscriptComponent } from "./TranscriptView";
 import { kSandboxSignalName } from "./transform/fixups";
-import { EventNode } from "./types";
+import { EventNode, EventType } from "./types";
 
 interface StepEventViewProps {
-  id: string;
-  event: StepEvent;
-  children: EventNode[];
+  eventNode: EventNode<StepEvent>;
+  children: EventNode<EventType>[];
   className?: string | string[];
 }
 
@@ -18,11 +16,13 @@ interface StepEventViewProps {
  * Renders the StepEventView component.
  */
 export const StepEventView: FC<StepEventViewProps> = ({
-  id,
-  event,
+  eventNode,
   children,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
+
   const descriptor = stepDescriptor(event);
   const title =
     descriptor.name ||
@@ -31,19 +31,15 @@ export const StepEventView: FC<StepEventViewProps> = ({
 
   return (
     <EventPanel
-      id={`step-${event.name}-${id}`}
+      id={id}
+      depth={eventNode.depth}
+      childIds={children.map((child) => child.id)}
       className={clsx("transcript-step", className)}
       title={title}
       subTitle={formatDateTime(new Date(event.timestamp))}
       icon={descriptor.icon}
-      collapse={descriptor.collapse}
       text={text}
-    >
-      <TranscriptComponent
-        id={`step|${event.name}|${id}`}
-        eventNodes={children}
-      />
-    </EventPanel>
+    />
   );
 };
 
@@ -93,7 +89,7 @@ const summarize = (children: EventNode[]) => {
  */
 const stepDescriptor = (
   event: StepEvent,
-): { icon?: string; name?: string; endSpace?: boolean; collapse?: boolean } => {
+): { icon?: string; name?: string; endSpace?: boolean } => {
   const rootStepDescriptor = {
     endSpace: true,
   };
@@ -115,7 +111,6 @@ const stepDescriptor = (
       case "system_message":
         return {
           ...rootStepDescriptor,
-          collapse: true,
         };
       case "use_tools":
         return {
@@ -139,13 +134,11 @@ const stepDescriptor = (
       return {
         ...rootStepDescriptor,
         name: "Sandbox Events",
-        collapse: true,
       };
     } else if (event.name === "init") {
       return {
         ...rootStepDescriptor,
         name: "Init",
-        collapse: true,
       };
     } else {
       return {
@@ -158,7 +151,6 @@ const stepDescriptor = (
         return {
           ...rootStepDescriptor,
           name: "Sample Init",
-          collapse: true,
         };
       default:
         return {

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

@@ -6,12 +6,11 @@ import { MetaDataView } from "../../content/MetaDataView";
 import { EventPanel } from "./event/EventPanel";
 import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./SubtaskEventView.module.css";
-import { TranscriptView } from "./TranscriptView";
+import { EventNode, EventType } from "./types";
 
 interface SubtaskEventViewProps {
-  id: string;
-  event: SubtaskEvent;
-  depth: number;
+  eventNode: EventNode<SubtaskEvent>;
+  children: EventNode<EventType>[];
   className?: string | string[];
 }
 
@@ -19,11 +18,12 @@ interface SubtaskEventViewProps {
  * Renders the StateEventView component.
  */
 export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
-  id,
-  event,
-  depth,
+  eventNode,
+  children,
   className,
 }) => {
+  const event = eventNode.event;
+  const id = eventNode.id;
   const body: ReactNode[] = [];
   if (event.type === "fork") {
     body.push(
@@ -32,17 +32,6 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
         <div className={clsx(styles.summaryRendered)}>
           <Rendered values={event.input} />
         </div>
-        <div className={clsx("text-style-label")}>Transcript</div>
-        {event.events.length > 0 ? (
-          <TranscriptView
-            id={`${id}-subtask`}
-            data-name="Transcript"
-            events={event.events}
-            depth={depth + 1}
-          />
-        ) : (
-          <None />
-        )}
       </div>,
     );
   } else {
@@ -53,16 +42,6 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
         result={event.result}
       />,
     );
-    if (event.events.length > 0) {
-      body.push(
-        <TranscriptView
-          id={`${id}-subtask`}
-          data-name="Transcript"
-          events={event.events}
-          depth={depth + 1}
-        />,
-      );
-    }
   }
 
   // Is this a traditional subtask or a fork?
@@ -70,6 +49,7 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
   return (
     <EventPanel
       id={id}
+      depth={eventNode.depth}
       className={className}
       title={formatTitle(
         `${type}: ${event.name}`,
@@ -77,7 +57,8 @@ export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
         event.working_time,
       )}
       subTitle={formatTiming(event.timestamp, event.working_start)}
-      collapse={false}
+      childIds={children.map((child) => child.id)}
+      collapseControl="bottom"
     >
       {body}
     </EventPanel>
@@ -95,9 +76,9 @@ const SubtaskSummary: FC<SubtaskSummaryProps> = ({ input, result }) => {
   const output = typeof result === "object" ? result : { result };
   return (
     <div className={clsx(styles.subtaskSummary)}>
-      <div className={clsx("text-style-label")}>Input</div>
+      <div className={clsx("text-style-label", "text-size-small")}>Input</div>
       <div className={clsx("text-size-large", styles.subtaskLabel)}></div>
-      <div className={clsx("text-style-label")}>Output</div>
+      <div className={clsx("text-style-label", "text-size-small")}>Output</div>
       {input ? <Rendered values={input} /> : undefined}
       <div className={clsx("text-size-title-secondary", styles.subtaskLabel)}>
         <i className={ApplicationIcons.arrows.right} />