inspect-ai 0.3.70__py3-none-any.whl → 0.3.72__py3-none-any.whl

inspect_ai/_view/www/package.json

@@ -12,7 +12,9 @@
     "dev": "vite",
     "prettier:check": "prettier --check src",
     "prettier:write": "prettier --write src",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint 'src/**/*.{js,jsx,mjs,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{js,jsx,mjs,ts,tsx}' --fix"
   },
   "exports": {
     ".": "./src/App.mjs"
@@ -29,9 +31,11 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "9.x",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "globals": "^15.6.0",
     "prettier": "^3.3.3",
     "typescript": "^5.7.3",
+    "typescript-eslint": "^8.25.0",
     "vite": "^5.3.2"
   },
   "dependencies": {
@@ -41,8 +45,8 @@
     "@codemirror/state": "^6.5.1",
     "@lezer/highlight": "^1.2.1",
     "@popperjs/core": "^2.11.8",
-    "asciinema-player": "^3.8.2",
     "ansi-output": "^0.0.9",
+    "asciinema-player": "^3.8.2",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "clipboard": "^2.0.11",
@@ -60,6 +64,7 @@
     "postcss-url": "^10.1.3",
     "prismjs": "^1.29.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-virtuoso": "^4.12.5"
   }
 }

inspect_ai/_view/www/src/App.tsx

@@ -36,7 +36,7 @@ import { WorkSpace } from "./workspace/WorkSpace";
 
 import ClipboardJS from "clipboard";
 import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ClientAPI,
   EvalLogHeader,
