inspect-ai 0.3.108__py3-none-any.whl → 0.3.110__py3-none-any.whl

inspect_ai/_view/www/package.json

@@ -63,10 +63,11 @@
     "@codemirror/state": "^6.5.2",
     "@lezer/highlight": "^1.2.1",
     "@mui/material": "^7.1.0",
-    "@mui/x-tree-view": "^8.3.0",
+    "@mui/x-tree-view": "^8.3.1",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-table": "^8.21.3",
     "ansi-output": "^0.0.9",
-    "asciinema-player": "^3.9.0",
+    "asciinema-player": "^3.10.0",
     "bootstrap": "^5.3.6",
     "bootstrap-icons": "^1.12.1",
     "clipboard": "^2.0.11",

inspect_ai/_view/www/src/@types/log.d.ts

@@ -1,8 +1,8 @@
-/* eslint-disable */
-/**
- * This file was automatically generated by json-schema-to-typescript.
- * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
- * and run json-schema-to-typescript to regenerate this file.
+/*
+ *  This file is automatically generated by schema.py
+ *  DO NOT MODIFY IT BY HAND.
+ *  To regenerate, run: python -m ../schema.py from within the
+ *  src/inspect_ai/_view/www directory.
  */
 
 export type Version = number;

inspect_ai/_view/www/src/app/App.css

@@ -53,7 +53,15 @@ body:not([class^="vscode-"]) button {
   display: grid;
   height: 100vh;
   overflow-y: hidden;
-  grid-template-rows: max-content max-content 1fr;
+  grid-template-rows: max-content max-content max-content 1fr;
+}
+
+a {
+  color: var(--bs-link-color);
+}
+
+a:hover {
+  color: var(--bs-link-hover-color);
 }
 
 .modal {
@@ -64,7 +72,7 @@ body:not([class^="vscode-"]) button {
   --bs-backdrop-opacity: 0.4;
 }
 
-body[class^="vscode-"] .app-main-grid {
+.app-main-grid.single-file-mode {
   grid-template-rows: max-content max-content 1fr;
 }
 
@@ -135,6 +143,7 @@ body[class^="vscode-"] {
   --bs-border-radius: 0;
   --bs-border-radius-lg: 0;
   --bs-body-bg: var(--vscode-editor-background);
+  --bs-secondary-bg-subtle: var(--vscode-editorHoverWidget-background);
   --bs-card-bg: var(--vscode-editor-background);
   --bs-table-bg: var(--vscode-editor-background);
   --bs-light-bg-subtle: var(--vscode-sideBar-background);
@@ -150,12 +159,15 @@ body[class^="vscode-"] {
   --bs-btn-bg: var(--vscode-peekViewTitle-background);
   --bs-primary: var(--vscode-banner-iconForeground);
   --bs-nav-pills-link-active-bg: var(--vscode-banner-iconForeground);
+  --bs-link-color: var(--vscode-textLink-foreground);
+  --bs-link-hover-color: var(--vscode-textLink-activeForeground);
   --bs-secondary: var(--vscode-breadcrumb-foreground);
   --bs-secondary-bg: var(--vscode-list-inactiveSelectionBackground);
   --bs-border-color: var(--vscode-editorGroup-border);
   --bs-card-border-color: var(--vscode-editorGroup-border);
   --bs-warning-bg-subtle: var(--vscode-inputValidation-warningBackground);
   --bs-warning-text-emphasis: var(--vscode-input-foreground);
+  --bs-breadcrumb-divider-color: var(--vscode-foreground);
   --inspect-find-background: var(--vscode-editorWidget-background);
   --inspect-find-foreground: var(--vscode-editorWidget-foreground);
   --inspect-input-background: var(--vscode-input-background);
@@ -328,6 +340,10 @@ body[class^="vscode-"] .sidebar .list-group {
   --bs-list-group-active-color: var(--vscode-sideBarSectionHeader-foreground);
 }
 
+body[class^="vscode-"] .breadcrumb-item {
+  --bs-breadcrumb-divider-color: var(--vscode-foreground);
+}
+
 body[class^="vscode-"] div.ap-control-bar .ap-fullscreen-button {
   display: none;
 }
@@ -1025,11 +1041,11 @@ ul.jsondiffpatch-textdiff {
 /* prism-custom.css */
 code[class*="language-"],
 pre[class*="language-"] {
-  font-size: 0.8rem !important;
+  font-size: 0.7rem !important;
 }
 
 .token {
-  font-size: 0.8rem !important;
+  font-size: 0.7rem !important;
 }
 
 /* PrismJS 1.29.0 https://prismjs.com/download.html#themes=prism-dark&languages=markup+css+clike+javascript+bash+python */
@@ -1140,3 +1156,54 @@ pre[class*="language-"] {
   color: red;
 }
 /* END PrismJS */
+
+/* SVG Icon styles - following Bootstrap Icons pattern */
+.inspect-icon-16::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  mask: url("../img/inspect-16.svg") no-repeat center / contain;
+  -webkit-mask: url("../img/inspect-16.svg") no-repeat center / contain;
+}
+
+.inspect-icon-back::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  mask: url("../img/inspect-back.svg") no-repeat center / contain;
+  -webkit-mask: url("../img/inspect-back.svg") no-repeat center / contain;
+}
+
+.inspect-icon-forward::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  mask: url("../img/inspect-forward.svg") no-repeat center / contain;
+  -webkit-mask: url("../img/inspect-forward.svg") no-repeat center / contain;
+}
+
+.inspect-icon-file::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  mask: url("../img/inspect-file.svg") no-repeat center / contain;
+  -webkit-mask: url("../img/inspect-file.svg") no-repeat center / contain;
+}
+
+.inspect-icon-home::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: middle;
+  mask: url("../img/inspect-home.svg") no-repeat center / contain;
+  -webkit-mask: url("../img/inspect-home.svg") no-repeat center / contain;
+}

