inspect-ai 0.3.69__py3-none-any.whl → 0.3.71__py3-none-any.whl

inspect_ai/_view/www/src/samples/transcript/event/EventTimingPanel.tsx

@@ -0,0 +1,115 @@
+import clsx from "clsx";
+import { FC, Fragment } from "react";
+import { formatDateTime, formatTime } from "../../../utils/format";
+import styles from "./EventTimingPanel.module.css";
+
+interface EventTimingPanelProps {
+  timestamp: string;
+  completed?: string | null;
+  working_start?: number | null;
+  working_time?: number | null;
+}
+
+interface EventTimingPanelRow {
+  label: string | "---";
+  value?: string;
+  secondary?: boolean;
+  bordered?: boolean;
+  topMargin?: boolean;
+}
+
+/**
+ * Renders the ModelUsagePanel component.
+ */
+export const EventTimingPanel: FC<EventTimingPanelProps> = ({
+  timestamp,
+  completed,
+  working_start,
+  working_time,
+}) => {
+  const rows: EventTimingPanelRow[] = [
+    {
+      label: "Clock Time",
+      value: undefined,
+      secondary: false,
+    },
+    {
+      label: "---",
+      value: undefined,
+      secondary: false,
+    },
+  ];
+
+  if (!completed) {
+    rows.push({
+      label: "Timestamp",
+      value: formatDateTime(new Date(timestamp)),
+    });
+  } else {
+    rows.push({ label: "Start", value: formatDateTime(new Date(timestamp)) });
+    rows.push({ label: "End", value: formatDateTime(new Date(completed)) });
+  }
+
+  if (working_start || working_time) {
+    rows.push({
+      label: "Working Time",
+      value: undefined,
+      secondary: false,
+      topMargin: true,
+    });
+    rows.push({
+      label: "---",
+      value: undefined,
+      secondary: false,
+    });
+    if (working_start) {
+      rows.push({
+        label: "Start",
+        value: formatTime(working_start),
+      });
+    }
+    if (working_time) {
+      rows.push({
+        label: "Duration",
+        value: formatTime(working_time),
+      });
+    }
+    if (working_start && working_time) {
+      rows.push({
+        label: "End",
+        value: formatTime(
+          Math.round(working_start * 10) / 10 +
+            Math.round(working_time * 10) / 10,
+        ),
+      });
+    }
+  }
+
+  return (
+    <div className={clsx("text-size-small", styles.wrapper)}>
+      {rows.map((row, idx) => {
+        if (row.label === "---") {
+          return (
+            <div key={`$usage-sep-${idx}`} className={styles.separator}></div>
+          );
+        } else {
+          return (
+            <Fragment key={`$usage-row-${idx}`}>
+              <div
+                className={clsx(
+                  "text-style-label",
+                  "text-style-secondary",
+                  row.secondary ? styles.col2 : styles.col1_3,
+                  row.topMargin ? styles.topMargin : undefined,
+                )}
+              >
+                {row.label}
+              </div>
+              <div className={styles.col3}>{row.value ? row.value : ""}</div>
+            </Fragment>
+          );
+        }
+      })}
+    </div>
+  );
+};

inspect_ai/_view/www/src/samples/transcript/event/utils.ts

@@ -0,0 +1,29 @@
+import {
+  formatDateTime,
+  formatNumber,
+  formatTime,
+} from "../../../utils/format";
+
+export const formatTiming = (timestamp: string, working_start?: number) => {
+  if (working_start) {
+    return `${formatDateTime(new Date(timestamp))}\n@ working time: ${formatTime(working_start)}`;
+  } else {
+    return formatDateTime(new Date(timestamp));
+  }
+};
+
+export const formatTitle = (
+  title: string,
+  total_tokens?: number,
+  working_start?: number | null,
+) => {
+  const subItems = [];
+  if (total_tokens) {
+    subItems.push(`${formatNumber(total_tokens)} tokens`);
+  }
+  if (working_start) {
+    subItems.push(`${formatTime(working_start)}`);
+  }
+  const subtitle = subItems.length > 0 ? ` (${subItems.join(", ")})` : "";
+  return `${title}${subtitle}`;
+};

