inspect-ai 0.3.81__py3-none-any.whl → 0.3.83__py3-none-any.whl

inspect_ai/_view/www/src/components/PulsingDots.module.css

@@ -0,0 +1,81 @@
+/* PulsingDots.module.css */
+.container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dotsContainer {
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.small .dotsContainer {
+  column-gap: 3px;
+}
+
+.medium .dotsContainer {
+  column-gap: 5px;
+  padding-bottom: 2px;
+}
+
+.large .dotsContainer {
+  column-gap: 6px;
+  padding-bottom: 3px;
+  padding-left: 2px;
+}
+
+.dot {
+  border-radius: 50%;
+  display: inline-block;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.subtle {
+  background-color: var(--bs-primary-bg-subtle);
+}
+
+.primary {
+  background-color: var(--bs-primary);
+}
+
+.small .dot {
+  width: 4px;
+  height: 4px;
+}
+
+.medium .dot {
+  width: 8px;
+  height: 8px;
+}
+
+.large .dot {
+  width: 12px;
+  height: 12px;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}

inspect_ai/_view/www/src/components/PulsingDots.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import { FC } from "react";
+import styles from "./PulsingDots.module.css";
+
+interface PulsingDotsProps {
+  text?: string;
+  dotsCount?: number;
+  subtle?: boolean;
+  size?: "small" | "medium" | "large";
+}
+
+export const PulsingDots: FC<PulsingDotsProps> = ({
+  text = "Loading...",
+  dotsCount = 3,
+  subtle = true,
+  size = "small",
+}) => {
+  return (
+    <div
+      className={clsx(
+        styles.container,
+        size === "small"
+          ? styles.small
+          : size === "medium"
+            ? styles.medium
+            : styles.large,
+      )}
+      role="status"
+    >
+      <div className={styles.dotsContainer}>
+        {[...Array(dotsCount)].map((_, index) => (
+          <div
+            key={index}
+            className={clsx(
+              styles.dot,
+              subtle ? styles.subtle : styles.primary,
+            )}
+            style={{ animationDelay: `${index * 0.15}s` }}
+          />
+        ))}
+      </div>
+      <span className={styles.visuallyHidden}>{text}</span>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/TabSet.tsx

@@ -9,11 +9,9 @@ import {
   ReactElement,
   ReactNode,
   RefObject,
-  UIEvent,
-  useCallback,
-  useEffect,
   useRef,
 } from "react";
+import { useStatefulScrollPosition } from "../state/scrolling";
 import moduleStyles from "./TabSet.module.css";
 
 interface TabSetProps {
@@ -36,8 +34,6 @@ interface TabPanelProps {
   scrollable?: boolean;
   scrollRef?: RefObject<HTMLDivElement | null>;
   className?: string | string[];
-  scrollPosition?: number;
-  setScrollPosition?: (position: number) => void;
   children?: ReactNode;
   title: string;
   icon?: string;
@@ -107,7 +103,7 @@ const Tab: FC<{
         role="tab"
         aria-controls={tabContentsId}
         aria-selected={isActive}
-        onClick={(e) => tab.props.onSelected(e)}
+        onClick={tab.props.onSelected}
       >
         {tab.props.icon && (
           <i className={clsx(tab.props.icon, moduleStyles.tabIcon)} />
@@ -139,42 +135,14 @@ export const TabPanel: FC<TabPanelProps> = ({
   scrollable = true,
   scrollRef,
   className,
-  scrollPosition,
-  setScrollPosition,
   children,
 }) => {
   const tabContentsId = computeTabContentsId(id);
   const panelRef = useRef<HTMLDivElement>(null);
   const tabContentsRef = scrollRef || panelRef;
 
-  useEffect(() => {
-    if (!selected || scrollPosition === undefined || !tabContentsRef.current)
-      return;
-
-    const observer = new MutationObserver(() => {
-      if (tabContentsRef.current) {
-        tabContentsRef.current.scrollTop = scrollPosition;
-      }
-      observer.disconnect(); // Stop observing after first content load
-    });
-
-    observer.observe(tabContentsRef.current, {
-      childList: true,
-      subtree: true,
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  // Handle scrolling
-  const onScroll = useCallback(
-    (e: UIEvent<HTMLDivElement>) => {
-      if (setScrollPosition) {
-        setScrollPosition(e.currentTarget.scrollTop);
-      }
-    },
-    [setScrollPosition],
-  );
+  // Attach a scroll listener to this ref to track scrolling
+  useStatefulScrollPosition(tabContentsRef, tabContentsId, 1000, scrollable);
 
   return (
     <div
@@ -188,7 +156,6 @@ export const TabPanel: FC<TabPanelProps> = ({
         scrollable && moduleStyles.scrollable,
       )}
       style={style}
-      onScroll={onScroll}
     >
       {children}
     </div>

inspect_ai/_view/www/src/components/ToolButton.tsx

@@ -1,14 +1,13 @@
-import React, { ReactNode } from "react";
+import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
 import "./ToolButton.css";
 
-interface ToolButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ToolButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label: string | ReactNode;
   classes?: string;
   icon?: string;
 }
 
-export const ToolButton = React.forwardRef<HTMLButtonElement, ToolButtonProps>(
+export const ToolButton = forwardRef<HTMLButtonElement, ToolButtonProps>(
   ({ label, classes = "", icon, className, ...rest }, ref) => {
     // Combine class names, ensuring default classes are applied first
     const combinedClasses =

inspect_ai/_view/www/src/index.tsx

@@ -1,21 +1,29 @@
 import { createRoot } from "react-dom/client";
-import { App } from "./App";
 import api from "./api/index";
-import { ApplicationState, Capabilities } from "./types";
-import { throttle } from "./utils/sync";
+import { Capabilities } from "./api/types";
+import { App } from "./App";
+import { AppErrorBoundary } from "./AppErrorBoundary";
+import { initializeStore } from "./state/store";
+import storage from "./storage";
 import { getVscodeApi } from "./utils/vscode";
 
-// Read any state from the page itself
+// Resolve the api
+const applicationApi = api;
+const applicationStorage = storage;
+
+// Application capabilities
 const vscode = getVscodeApi();
-let initialState = undefined;
 let capabilities: Capabilities = {
   downloadFiles: true,
   webWorkers: true,
+  streamSamples: !!applicationApi.get_log_pending_samples,
+  streamSampleData: !!applicationApi.get_log_sample_data,
+  nativeFind: !vscode,
 };
-if (vscode) {
-  initialState = filterState(vscode.getState() as ApplicationState);
 
-  // Determine the capabilities
+// Initial state / storage
+if (vscode) {
+  // Adjust capabilities
   const extensionVersionEl = document.querySelector(
     'meta[name="inspect-extension:version"]',
   );
@@ -24,10 +32,15 @@ if (vscode) {
     : undefined;
 
   if (!extensionVersion) {
-    capabilities = { downloadFiles: false, webWorkers: false };
+    capabilities.downloadFiles = false;
+    capabilities.webWorkers = false;
   }
 }
 
+// Inititialize the application store
+initializeStore(applicationApi, capabilities, applicationStorage);
+
+// Find the root element and render into it
 const containerId = "app";
 const container = document.getElementById(containerId);
 if (!container) {
@@ -37,91 +50,10 @@ if (!container) {
   );
 }
 
+// Render into the root
 const root = createRoot(container as HTMLElement);
 root.render(
-  <App
-    api={api}
-    applicationState={initialState}
-    saveApplicationState={throttle((state) => {
-      const vscode = getVscodeApi();
-      if (vscode) {
-        vscode.setState(filterState(state));
-      }
-    }, 1000)}
-    capabilities={capabilities}
-    pollForLogs={false}
-  />,
+  <AppErrorBoundary>
+    <App api={applicationApi} />
+  </AppErrorBoundary>,
 );
-
-function filterState(state: ApplicationState) {
-  if (!state) {
-    return state;
-  }
-
-  // When saving state, we can't store vast amounts of data (like a large sample)
-  const filters = [filterLargeSample, filterLargeSelectedLog];
-  return filters.reduce(
-    (filteredState, filter) => filter(filteredState),
-    state,
-  );
-}
-
-// Filters the selected Sample if it is large
-function filterLargeSample(state: ApplicationState) {
-  if (!state || !state.selectedSample) {
-    return state;
-  }
-
-  const estimatedTotalSize = estimateSize(state.selectedSample.messages);
-  if (estimatedTotalSize > 400000) {
-    const { selectedSample, ...filteredState } = state;
-    return filteredState;
-  } else {
-    return state;
-  }
-}
-
-// Filters the selectedlog if it is too large
-function filterLargeSelectedLog(state: ApplicationState) {
-  if (!state || !state.selectedLog?.contents) {
-    return state;
-  }
-
-  const estimatedSize = estimateSize(
-    state.selectedLog.contents.sampleSummaries,
-  );
-  if (estimatedSize > 400000) {
-    const { selectedLog, ...filteredState } = state;
-    return filteredState;
-  } else {
-    return state;
-  }
-}
-
-function estimateSize(list: unknown[], frequency = 0.2) {
-  if (!list || list.length === 0) {
-    return 0;
-  }
-
-  // Total number of samples
-  const sampleSize = Math.ceil(list.length * frequency);
-
-  // Get a proper random sample without duplicates
-  const messageIndices = new Set<number>();
-  while (
-    messageIndices.size < sampleSize &&
-    messageIndices.size < list.length
-  ) {
-    const randomIndex = Math.floor(Math.random() * list.length);
-    messageIndices.add(randomIndex);
-  }
-
-  // Calculate size from sampled messages
-  const totalSize = Array.from(messageIndices).reduce((size, index) => {
-    return size + JSON.stringify(list[index]).length;
-  }, 0);
-
-  // Estimate total size based on sample
-  const estimatedTotalSize = (totalSize / sampleSize) * list.length;
-  return estimatedTotalSize;
-}

inspect_ai/_view/www/src/logfile/remoteLogFile.ts

@@ -17,6 +17,14 @@ interface SampleEntry {
   epoch: number;
 }
 
+export class SampleNotFoundError extends Error {
+  constructor(message?: string) {
+    super(message || "Sample not found");
+    this.name = "SampleNotFoundError";
+
+    Object.setPrototypeOf(this, SampleNotFoundError.prototype);
+  }
+}
 export interface RemoteLogFile {
   readHeader: () => Promise<EvalHeader>;
   readLogSummary: () => Promise<EvalSummary>;
@@ -101,7 +109,7 @@ export const openRemoteLogFile = async (
     if (remoteZipFile.centralDirectory.has(sampleFile)) {
       return (await readJSONFile(sampleFile, MAX_BYTES)) as EvalSample;
     } else {
-      throw new Error(
+      throw new SampleNotFoundError(
         `Unable to read sample file ${sampleFile} - it is not present in the manifest.`,
       );
     }

inspect_ai/_view/www/src/logfile/remoteZipFile.ts

@@ -67,7 +67,15 @@ export const openRemoteZipFile = async (
 
   // Check signature to make sure we found the EOCD record
   if (eocdrView.getUint32(0, true) !== 0x06054b50) {
-    throw new Error("End of central directory record not found");
+    if (eocdrBuffer.length !== 22) {
+      // The range request seems like it was ignored because more bytes than
+      // were requested were returned.
+      throw new Error(
+        "Unexpected central directory size - does the HTTP server serving this file support HTTP range requests?",
+      );
+    } else {
+      throw new Error("End of central directory record not found");
+    }
   }
 
   let centralDirOffset = eocdrView.getUint32(16, true);
@@ -180,9 +188,27 @@ export const openRemoteZipFile = async (
 };
 
 export const fetchSize = async (url: string): Promise<number> => {
-  const response = await fetch(`${url}`, { method: "HEAD" });
-  const contentLength = Number(response.headers.get("Content-Length"));
-  return contentLength;
+  // First try HEAD request to get Content-Length
+  const headResponse = await fetch(`${url}`, { method: "HEAD" });
+  const contentLength = headResponse.headers.get("Content-Length");
+
+  if (contentLength !== null) {
+    return Number(contentLength);
+  }
+
+  // If Content-Length is not present, use a GET with an 1 byte range request:
+  const getResponse = await fetch(`${url}`, {
+    method: "GET",
+    headers: { Range: "bytes=0-0" },
+  });
+  const contentRange = getResponse.headers.get("Content-Range");
+  if (contentRange !== null) {
+    const rangeMatch = contentRange.match(/bytes (\d+)-(\d+)\/(\d+)/);
+    if (rangeMatch !== null) {
+      return Number(rangeMatch[3]);
+    }
+  }
+  throw new Error("Could not determine content length");
 };
 
 /**

inspect_ai/_view/www/src/metadata/RenderedContent.tsx

@@ -7,7 +7,7 @@ import { formatNumber } from "../utils/format";
 import { MetaDataView } from "./MetaDataView";
 
 import clsx from "clsx";
-import React, { Fragment, JSX } from "react";
+import { FC, Fragment, isValidElement, JSX, ReactNode } from "react";
 import JSONPanel from "../components/JsonPanel";
 import { isJson } from "../utils/json";
 import styles from "./RenderedContent.module.css";
@@ -21,7 +21,7 @@ interface RenderedContentProps {
 /**
  * Renders content based on its type using registered content renderers.
  */
-export const RenderedContent: React.FC<RenderedContentProps> = ({
+export const RenderedContent: FC<RenderedContentProps> = ({
   id,
   entry,
 }): JSX.Element => {
@@ -43,8 +43,7 @@ export const RenderedContent: React.FC<RenderedContentProps> = ({
 
   if (renderer) {
     const { rendered } = renderer.render(id, entry);
-    // Check if rendered is already a valid ReactNode (JSX.Element)
-    if (rendered !== undefined && React.isValidElement(rendered)) {
+    if (rendered !== undefined && isValidElement(rendered)) {
       return rendered;
     }
   }
@@ -185,7 +184,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
       return typeof entry.value === "object" && entry.name === "web_search";
     },
     render: (_id, entry) => {
-      const results: React.ReactNode[] = [];
+      const results: ReactNode[] = [];
       results.push(
         <div className={styles.query}>
           <i className={ApplicationIcons.search}></i> {entry.value.query}
@@ -253,7 +252,6 @@ const contentRenderers: Record<string, ContentRenderer> = {
       return typeof entry.value === "object";
     },
     render: (id, entry) => {
-      // Generate a json preview
       return {
         rendered: (
           <MetaDataView

inspect_ai/_view/www/src/plan/DetailStep.module.css

@@ -7,3 +7,7 @@
   margin-top: 0.2rem;
   margin-bottom: 0.3rem;
 }
+
+.metadata {
+  margin-bottom: 0.75em;
+}

inspect_ai/_view/www/src/plan/DetailStep.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { FC } from "react";
-import { MetaDataView } from "../metadata/MetaDataView";
-import styles from "./DatasetDetailView.module.css";
+import { MetaDataGrid } from "../metadata/MetaDataGrid";
+import styles from "./DetailStep.module.css";
 
 interface DetailStepProps {
   icon?: string;
@@ -22,7 +22,10 @@ export const DetailStep: FC<DetailStepProps> = ({
       {iconHtml} {name}
       <div className={styles.container}>
         {params ? (
-          <MetaDataView entries={params} className={"text-size-small"} />
+          <MetaDataGrid
+            entries={params}
+            className={clsx("text-size-small", styles.metadata)}
+          />
         ) : (
           ""
         )}

inspect_ai/_view/www/src/plan/ScorerDetailView.tsx

@@ -17,7 +17,7 @@ export const ScorerDetailView: FC<ScorerDetailViewProps> = ({
 }) => {
   // Merge scores into params
   if (scores.length > 1) {
-    params["scores"] = scores;
+    params = { ...params, ["scores"]: scores };
   }
 
   return (

inspect_ai/_view/www/src/plan/SolverDetailView.module.css

@@ -1,6 +1,7 @@
 .container {
   display: flex;
-  flex-direction: columns;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .item {

inspect_ai/_view/www/src/samples/InlineSampleDisplay.module.css

@@ -1,8 +1,16 @@
 .container {
-  flex-direction: row;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .body {
   margin: 1em 1em 1em 1em;
 }
+
+.scroller {
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

inspect_ai/_view/www/src/samples/InlineSampleDisplay.tsx

@@ -1,21 +1,17 @@
-import { FC, RefObject } from "react";
+import { FC, useEffect, useRef } from "react";
 import { ErrorPanel } from "../components/ErrorPanel";
-import { ProgressBar } from "../components/ProgressBar";
-import { EvalSample } from "../types/log";
 import { SampleDisplay } from "./SampleDisplay";
-import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
 
+import clsx from "clsx";
+import { ProgressBar } from "../components/ProgressBar";
+import { useLogSelection, usePrevious, useSampleData } from "../state/hooks";
+import { useStore } from "../state/store";
 import styles from "./InlineSampleDisplay.module.css";
 
 interface InlineSampleDisplayProps {
   id: string;
-  sampleStatus: string;
-  sampleError?: Error;
-  sample?: EvalSample;
-  sampleDescriptor: SamplesDescriptor;
   selectedTab?: string;
   setSelectedTab: (tab: string) => void;
-  scrollRef: RefObject<HTMLDivElement | null>;
 }
 
 /**
@@ -23,30 +19,80 @@ interface InlineSampleDisplayProps {
  */
 export const InlineSampleDisplay: FC<InlineSampleDisplayProps> = ({
   id,
-  sample,
-  sampleStatus,
-  sampleError,
-  sampleDescriptor,
   selectedTab,
   setSelectedTab,
-  scrollRef,
 }) => {
+  // Sample hooks
+  const sampleData = useSampleData();
+  const loadSample = useStore((state) => state.sampleActions.loadSample);
+  const pollSample = useStore((state) => state.sampleActions.pollSample);
+  const logSelection = useLogSelection();
+
+  useEffect(() => {
+    if (sampleData.running && logSelection.logFile && logSelection.sample) {
+      pollSample(logSelection.logFile, logSelection.sample);
+    }
+  }, []);
+
+  // Sample Loading
+  const prevCompleted = usePrevious(
+    logSelection.sample?.completed !== undefined
+      ? logSelection.sample.completed
+      : true,
+  );
+  const prevLogFile = usePrevious<string | undefined>(logSelection.logFile);
+  useEffect(() => {
+    if (logSelection.logFile && logSelection.sample) {
+      const currentSampleCompleted =
+        logSelection.sample?.completed !== undefined
+          ? logSelection.sample.completed
+          : true;
+
+      if (
+        prevLogFile !== logSelection.logFile ||
+        sampleData.sample?.id !== logSelection.sample.id ||
+        sampleData.sample?.epoch !== logSelection.sample.epoch ||
+        currentSampleCompleted !== prevCompleted
+      ) {
+        loadSample(logSelection.logFile, logSelection.sample);
+      }
+    }
+  }, [
+    logSelection.logFile,
+    logSelection.sample?.id,
+    logSelection.sample?.epoch,
+    logSelection.sample?.completed,
+    sampleData.sample?.id,
+    sampleData.sample?.epoch,
+  ]);
+
+  // Scroll ref
+  const scrollRef = useRef<HTMLDivElement>(null);
   return (
     <div className={styles.container}>
-      <ProgressBar animating={sampleStatus === "loading"} />
-      <div className={styles.body}>
-        {sampleError ? (
-          <ErrorPanel title="Unable to load sample" error={sampleError} />
-        ) : (
-          <SampleDisplay
-            id={id}
-            sample={sample}
-            sampleDescriptor={sampleDescriptor}
-            selectedTab={selectedTab}
-            setSelectedTab={setSelectedTab}
-            scrollRef={scrollRef}
-          />
-        )}
+      <ProgressBar
+        animating={
+          sampleData.status === "loading" || sampleData.status === "streaming"
+        }
+      />
+      <div className={clsx(styles.scroller)} ref={scrollRef}>
+        <div className={styles.body}>
+          {sampleData.error ? (
+            <ErrorPanel
+              title="Unable to load sample"
+              error={sampleData.error}
+            />
+          ) : (
+            <SampleDisplay
+              id={id}
+              sample={sampleData.sample}
+              runningEvents={sampleData.running}
+              selectedTab={selectedTab}
+              setSelectedTab={setSelectedTab}
+              scrollRef={scrollRef}
+            />
+          )}
+        </div>
       </div>
     </div>
   );