inspect_ai/_view/www/src/app/App.tsx

@@ -45,6 +45,10 @@ export const App: FC<AppProps> = ({ api }) => {
   const loadLog = useStore((state) => state.logActions.loadLog);
   const pollLog = useStore((state) => state.logActions.pollLog);
 
+  const setSingleFileMode = useStore(
+    (state) => state.appActions.setSingleFileMode,
+  );
+
   // Load a specific log
   useEffect(() => {
     const loadSpecificLog = async () => {
@@ -135,6 +139,7 @@ export const App: FC<AppProps> = ({ api }) => {
       if (embeddedState && !rehydrated) {
         const state = JSON5.parse(embeddedState.textContent || "");
         onMessage({ data: state });
+        setSingleFileMode(true);
       } else {
         // For non-route URL params support (legacy)
         const urlParams = new URLSearchParams(window.location.search);
@@ -151,11 +156,13 @@ export const App: FC<AppProps> = ({ api }) => {
             log_dir: "",
             files: [{ name: resolvedLogPath }],
           });
+          setSingleFileMode(true);
         } else {
           // If a log file was passed, select it
           const log_file = urlParams.get("log_file");
           if (log_file) {
             await selectLogFile(log_file);
+            setSingleFileMode(true);
           }
           // Else do nothing - RouteProvider will handle it
         }

inspect_ai/_view/www/src/app/appearance/icons.ts

@@ -23,6 +23,7 @@ export const ApplicationIcons = {
     down: "bi bi-arrow-down",
     up: "bi bi-arrow-up",
   },
+  cancelled: "bi bi-x-circle",
   caret: {
     right: "bi bi-caret-right",
     down: "bi bi-caret-down",
@@ -36,11 +37,12 @@ export const ApplicationIcons = {
     right: "bi bi-chevron-right",
     down: "bi bi-chevron-down",
   },
+  "clear-text": "bi bi-x-circle-fill",
+  close: "bi bi-x",
   collapse: {
     all: "bi bi-arrows-collapse",
     up: "bi bi-chevron-up",
   },
-  close: "bi bi-x",
   config: "bi bi-gear",
   confirm: "bi bi-check",
   copy: "bi bi-copy",
@@ -48,12 +50,18 @@ export const ApplicationIcons = {
     return `bi bi-${epoch}-circle`;
   },
   error: "bi bi-exclamation-circle",
+  eval: "bi bi-info-circle-fill",
   "expand-all": "bi bi-arrows-expand",
   "expand-down": "bi bi-chevron-down",
+  file: "bi bi-file-code",
+  filter: "bi bi-funnel",
+  folder: "bi bi-folder",
   fork: "bi bi-signpost-split",
+  home: "bi bi-house",
   info: "bi bi-info-circle",
   input: "bi bi-terminal",
-  inspect: "bi bi-gear",
+  inspect: "ii inspect-icon-16",
+  inspectFile: "ii inspect-icon-file",
   json: "bi bi-filetype-json",
   limits: {
     messages: "bi bi-chat-right-text",
@@ -73,6 +81,13 @@ export const ApplicationIcons = {
   "toggle-right": "bi bi-chevron-right",
   more: "bi bi-zoom-in",
   "multiple-choice": "bi bi-card-list",
+  navbar: {
+    home: "ii inspect-icon-home",
+    back: "ii inspect-icon-back",
+    forward: "ii inspect-icon-forward",
+    inspectLogo: "ii inspect-icon-16",
+  },
+
   next: "bi bi-chevron-right",
   noSamples: "bi bi-ban",
   play: "bi bi-play-fill",
@@ -103,6 +118,7 @@ export const ApplicationIcons = {
   },
   step: "bi bi-fast-forward-btn",
   subtask: "bi bi-subtract",
+  success: "bi bi-check-circle",
   transcript: "bi bi-list-columns-reverse",
   tree: {
     open: "bi bi-caret-down-fill",

inspect_ai/_view/www/src/app/content/RenderedContent.tsx

@@ -8,7 +8,7 @@ import { formatNumber } from "../../utils/format";
 import { isJson } from "../../utils/json";
 import { ApplicationIcons } from "../appearance/icons";
 import { ChatMessageRenderer } from "../samples/chat/ChatMessageRenderer";
-import { MetaDataView } from "./MetaDataView";
+import { MetaDataGrid } from "./MetaDataGrid";
 import styles from "./RenderedContent.module.css";
 import { Buckets, ContentRenderer, RenderOptions } from "./types";
 
@@ -190,12 +190,11 @@ const contentRenderers: (
         const arrayRendered = renderObject ? (
           renderObject(arrayMap)
         ) : (
-          <MetaDataView
+          <MetaDataGrid
             id={id}
             className={"font-size-small"}
             entries={arrayMap}
-            tableOptions="borderless,sm"
-            compact={true}
+            plain={true}
           />
         );
         return { rendered: arrayRendered };
@@ -283,12 +282,11 @@ const contentRenderers: (
         } else {
           return {
             rendered: (
-              <MetaDataView
+              <MetaDataGrid
                 id={id}
-                className={"text-size-smaller"}
-                entries={entry.value}
-                tableOptions="borderless,sm"
-                compact
+                className={"font-size-small"}
+                entries={entry.value as Record<string, unknown>}
+                plain={true}
               />
             ),
           };

inspect_ai/_view/www/src/app/log-list/LogItem.ts

@@ -0,0 +1,18 @@
+import { EvalLogHeader, LogFile } from "../../client/api/types";
+
+export interface LogItem {
+  id: string;
+  name: string;
+  url: string;
+}
+
+export interface FolderLogItem extends LogItem {
+  type: "folder";
+  itemCount: number;
+}
+
+export interface FileLogItem extends LogItem {
+  type: "file";
+  logFile: LogFile;
+  header?: EvalLogHeader;
+}

inspect_ai/_view/www/src/app/log-list/LogListFooter.module.css

@@ -0,0 +1,55 @@
+.footer {
+  border-top: solid var(--bs-light-border-subtle) 1px;
+  background: var(--bs-light-bg-subtle);
+  display: grid;
+  grid-template-columns: 0.5fr 1fr 0.5fr;
+  justify-content: space-between;
+
+  padding: 0.2em 1em;
+}
+
+.spinnerContainer {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  column-gap: 0.3em;
+  padding-top: 0.2em;
+}
+
+.spinner {
+  height: 11px;
+  width: 11px;
+  color: var(--bs-secondary);
+  border-width: 1px;
+}
+
+.label {
+  margin-left: 0.1em;
+  margin-top: -3px;
+}
+
+.right {
+  display: grid;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  justify-content: end;
+  align-items: center;
+  column-gap: 0.5em;
+}
+
+.left {
+  display: grid;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  justify-content: start;
+  align-items: center;
+  column-gap: 0.5em;
+}
+
+.center {
+  display: grid;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  justify-content: center;
+  align-items: center;
+  column-gap: 0.5em;
+}

inspect_ai/_view/www/src/app/log-list/LogListFooter.tsx

@@ -0,0 +1,67 @@
+interface LogListFooterProps {
+  logDir: string;
+  itemCount: number;
+  progressText?: string;
+}
+
+import clsx from "clsx";
+import { FC } from "react";
+import { useLogsListing, usePagination } from "../../state/hooks";
+import styles from "./LogListFooter.module.css";
+import { LogPager } from "./LogPager";
+import { kDefaultPageSize, kLogsPaginationId } from "./LogsPanel";
+
+export const LogListFooter: FC<LogListFooterProps> = ({
+  itemCount,
+  progressText,
+}) => {
+  // Get pagination info from the store
+  const { page, itemsPerPage } = usePagination(
+    kLogsPaginationId,
+    kDefaultPageSize,
+  );
+
+  // Get filtered count from the store
+  const { filteredCount } = useLogsListing();
+  const effectiveItemCount = filteredCount ?? itemCount;
+
+  const currentPage = page || 0;
+  const pageItemCount = Math.min(
+    itemsPerPage,
+    effectiveItemCount - currentPage * itemsPerPage,
+  );
+  const startItem = effectiveItemCount > 0 ? currentPage * itemsPerPage + 1 : 0;
+  const endItem = startItem + pageItemCount - 1;
+
+  return (
+    <div className={clsx("text-size-smaller", styles.footer)}>
+      <div className={clsx(styles.left)}>
+        {progressText ? (
+          <div className={clsx(styles.spinnerContainer)}>
+            <div
+              className={clsx("spinner-border", styles.spinner)}
+              role="status"
+            >
+              <span className={clsx("visually-hidden")}>{progressText}...</span>
+            </div>
+            <div className={clsx("text-style-secondary", styles.label)}>
+              {progressText}...
+            </div>
+          </div>
+        ) : undefined}
+      </div>
+      <div className={clsx(styles.center)}>
+        <LogPager itemCount={effectiveItemCount} />
+      </div>
+      <div className={clsx(styles.right)}>
+        <div>
+          {effectiveItemCount === 0
+            ? ""
+            : filteredCount !== undefined && filteredCount !== itemCount
+              ? `${startItem} - ${endItem} / ${effectiveItemCount} (${itemCount} total)`
+              : `${startItem} - ${endItem} / ${effectiveItemCount}`}
+        </div>
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/app/log-list/LogPager.module.css

@@ -0,0 +1,29 @@
+.pager {
+  --bs-pagination-padding-x: 0.5em;
+  --bs-pagination-padding-y: 0.15em;
+  --bs-pagination-font-size: 0.8rem;
+  --bs-pagination-padding-x: 0.5em;
+  --bs-pagination-padding-y: 0;
+  --bs-pagination-border-radius: var(--bs-border-radius);
+  margin-bottom: 0;
+}
+
+.item:not(:global(.disabled)) {
+  cursor: pointer;
+}
+
+.item {
+  margin-left: 0.2em;
+  margin-right: 0.2em;
+}
+
+.item:first-child,
+.item:last-child {
+  --bs-pagination-padding-x: 0.3em;
+}
+
+.item:first-child :global(.ii:before),
+.item:last-child :global(.ii:before) {
+  margin-top: -2px;
+  font-size: 0.8em;
+}

inspect_ai/_view/www/src/app/log-list/LogPager.tsx

@@ -0,0 +1,134 @@
+import clsx from "clsx";
+import { FC } from "react";
+
+import { usePagination } from "../../state/hooks";
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./LogPager.module.css";
+import { kDefaultPageSize, kLogsPaginationId } from "./LogsPanel";
+
+interface LogPagerProps {
+  itemCount: number;
+}
+
+export const LogPager: FC<LogPagerProps> = ({ itemCount }) => {
+  const { page, itemsPerPage, setPage } = usePagination(
+    kLogsPaginationId,
+    kDefaultPageSize,
+  );
+  const pageCount = Math.ceil(itemCount / itemsPerPage);
+  if (pageCount <= 1) {
+    return null;
+  }
+
+  const currentPage = page || 0;
+
+  const generatePaginationSegments = () => {
+    const segments: Array<{
+      type: "page" | "ellipsis";
+      page?: number;
+      key: string;
+    }> = [];
+
+    if (pageCount <= 5) {
+      // Show all pages if 5 or fewer
+      for (let i = 0; i < pageCount; i++) {
+        segments.push({ type: "page", page: i, key: `page-${i}` });
+      }
+    } else {
+      // There are more than 5 pages, use ellpsis to constrain the size
+
+      // first page
+      segments.push({ type: "page", page: 0, key: "page-0" });
+
+      // Determine the range around current page
+      const startPage = Math.max(1, currentPage - 1);
+      const endPage = Math.min(pageCount - 2, currentPage + 1);
+
+      // Add ellipsis before middle section if needed
+      if (startPage > 1) {
+        segments.push({ type: "ellipsis", key: "ellipsis-start" });
+      }
+
+      // Add middle section pages
+      for (let i = startPage; i <= endPage; i++) {
+        segments.push({ type: "page", page: i, key: `page-${i}` });
+      }
+
+      // Add ellipsis after middle section if needed
+      if (endPage < pageCount - 2) {
+        segments.push({ type: "ellipsis", key: "ellipsis-end" });
+      }
+
+      // last page
+      segments.push({
+        type: "page",
+        page: pageCount - 1,
+        key: `page-${pageCount - 1}`,
+      });
+    }
+
+    return segments;
+  };
+
+  const segments = generatePaginationSegments();
+
+  return (
+    <nav aria-label="Log Pagination">
+      <ul className={clsx("pagination", styles.pager)}>
+        <li className={clsx(currentPage === 0 ? "disabled" : "", styles.item)}>
+          <a
+            className={clsx("page-link")}
+            onClick={() => {
+              if (currentPage > 0) {
+                setPage(currentPage - 1);
+              }
+            }}
+          >
+            <i className={clsx(ApplicationIcons.navbar.back)} />
+          </a>
+        </li>
+
+        {segments.map((segment) => (
+          <li
+            key={segment.key}
+            className={clsx(
+              segment.type === "page" && segment.page === currentPage
+                ? "active"
+                : undefined,
+              segment.type === "ellipsis" ? "disabled" : undefined,
+              styles.item,
+            )}
+          >
+            <a
+              className={clsx("page-link")}
+              onClick={() => {
+                if (segment.type === "page" && segment.page !== undefined) {
+                  setPage(segment.page);
+                }
+              }}
+            >
+              {segment.type === "page" ? segment.page! + 1 : "..."}
+            </a>
+          </li>
+        ))}
+        <li
+          className={clsx(
+            currentPage + 1 >= pageCount ? "disabled" : "",
+            styles.item,
+          )}
+        >
+          <a
+            className={clsx("page-link")}
+            onClick={() => {
+              if (currentPage < pageCount) {
+                setPage(currentPage + 1);
+              }
+            }}
+          >
+            <i className={clsx(ApplicationIcons.navbar.forward)} />
+          </a>
+        </li>
+      </ul>
+    </nav>
+  );
+};

inspect_ai/_view/www/src/app/log-list/LogsFilterInput.module.css

@@ -0,0 +1,5 @@
+.filterInput {
+  font-size: 0.8em;
+  margin: 0em;
+  color: var(--bs-secondary);
+}

inspect_ai/_view/www/src/app/log-list/LogsFilterInput.tsx

@@ -0,0 +1,31 @@
+import { FC, useCallback } from "react";
+
+import clsx from "clsx";
+import { TextInput } from "../../components/TextInput";
+import { useLogsListing } from "../../state/hooks";
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./LogsFilterInput.module.css";
+
+export interface LogsToolbarProps {}
+
+export const LogsFilterInput: FC<LogsToolbarProps> = () => {
+  const { globalFilter, setGlobalFilter } = useLogsListing();
+  const debouncedUpdate = useCallback(
+    async (value: string) => {
+      setGlobalFilter(value);
+    },
+    [setGlobalFilter],
+  );
+
+  return (
+    <TextInput
+      icon={ApplicationIcons.filter}
+      value={globalFilter || ""}
+      onChange={(e) => {
+        debouncedUpdate(e.target.value);
+      }}
+      placeholder="Filter..."
+      className={clsx(styles.filterInput)}
+    />
+  );
+};

inspect_ai/_view/www/src/app/log-list/LogsPanel.module.css

@@ -0,0 +1,12 @@
+.panel {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template-rows: max-content max-content 1fr max-content;
+}
+
+.list {
+  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+}