@@ -72,7 +72,7 @@ interface AppProps {
 /**
  * Renders the Main Application
  */
-export const App: React.FC<AppProps> = ({
+export const App: FC<AppProps> = ({
   api,
   applicationState,
   saveApplicationState,

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

@@ -1,14 +1,15 @@
 import { ANSIColor, ANSIOutput, ANSIOutputRun, ANSIStyle } from "ansi-output";
 import clsx from "clsx";
+import { CSSProperties, FC } from "react";
 import "./AnsiDisplay.css";
 
 interface ANSIDisplayProps {
   output: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   className?: string[] | string;
 }
 
-export const ANSIDisplay: React.FC<ANSIDisplayProps> = ({
+export const ANSIDisplay: FC<ANSIDisplayProps> = ({
   output,
   style,
   className,
@@ -46,7 +47,7 @@ interface OutputRunProps {
   run: ANSIOutputRun;
 }
 
-const OutputRun: React.FC<OutputRunProps> = ({ run }) => {
+const OutputRun: FC<OutputRunProps> = ({ run }) => {
   // Render.
   return <span style={computeCSSProperties(run)}>{run.text}</span>;
 };

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

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC, ReactNode } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import "./Card.css";
 
@@ -7,17 +8,17 @@ interface CardHeaderProps {
   icon?: string;
   label?: string;
   className?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 interface CardBodyProps {
   id?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 interface CardProps {
   id?: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 interface CardCollapsingHeaderProps {
@@ -25,10 +26,10 @@ interface CardCollapsingHeaderProps {
   icon: string;
   label: string;
   cardBodyId: string;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-export const CardHeader: React.FC<CardHeaderProps> = ({
+export const CardHeader: FC<CardHeaderProps> = ({
   id,
   icon,
   label,
@@ -50,7 +51,7 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
   );
 };
 
-export const CardBody: React.FC<CardBodyProps> = ({ id, children }) => {
+export const CardBody: FC<CardBodyProps> = ({ id, children }) => {
   return (
     <div className={"card-body"} id={id || ""}>
       {children}
@@ -58,7 +59,7 @@ export const CardBody: React.FC<CardBodyProps> = ({ id, children }) => {
   );
 };
 
-export const Card: React.FC<CardProps> = ({ id, children }) => {
+export const Card: FC<CardProps> = ({ id, children }) => {
   return (
     <div className={"card"} id={id}>
       {children}
@@ -66,7 +67,7 @@ export const Card: React.FC<CardProps> = ({ id, children }) => {
   );
 };
 
-export const CardCollapsingHeader: React.FC<CardCollapsingHeaderProps> = ({
+export const CardCollapsingHeader: FC<CardCollapsingHeaderProps> = ({
   id,
   icon,
   label,

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import api from "../api/index";
 import "./DownloadButton.css";
 
@@ -7,7 +8,7 @@ interface DownloadButtonProps {
   fileContents: string | Blob | ArrayBuffer | ArrayBufferView;
 }
 
-export const DownloadButton: React.FC<DownloadButtonProps> = ({
+export const DownloadButton: FC<DownloadButtonProps> = ({
   label,
   fileName,
   fileContents,

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

@@ -1,10 +1,10 @@
-import { ReactNode } from "react";
+import { FC, ReactNode } from "react";
 
 interface EmptyPanelProps {
   children?: ReactNode;
 }
 
-export const EmptyPanel: React.FC<EmptyPanelProps> = ({ children }) => {
+export const EmptyPanel: FC<EmptyPanelProps> = ({ children }) => {
   return (
     <div className={"empty-panel"}>
       <div className={"container"}>

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

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import "./ErrorPanel.css";
 
@@ -12,7 +13,7 @@ interface ErrorPanelProps {
   error: DisplayError;
 }
 
-export const ErrorPanel: React.FC<ErrorPanelProps> = ({ title, error }) => {
+export const ErrorPanel: FC<ErrorPanelProps> = ({ title, error }) => {
   const message = error.message;
   const stack = error.stack;
 
@@ -26,10 +27,10 @@ export const ErrorPanel: React.FC<ErrorPanelProps> = ({ title, error }) => {
       </div>
       <div className={"error-panel-body"}>
         <div>
-          Error: {message || ""}$
+          Error: {message || ""}
           {stack && error.displayStack !== false && (
             <pre className={"error-panel-stack"}>
-              <code>at ${stack}</code>
+              <code>at {stack}</code>
             </pre>
           )}
         </div>

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

@@ -1,5 +1,13 @@
 import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  CSSProperties,
+  FC,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import { useResizeObserver } from "../utils/dom";
 import "./ExpandablePanel.css";
@@ -8,11 +16,11 @@ interface ExpandablePanelProps {
   collapse: boolean;
   border?: boolean;
   lines?: number;
-  children?: React.ReactNode;
+  children?: ReactNode;
   className?: string | string[];
 }
 
-export const ExpandablePanel: React.FC<ExpandablePanelProps> = ({
+export const ExpandablePanel: FC<ExpandablePanelProps> = ({
   collapse,
   border,
   lines = 15,
@@ -83,10 +91,10 @@ interface MoreToggleProps {
   collapsed: boolean;
   border: boolean;
   setCollapsed: (collapsed: boolean) => void;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
-const MoreToggle: React.FC<MoreToggleProps> = ({
+const MoreToggle: FC<MoreToggleProps> = ({
   collapsed,
   border,
   setCollapsed,

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { FC, KeyboardEvent, useCallback, useEffect, useRef } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import "./FindBand.css";
 
@@ -6,7 +6,7 @@ interface FindBandProps {
   hideBand: () => void;
 }
 
-export const FindBand: React.FC<FindBandProps> = ({ hideBand }) => {
+export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
   const searchBoxRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -82,7 +82,7 @@ export const FindBand: React.FC<FindBandProps> = ({ hideBand }) => {
   );
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
+    (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Escape") {
         hideBand();
       } else if (e.key === "Enter") {

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { FC, useEffect } from "react";
 import { formatDateTime, formatTime } from "../utils/format";
 import { AsciinemaPlayer } from "./AsciinemaPlayer";
 import "./HumanBaselineView.css";
@@ -24,7 +24,7 @@ interface HumanBaselineViewProps {
 /**
  * Renders the HumanBaselineView component.
  */
-export const HumanBaselineView: React.FC<HumanBaselineViewProps> = ({
+export const HumanBaselineView: FC<HumanBaselineViewProps> = ({
   started,
   runtime,
   answer,
@@ -92,7 +92,7 @@ export const HumanBaselineView: React.FC<HumanBaselineViewProps> = ({
     answer?: string;
   }
 
-  const StatusMessage: React.FC<StatusMessageProps> = ({
+  const StatusMessage: FC<StatusMessageProps> = ({
     completed,
     running,
     answer,

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

@@ -1,15 +1,16 @@
 import clsx from "clsx";
+import { CSSProperties, FC, ReactNode } from "react";
 
 interface LabeledValueProps {
   label: string;
-  style?: React.CSSProperties;
-  valueStyle?: React.CSSProperties;
+  style?: CSSProperties;
+  valueStyle?: CSSProperties;
   layout?: "column" | "row";
-  children: React.ReactNode;
+  children: ReactNode;
   className?: string | string[];
 }
 
-export const LabeledValue: React.FC<LabeledValueProps> = ({
+export const LabeledValue: FC<LabeledValueProps> = ({
   layout = "column",
   style,
   label,

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

@@ -1,7 +1,15 @@
 import clsx from "clsx";
 import { ProgressBar } from "./ProgressBar";
 
-import { ReactNode, UIEvent, useCallback, useEffect, useRef } from "react";
+import {
+  FC,
+  ReactNode,
+  RefObject,
+  UIEvent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import styles from "./LargeModal.module.css";
 
 export interface ModalTool {
@@ -22,17 +30,17 @@ interface LargeModalProps {
   detail: string;
   detailTools?: ModalTools;
   showProgress: boolean;
-  footer?: React.ReactNode;
+  footer?: ReactNode;
   visible: boolean;
   onkeyup: (e: any) => void;
   onHide: () => void;
-  scrollRef: React.RefObject<HTMLDivElement | null>;
-  initialScrollPositionRef: React.RefObject<number>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  initialScrollPositionRef: RefObject<number>;
   setInitialScrollPosition: (position: number) => void;
   children: ReactNode;
 }
 
-export const LargeModal: React.FC<LargeModalProps> = ({
+export const LargeModal: FC<LargeModalProps> = ({
   id,
   title,
   detail,
@@ -56,7 +64,9 @@ export const LargeModal: React.FC<LargeModalProps> = ({
 
   // Support restoring the scroll position
   // but only do this for the first time that the children are set
-  scrollRef = scrollRef || useRef(null);
+  const modalRef = useRef(null);
+  scrollRef = scrollRef || modalRef;
+
   useEffect(() => {
     if (scrollRef.current) {
       setTimeout(() => {
@@ -153,7 +163,7 @@ interface HtmlEntityProps {
   html: string;
 }
 
-const HtmlEntity: React.FC<HtmlEntityProps> = ({ html }) => (
+const HtmlEntity: FC<HtmlEntityProps> = ({ html }) => (
   <span dangerouslySetInnerHTML={{ __html: html }} />
 );
 
@@ -164,12 +174,7 @@ interface TitleToolProps {
   onClick: () => void;
 }
 
-const TitleTool: React.FC<TitleToolProps> = ({
-  label,
-  icon,
-  enabled,
-  onClick,
-}) => {
+const TitleTool: FC<TitleToolProps> = ({ label, icon, enabled, onClick }) => {
   return (
     <button
       type="button"

inspect_ai/_view/www/src/components/{LightboxCarousel.css → LightboxCarousel.module.css}

@@ -1,9 +1,9 @@
-.carousel-thumbs {
+.carouselThumbs {
   display: grid;
   grid-template-columns: auto auto auto auto;
 }
 
-.carousel-thumb {
+.carouselThumb {
   background: black;
   color: white;
   padding: 4em 0;
@@ -13,11 +13,11 @@
   text-align: center;
 }
 
-.carousel-play-icon {
+.carouselPlayIcon {
   font-size: 4em;
 }
 
-.lightbox-overlay {
+.lightboxOverlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -30,25 +30,25 @@
   z-index: 9998;
 }
 
-.lightbox-content.open,
-.lightbox-overlay.open {
+.lightboxContent.open,
+.lightboxOverlay.open {
   opacity: 1;
   visibility: visible;
 }
 
-.lightbox-content.closed,
-.lightbox-overlay.closed {
+.lightboxContent.closed,
+.lightboxOverlay.closed {
   opacity: 0;
   visibility: hidden;
 }
 
-.lightbox-button-close-wrapper {
+.lightboxButtonCloseWrapper {
   position: absolute;
   top: 10px;
   right: 10px;
 }
 
-.lightbox-button-close {
+.lightboxButtonClose {
   border: none;
   background: none;
   color: #fff;
@@ -60,7 +60,7 @@
   z-index: 10000;
 }
 
-.lightbox-preview-button {
+.lightboxPreviewButton {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -73,23 +73,27 @@
   z-index: 9999;
 }
 
-.lightbox-preview-button.next {
+.lightboxPreviewButton.next {
   left: 10px;
 }
 
-.lightbox-preview-button.prev {
+.lightboxPreviewButton.prev {
   right: 10px;
 }
 
-.lightbox-content {
-  max-width: 90%;
-  max-height: 90%;
+.lightboxContent {
+  max-width: 90vw !important;
+  max-height: 90vh !important;
   display: flex;
-  align-items: center;
-  justify-content: center;
   position: relative;
   transition:
     opacity 0.3s ease,
     visibility 0.3s ease;
   z-index: 9999;
+  overflow: hidden;
+}
+
+.lightboxContent > * {
+  max-height: 90vh !important;
+  max-width: 90vw !important;
 }

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

@@ -1,11 +1,11 @@
 import clsx from "clsx";
-import { useCallback, useEffect, useState } from "react";
+import { FC, ReactNode, useCallback, useEffect, useState } from "react";
 import { ApplicationIcons } from "../appearance/icons";
-import "./LightboxCarousel.css";
+import styles from "./LightboxCarousel.module.css";
 
 interface Slide {
   label: string;
-  render: () => React.ReactNode;
+  render: () => ReactNode;
 }
 
 interface LightboxCarouselProps {
@@ -15,24 +15,25 @@ interface LightboxCarouselProps {
 /**
  * LightboxCarousel component provides a carousel with lightbox functionality.
  */
-export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
-  slides,
-}) => {
+export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [showOverlay, setShowOverlay] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  const openLightbox = (index: number) => {
-    setCurrentIndex(index);
-    setShowOverlay(true);
+  const openLightbox = useCallback(
+    (index: number) => {
+      setCurrentIndex(index);
+      setShowOverlay(true);
 
-    // Slight delay before setting isOpen so the fade-in starts from opacity: 0
-    setTimeout(() => setIsOpen(true), 10);
-  };
+      // Slight delay before setting isOpen so the fade-in starts from opacity: 0
+      setTimeout(() => setIsOpen(true), 10);
+    },
+    [setCurrentIndex, setShowOverlay],
+  );
 
-  const closeLightbox = () => {
+  const closeLightbox = useCallback(() => {
     setIsOpen(false);
-  };
+  }, [setIsOpen]);
 
   // Remove the overlay from the DOM after fade-out completes
   useEffect(() => {
@@ -42,17 +43,17 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
       }, 300); // match your transition duration
       return () => clearTimeout(timer);
     }
-  }, [isOpen, showOverlay]);
+  }, [isOpen, showOverlay, setShowOverlay]);
 
   const showNext = useCallback(() => {
     setCurrentIndex((prev) => {
       return (prev + 1) % slides.length;
     });
-  }, [slides]);
+  }, [slides, setCurrentIndex]);
 
   const showPrev = useCallback(() => {
     setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
-  }, [slides]);
+  }, [slides, setCurrentIndex]);
 
   // Keyboard Navigation
   useEffect(() => {
@@ -73,19 +74,22 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
   }, [isOpen, showNext, showPrev]);
 
   return (
-    <div className="lightbox-carousel-container">
-      <div className="carousel-thumbs">
+    <div className={clsx("lightbox-carousel-container")}>
+      <div className={clsx(styles.carouselThumbs)}>
         {slides.map((slide, index) => {
           return (
             <div
               key={index}
-              className="carousel-thumb"
+              className={clsx(styles.carouselThumb)}
               onClick={() => openLightbox(index)}
             >
               <div>{slide.label}</div>
               <div>
                 <i
-                  className={clsx(ApplicationIcons.play, "carousel-play-icon")}
+                  className={clsx(
+                    ApplicationIcons.play,
+                    styles.carouselPlayIcon,
+                  )}
                 />
               </div>
             </div>
@@ -93,15 +97,20 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
         })}
       </div>
       {showOverlay && (
-        <div className={clsx("lightbox-overlay", isOpen ? "open" : "closed")}>
-          <div className={"lightbox-button-close-wrapper"}>
-            <button className={"lightbox-button-close"} onClick={closeLightbox}>
+        <div
+          className={clsx(styles.lightboxOverlay, isOpen ? "open" : "closed")}
+        >
+          <div className={clsx(styles.lightboxButtonCloseWrapper)}>
+            <button
+              className={styles.lightboxButtonClose}
+              onClick={closeLightbox}
+            >
               <i className={ApplicationIcons.close}></i>
             </button>
           </div>
           {slides.length > 1 ? (
             <button
-              className={"lightbox-preview-button prev"}
+              className={clsx(styles.lightboxPreviewButton, "prev")}
               onClick={showPrev}
             >
               <i className={ApplicationIcons.previous}></i>
@@ -111,7 +120,7 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
           )}
           {slides.length > 1 ? (
             <button
-              className={"lightbox-preview-button next"}
+              className={clsx(styles.lightboxPreviewButton, "next")}
               onClick={showNext}
             >
               <i className={ApplicationIcons.next} />
@@ -121,7 +130,7 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
           )}
           <div
             key={`carousel-slide-${currentIndex}`}
-            className={clsx("lightbox-content", isOpen ? "open" : "closed")}
+            className={clsx(styles.lightboxContent, isOpen ? "open" : "closed")}
           >
             {slides[currentIndex].render()}
           </div>

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

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
 
+import { FC } from "react";
 import { ApplicationIcons } from "../appearance/icons";
 import "./MessageBand.css";
 
@@ -10,7 +11,7 @@ interface MessageBandProps {
   type: "info" | "warning" | "error";
 }
 
-export const MessageBand: React.FC<MessageBandProps> = ({
+export const MessageBand: FC<MessageBandProps> = ({
   message,
   hidden,
   setHidden,