inspect_ai/_view/www/src/samples/transcript/state/StateDiffView.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { diff } from "jsondiffpatch";
 import { format } from "jsondiffpatch/formatters/html";
+import { FC } from "react";
 
 interface StateDiffViewProps {
   before: Object;
@@ -11,7 +12,7 @@ interface StateDiffViewProps {
 /**
  * Renders a view displaying a list of state changes.
  */
-export const StateDiffView: React.FC<StateDiffViewProps> = ({
+export const StateDiffView: FC<StateDiffViewProps> = ({
   before,
   after,
   className,

inspect_ai/_view/www/src/samples/transcript/state/StateEventRenderers.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { Fragment, JSX, ReactNode } from "react";
+import { FC, Fragment, JSX, ReactNode } from "react";
 import {
   HumanBaselineView,
   SessionLog,
@@ -246,7 +246,7 @@ interface ToolsProps {
 /**
  * Renders a list of tool components based on the provided tool definitions.
  */
-export const Tools: React.FC<ToolsProps> = ({ toolDefinitions }) => {
+export const Tools: FC<ToolsProps> = ({ toolDefinitions }) => {
   return toolDefinitions.map((toolDefinition, idx) => {
     const toolName = toolDefinition.name;
     const toolArgs = toolDefinition.parameters?.properties
@@ -270,7 +270,7 @@ interface ToolProps {
 /**
  * Renders a single tool component.
  */
-export const Tool: React.FC<ToolProps> = ({ toolName, toolArgs }) => {
+export const Tool: FC<ToolProps> = ({ toolName, toolArgs }) => {
   const functionCall =
     toolArgs && toolArgs.length > 0
       ? `${toolName}(${toolArgs.join(", ")})`

inspect_ai/_view/www/src/samples/transcript/state/StateEventView.tsx

@@ -17,6 +17,7 @@ import {
   StoreSpecificRenderableTypes,
 } from "./StateEventRenderers";
 
+import { useMemo, FC } from "react";
 import styles from "./StateEventView.module.css";
 
 interface StateEventViewProps {
@@ -31,7 +32,7 @@ interface StateEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const StateEventView: React.FC<StateEventViewProps> = ({
+export const StateEventView: FC<StateEventViewProps> = ({
   id,
   event,
   eventState,
@@ -39,19 +40,21 @@ export const StateEventView: React.FC<StateEventViewProps> = ({
   isStore = false,
   className,
 }) => {
-  const summary = summarizeChanges(event.changes);
+  const summary = useMemo(() => {
+    return summarizeChanges(event.changes);
+  }, [event.changes]);
 
   // Synthesize objects for comparison
-  const [before, after] = synthesizeComparable(event.changes);
+  const [before, after] = useMemo(() => {
+    return synthesizeComparable(event.changes);
+  }, [event.changes]);
 
   // This clone is important since the state is used by react as potential values that are rendered
   // and as a result may be decorated with additional properties, etc..., resulting in DOM elements
   // appearing attached to state.
-  const changePreview = generatePreview(
-    event.changes,
-    structuredClone(after),
-    isStore,
-  );
+  const changePreview = useMemo(() => {
+    return generatePreview(event.changes, structuredClone(after), isStore);
+  }, [event.changes, after, isStore]);
   // Compute the title
   const title = event.event === "state" ? "State Updated" : "Store Updated";
 

inspect_ai/_view/www/src/samples/transcript/types.ts

@@ -8,6 +8,7 @@ import {
   ModelEvent,
   SampleInitEvent,
   SampleLimitEvent,
+  SandboxEvent,
   ScoreEvent,
   StateEvent,
   StepEvent,
@@ -37,7 +38,8 @@ export type EventType =
   | ToolEvent
   | InputEvent
   | ErrorEvent
-  | ApprovalEvent;
+  | ApprovalEvent
+  | SandboxEvent;
 
 export class EventNode {
   event: EventType;