inspect-ai 0.3.80__py3-none-any.whl → 0.3.82__py3-none-any.whl

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

@@ -1,24 +1,31 @@
 import { clsx } from "clsx";
 
-import { FC } from "react";
+import { FC, useCallback } from "react";
 import { ApplicationIcons } from "../appearance/icons";
+import { useMessageVisibility } from "../state/hooks";
 import "./MessageBand.css";
 
 interface MessageBandProps {
+  id: string;
   message: string;
-  hidden: boolean;
-  setHidden: (hidden: boolean) => void;
+  scope?: "sample" | "eval";
   type: "info" | "warning" | "error";
 }
 
 export const MessageBand: FC<MessageBandProps> = ({
+  id,
   message,
-  hidden,
-  setHidden,
   type,
+  scope = "eval",
 }) => {
   const className: string[] = [type];
-  if (hidden) {
+
+  const [visible, setVisible] = useMessageVisibility(id, scope);
+  const handleClick = useCallback(() => {
+    setVisible(false);
+  }, [setVisible]);
+
+  if (!visible) {
     className.push("hidden");
   }
 
@@ -29,9 +36,7 @@ export const MessageBand: FC<MessageBandProps> = ({
       <button
         className={clsx("btn", "message-band-btn", type)}
         title="Close"
-        onClick={() => {
-          setHidden(true);
-        }}
+        onClick={handleClick}
       >
         <i className={ApplicationIcons.close}></i>
       </button>

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

@@ -1,14 +1,14 @@
 import { Popover } from "bootstrap";
-import React, { useEffect, useRef } from "react";
+import { FC, ReactNode, useEffect, useRef } from "react";
 import "./MorePopover.css";
 
 interface MorePopoverProps {
   title: string;
   customClass?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export const MorePopover: React.FC<MorePopoverProps> = ({
+export const MorePopover: FC<MorePopoverProps> = ({
   title,
   customClass,
   children,

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

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
-import { FC, ReactElement, ReactNode, useState } from "react";
+import { FC, MouseEvent, ReactElement, ReactNode, useCallback } from "react";
+import { useProperty } from "../state/hooks";
 import styles from "./NavPills.module.css";
 
 interface NavPillChildProps {
@@ -8,13 +9,16 @@ interface NavPillChildProps {
 }
 
 interface NavPillsProps {
+  id: string;
   children?: ReactElement<NavPillChildProps>[];
 }
 
-export const NavPills: FC<NavPillsProps> = ({ children }) => {
-  const [activeItem, setActiveItem] = useState(
-    children ? children[0].props["title"] : null,
-  );
+export const NavPills: FC<NavPillsProps> = ({ id, children }) => {
+  const defaultNav = children ? children[0].props["title"] : "";
+  const [activeItem, setActiveItem] = useProperty(id, "active", {
+    defaultValue: defaultNav,
+  });
+
   if (!activeItem || !children) {
     return undefined;
   }
@@ -77,6 +81,15 @@ const NavPill: FC<NavPillProps> = ({
   children,
 }) => {
   const active = activeItem === title;
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      const target = (e.currentTarget as HTMLButtonElement).dataset.target;
+      if (target) {
+        setActiveItem(target);
+      }
+    },
+    [setActiveItem],
+  );
 
   return (
     <li className={"nav-item"}>
@@ -90,9 +103,8 @@ const NavPill: FC<NavPillProps> = ({
           active ? "active " : "",
           styles.pill,
         )}
-        onClick={() => {
-          setActiveItem(title);
-        }}
+        data-target={title}
+        onClick={handleClick}
       >
         {title}
       </button>

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

@@ -0,0 +1,12 @@
+.panel {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  margin-top: 3em;
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+}

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

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./NoContentsPanel.module.css";
+
+interface NoContentsPanelProps {
+  text: string;
+}
+
+export const NoContentsPanel: FC<NoContentsPanelProps> = ({ text }) => {
+  return (
+    <div className={clsx(styles.panel)}>
+      <div className={clsx(styles.container, "text-size-smaller")}>
+        <i className={ApplicationIcons.noSamples} />
+        <div>{text}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -6,25 +6,26 @@
   height: 0;
   overflow-y: visible;
   overflow-x: visible;
-  z-index: 1001;
   text-align: center;
 }
 
 .container {
   width: 100%;
-  height: 2px;
+  height: 1px;
   background-color: transparent;
-  position: relative;
+  position: sticky;
   overflow: hidden;
+  z-index: 1200;
 }
 
 .animate {
   width: 5%;
-  height: 2px;
+  height: 1px;
   animation: leftToRight 2s linear infinite;
   background-color: #3b82f6;
   position: absolute;
   left: 0;
+  top: 0;
 }
 
 @keyframes leftToRight {

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

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC } from "react";
 import styles from "./ProgressBar.module.css";
 
@@ -7,9 +8,9 @@ interface ProgressBarProps {
 
 export const ProgressBar: FC<ProgressBarProps> = ({ animating }) => {
   return (
-    <div className={styles.wrapper}>
+    <div className={clsx(styles.wrapper)}>
       <div
-        className={styles.container}
+        className={clsx(styles.container)}
         role="progressbar"
         aria-label="Basic example"
         aria-valuenow={25}

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");
 };
 
 /**