inspect-ai 0.3.96__py3-none-any.whl → 0.3.97__py3-none-any.whl

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

@@ -228,6 +228,7 @@ body[class^="vscode-"] .accordion-button::after {
   mask-image: var(--bs-accordion-btn-icon);
 }
 
+.copy-button i.bi,
 body[class^="vscode-"] .navbar-text i.bi {
   color: var(--vscode-editor-foreground);
 }

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

@@ -14,7 +14,7 @@ import "./App.css";
 
 import ClipboardJS from "clipboard";
 import { FC, useCallback, useEffect } from "react";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider, useParams } from "react-router-dom";
 import { ClientAPI, HostMessage } from "../client/api/types.ts";
 import { useStore } from "../state/store.ts";
 import { AppRouter } from "./routing/AppRouter.tsx";
@@ -27,20 +27,33 @@ interface AppProps {
  * Renders the Main Application
  */
 export const App: FC<AppProps> = ({ api }) => {
+  // Whether the app was rehydrated
+  const rehydrated = useStore((state) => state.app.rehydrated);
+
+  const logs = useStore((state) => state.logs.logs);
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
+
+  const loadedLogFile = useStore((state) => state.log.loadedLog);
+  const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
+
+  const setIntialState = useStore((state) => state.appActions.setInitialState);
   const setAppStatus = useStore((state) => state.appActions.setStatus);
+
+  const refreshLogs = useStore((state) => state.logsActions.refreshLogs);
   const setLogs = useStore((state) => state.logsActions.setLogs);
   const selectLogFile = useStore((state) => state.logsActions.selectLogFile);
-  const setIntialState = useStore((state) => state.appActions.setInitialState);
-  const rehydrated = useStore((state) => state.app.rehydrated);
-  const refreshLogs = useStore((state) => state.logsActions.refreshLogs);
+
   const loadLog = useStore((state) => state.logActions.loadLog);
   const pollLog = useStore((state) => state.logActions.pollLog);
-  const loadedLogFile = useStore((state) => state.log.loadedLog);
-  const selectedLogFile = useStore((state) =>
-    state.logsActions.getSelectedLogFile(),
-  );
-  const selectedLogSummary = useStore((state) => state.log.selectedLogSummary);
-  const logs = useStore((state) => state.logs.logs);
+
+  const { sampleId } = useParams<{
+    logPath?: string;
+    tabId?: string;
+    sampleId?: string;
+    epoch?: string;
+    sampleTabId?: string;
+  }>();
+  const selectSample = useStore((state) => state.logActions.selectSample);
 
   // Load a specific log
   useEffect(() => {
@@ -53,6 +66,10 @@ export const App: FC<AppProps> = ({ api }) => {
           // Then load the log
           await loadLog(selectedLogFile);
 
+          if (!sampleId) {
+            selectSample(0);
+          }
+
           // Finally set loading to false
           setAppStatus({ loading: false, error: undefined });
         } catch (e) {

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

@@ -62,6 +62,7 @@ export const ApplicationIcons = {
     time: "bi bi-clock",
     execution: "bi bi-stopwatch",
   },
+  link: "bi bi-link-45deg",
   logging: loggingIcons,
   menu: "bi bi-list",
   messages: "bi bi-chat-right-text",
@@ -101,5 +102,9 @@ export const ApplicationIcons = {
   step: "bi bi-fast-forward-btn",
   subtask: "bi bi-subtract",
   transcript: "bi bi-list-columns-reverse",
+  tree: {
+    open: "bi bi-caret-down-fill",
+    closed: "bi bi-caret-right-fill",
+  },
   usage: "bi bi-stopwatch",
 };

inspect_ai/_view/www/src/app/content/RecordTree.module.css

@@ -0,0 +1,22 @@
+.keyPairContainer {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 0.5em;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border-bottom: solid 1px var(--bs-border-color);
+}
+
+.key {
+  display: grid;
+  grid-template-columns: 1em auto;
+  cursor: pointer;
+}
+
+.pre {
+  margin-bottom: 0;
+}
+
+.treeIcon {
+  margin-top: -3px;
+}

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

@@ -0,0 +1,370 @@
+import clsx from "clsx";
+import {
+  FC,
+  KeyboardEvent,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
+import { RenderedContent } from "./RenderedContent";
+
+import { useCollapsibleIds } from "../../state/hooks";
+import { useVirtuosoState } from "../../state/scrolling";
+import { useStore } from "../../state/store";
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./RecordTree.module.css";
+import { resolveStoreKeys } from "./record_processors/store";
+import { RecordProcessor } from "./record_processors/types";
+
+const kRecordTreeKey = "record-tree-key";
+
+interface RecordTreeProps {
+  id: string;
+  record: Record<string, unknown>;
+  className?: string | string[];
+  scrollRef?: RefObject<HTMLDivElement | null>;
+  defaultExpandLevel?: number;
+  processStore?: boolean;
+}
+
+/**
+ * Renders the MetaDataView component.
+ */
+export const RecordTree: FC<RecordTreeProps> = ({
+  id,
+  record,
+  className,
+  scrollRef,
+  defaultExpandLevel = 1,
+  processStore = false,
+}) => {
+  // The virtual list handle and state
+  const listHandle = useRef<VirtuosoHandle | null>(null);
+  const { getRestoreState } = useVirtuosoState(
+    listHandle,
+    `metadata-grid-${id}`,
+  );
+
+  // Collapse state
+  const [collapsedIds, setCollapsed, clearIds] = useCollapsibleIds(id);
+  const setCollapsedIds = useStore(
+    (state) => state.sampleActions.setCollapsedIds,
+  );
+
+  // Clear the collapsed ids when the component unmounts
+  useEffect(() => {
+    return () => {
+      clearIds();
+    };
+  }, [clearIds, id]);
+
+  // Tree-ify the record (creates a flat lsit of items with depth property)
+  const items = useMemo(() => {
+    return toTreeItems(
+      record,
+      collapsedIds || {},
+      processStore ? [resolveStoreKeys] : [],
+    );
+  }, [record, collapsedIds, processStore]);
+
+  // If collapsedIds is not set, we need to set it to the default state
+  useEffect(() => {
+    if (collapsedIds) {
+      return;
+    }
+
+    const defaultCollapsedIds = items.reduce((prev, item) => {
+      if (item.depth >= defaultExpandLevel && item.hasChildren) {
+        return {
+          ...prev,
+          [item.id]: true,
+        };
+      }
+      return prev;
+    }, {});
+    setCollapsedIds(id, defaultCollapsedIds);
+  }, [collapsedIds, items]);
+
+  // Keyboard handling for tree
+  const keyUpHandler = useCallback(
+    (itemId: string, index: number) => {
+      return (event: KeyboardEvent) => {
+        switch (event.key) {
+          case "Enter":
+            event.preventDefault();
+            event.stopPropagation();
+            setCollapsed(itemId, !collapsedIds?.[id]);
+            break;
+          case "ArrowDown": {
+            event.preventDefault();
+            event.stopPropagation();
+            // focus next
+            if (index === items.length - 1) {
+              return;
+            }
+            const treeRoot = document.getElementById(id);
+            const nextEl = treeRoot?.querySelector(
+              `.${kRecordTreeKey}[data-index="${index + 1}"]`,
+            );
+            if (nextEl) {
+              (nextEl as HTMLElement).focus();
+            }
+            break;
+          }
+          case "ArrowUp": {
+            event.preventDefault();
+            event.stopPropagation();
+            // focus previous
+            if (index === 0) {
+              return;
+            }
+            const treeRoot = document.getElementById(id);
+            const prevEl = treeRoot?.querySelector(
+              `.${kRecordTreeKey}[data-index="${index - 1}"]`,
+            );
+            if (prevEl) {
+              (prevEl as HTMLElement).focus();
+            }
+            break;
+          }
+          case "ArrowRight":
+            event.preventDefault();
+            event.stopPropagation();
+            setCollapsed(itemId, false);
+            break;
+          case "ArrowLeft":
+            event.preventDefault();
+            event.stopPropagation();
+            setCollapsed(itemId, true);
+            break;
+        }
+      };
+    },
+    [collapsedIds, items],
+  );
+
+  const renderRow = (index: number) => {
+    const item = items[index];
+
+    return (
+      <div
+        key={item.id}
+        className={clsx(styles.keyPairContainer, "text-size-small")}
+        style={{
+          paddingLeft: `${item.depth * 20}px`,
+        }}
+      >
+        <div
+          data-index={index}
+          className={clsx(
+            kRecordTreeKey,
+            styles.key,
+            "font-monospace",
+            "text-style-secondary",
+          )}
+          onKeyUp={keyUpHandler(item.id, index)}
+          tabIndex={0}
+          onClick={() => {
+            setCollapsed(item.id, !collapsedIds?.[item.id]);
+          }}
+        >
+          <div>
+            {item.hasChildren ? (
+              <pre className={clsx(styles.pre)}>
+                <i
+                  className={clsx(
+                    collapsedIds && collapsedIds[item.id]
+                      ? ApplicationIcons.tree.closed
+                      : ApplicationIcons.tree.open,
+                    styles.treeIcon,
+                  )}
+                />
+              </pre>
+            ) : undefined}
+          </div>
+          <pre className={clsx(styles.pre)}>{item.key}:</pre>
+        </div>
+        <div>
+          {item.value !== null &&
+          (!item.hasChildren || collapsedIds?.[item.id]) ? (
+            <RenderedContent
+              id={`${id}-value-${item.id}`}
+              entry={{
+                name: item.key,
+                value: item.value,
+              }}
+              renderOptions={{ renderString: "pre" }}
+            />
+          ) : undefined}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Virtuoso
+      ref={listHandle}
+      customScrollParent={scrollRef?.current ? scrollRef.current : undefined}
+      id={id}
+      style={{ width: "100%", height: "100%" }}
+      data={items}
+      defaultItemHeight={50}
+      itemContent={renderRow}
+      atBottomThreshold={30}
+      increaseViewportBy={{ top: 300, bottom: 300 }}
+      overscan={{
+        main: 10,
+        reverse: 10,
+      }}
+      className={clsx(className, "samples-list")}
+      skipAnimationFrameInResizeObserver={true}
+      restoreStateFrom={getRestoreState()}
+      tabIndex={0}
+    />
+  );
+};
+
+interface MetadataItem {
+  id: string;
+  key: string;
+  value: string | number | boolean | null;
+  depth: number;
+  hasChildren: boolean;
+}
+
+export const toTreeItems = (
+  record: Record<string, unknown>,
+  collapsedIds: Record<string, boolean>,
+  recordProcessors: RecordProcessor[] = [],
+  currentDepth = 0,
+  currentPath: string[] = [],
+): MetadataItem[] => {
+  if (!record) {
+    return [];
+  }
+
+  // Apply any record processors
+  if (recordProcessors.length > 0) {
+    for (const processor of recordProcessors) {
+      record = processor(record);
+    }
+  }
+
+  const result: MetadataItem[] = [];
+
+  Object.entries(record).forEach(([key, value], index) => {
+    const itemSegment = index.toString();
+    result.push(
+      ...processNodeRecursive(
+        key,
+        value,
+        currentDepth,
+        currentPath,
+        itemSegment,
+        collapsedIds,
+      ),
+    );
+  });
+
+  return result;
+};
+
+const processNodeRecursive = (
+  key: string,
+  value: unknown,
+  depth: number,
+  parentPath: string[],
+  thisPath: string,
+  collapsedIds: Record<string, boolean>,
+): MetadataItem[] => {
+  const items: MetadataItem[] = [];
+  const currentItemPath = [...parentPath, thisPath];
+  const id = `${depth}.${currentItemPath.join(".")}`;
+
+  if (isPrimitiveOrNull(value)) {
+    items.push({
+      id,
+      key,
+      value: value === undefined ? null : value,
+      depth,
+      hasChildren: false,
+    });
+    return items;
+  }
+
+  // For non-primitives (objects, arrays, functions, etc.)
+  let displayValue: string | number | boolean | null = null;
+  let processChildren = false;
+
+  if (Array.isArray(value)) {
+    processChildren = true;
+    displayValue = `Array(${value.length})`;
+  } else if (typeof value === "object" && value !== null) {
+    processChildren = true;
+    displayValue = `Object(${Object.keys(value).length})`;
+  } else {
+    // Other types like functions, symbols. These are treated as leaf nodes.
+    displayValue = String(value);
+    processChildren = false;
+  }
+
+  // Add the item
+  items.push({ id, key, value: displayValue, depth, hasChildren: true });
+
+  // Process children
+  if (processChildren && !collapsedIds[id]) {
+    const childDepth = depth + 1;
+    if (Array.isArray(value)) {
+      if (value.length > 0) {
+        value.forEach((element, index) => {
+          const elementKey = `[${index}]`;
+          const elementIdentifier = `[${index}]`;
+          items.push(
+            ...processNodeRecursive(
+              elementKey,
+              element,
+              childDepth,
+              currentItemPath,
+              elementIdentifier,
+              collapsedIds,
+            ),
+          );
+        });
+      }
+    } else if (typeof value === "object" && value !== null) {
+      // Process object properties
+      Object.entries(value as Record<string, unknown>).forEach(
+        ([childKey, childValue], index) => {
+          const childIdentifier = index.toString();
+          items.push(
+            ...processNodeRecursive(
+              childKey,
+              childValue,
+              childDepth,
+              currentItemPath,
+              childIdentifier,
+              collapsedIds,
+            ),
+          );
+        },
+      );
+    }
+  }
+
+  return items;
+};
+
+const isPrimitiveOrNull = (
+  value: unknown,
+): value is string | number | boolean | null | undefined => {
+  return (
+    value === null ||
+    value === undefined ||
+    typeof value === "string" ||
+    typeof value === "number" ||
+    typeof value === "boolean"
+  );
+};

inspect_ai/_view/www/src/app/content/RenderedContent.module.css

@@ -9,4 +9,9 @@
 
 .preWrap {
   white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.preCompact {
+  margin-bottom: 0;
 }

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

@@ -11,11 +11,12 @@ import { FC, Fragment, isValidElement, JSX, ReactNode } from "react";
 import JSONPanel from "../../components/JsonPanel";
 import { isJson } from "../../utils/json";
 import styles from "./RenderedContent.module.css";
-import { Buckets, ContentRenderer } from "./types";
+import { Buckets, ContentRenderer, RenderOptions } from "./types";
 
 interface RenderedContentProps {
   id: string;
   entry: { name: string; value: unknown };
+  renderOptions?: RenderOptions;
 }
 
 /**
@@ -24,6 +25,7 @@ interface RenderedContentProps {
 export const RenderedContent: FC<RenderedContentProps> = ({
   id,
   entry,
+  renderOptions = { renderString: "markdown" },
 }): JSX.Element => {
   // Explicitly specify return type
   if (entry.value === null) {
@@ -42,7 +44,7 @@ export const RenderedContent: FC<RenderedContentProps> = ({
     });
 
   if (renderer) {
-    const { rendered } = renderer.render(id, entry);
+    const { rendered } = renderer.render(id, entry, renderOptions);
     if (rendered !== undefined && isValidElement(rendered)) {
       return rendered;
     }
@@ -75,7 +77,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
         typeof entry.value === "string" && entry.value.indexOf("\u001b") > -1
       );
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       return {
         rendered: <ANSIDisplay output={entry.value} />,
       };
@@ -90,17 +92,18 @@ const contentRenderers: Record<string, ContentRenderer> = {
       }
       return false;
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       const obj = JSON5.parse(entry.value);
       return { rendered: <JSONPanel data={obj as Record<string, unknown>} /> };
     },
   },
+
   Model: {
     bucket: Buckets.intermediate,
     canRender: (entry) => {
       return typeof entry.value === "object" && entry.value._model;
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       return {
         rendered: (
           <Fragment>
@@ -115,9 +118,9 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "boolean";
     },
-    render: (id, entry) => {
+    render: (id, entry, options) => {
       entry.value = entry.value.toString();
-      return contentRenderers.String.render(id, entry);
+      return contentRenderers.String.render(id, entry, options);
     },
   },
   Number: {
@@ -125,9 +128,9 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "number";
     },
-    render: (id, entry) => {
+    render: (id, entry, options) => {
       entry.value = formatNumber(entry.value);
-      return contentRenderers.String.render(id, entry);
+      return contentRenderers.String.render(id, entry, options);
     },
   },
   String: {
@@ -135,11 +138,21 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "string";
     },
-    render: (_id, entry) => {
+    render: (_id, entry, options) => {
       const rendered = entry.value.trim();
-      return {
-        rendered,
-      };
+      if (options.renderString === "markdown") {
+        return {
+          rendered: rendered,
+        };
+      } else {
+        return {
+          rendered: (
+            <pre className={clsx(styles.preWrap, styles.preCompact)}>
+              {rendered}
+            </pre>
+          ),
+        };
+      }
     },
   },
   Array: {
@@ -162,7 +175,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
         return false;
       }
     },
-    render: (id, entry) => {
+    render: (id, entry, _options) => {
       const arrayMap: Record<string, unknown> = {};
       entry.value.forEach((e: unknown, index: number) => {
         arrayMap[`[${index}]`] = e;
@@ -186,7 +199,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "object" && entry.name === "web_search";
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       const results: ReactNode[] = [];
       results.push(
         <div className={styles.query}>
@@ -219,7 +232,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
         typeof entry.value === "string" && entry.name?.startsWith("web_browser")
       );
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       return {
         rendered: <pre className={styles.preWrap}>{entry.value}</pre>,
       };
@@ -230,7 +243,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "object" && entry.value._html;
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       return {
         rendered: entry.value._html,
       };
@@ -243,7 +256,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
         typeof entry.value === "string" && entry.value.startsWith("data:image/")
       );
     },
-    render: (_id, entry) => {
+    render: (_id, entry, _options) => {
       return {
         rendered: <img src={entry.value} />,
       };
@@ -254,7 +267,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
     canRender: (entry) => {
       return typeof entry.value === "object";
     },
-    render: (id, entry) => {
+    render: (id, entry, _options) => {
       return {
         rendered: (
           <MetaDataView