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

inspect_ai/_view/www/src/app/routing/navigationHooks.ts

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useFilteredSamples } from "../../state/hooks";
 import { useStore } from "../../state/store";
 import { directoryRelativeUrl } from "../../utils/uri";
@@ -32,6 +32,56 @@ export const useLogNavigation = () => {
   };
 };
 
+export const useSampleUrl = () => {
+  const { logPath, tabId, sampleTabId } = useParams<{
+    logPath?: string;
+    tabId?: string;
+    sampleTabId?: string;
+  }>();
+
+  const logDirectory = useStore((state) => state.logs.logs.log_dir);
+
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
+
+  // Helper function to resolve the log path for URLs
+  const resolveLogPath = useCallback(() => {
+    // If we have a logPath from URL params, use that
+    if (logPath) {
+      return logPath;
+    }
+
+    if (selectedLogFile) {
+      return directoryRelativeUrl(selectedLogFile, logDirectory);
+    }
+
+    return undefined;
+  }, [logPath, selectedLogFile, logDirectory]);
+
+  // Get a sample URL for a specific sample
+  const getSampleUrl = useCallback(
+    (
+      sampleId: string | number,
+      epoch: number,
+      specificSampleTabId?: string,
+    ) => {
+      const resolvedPath = resolveLogPath();
+      if (resolvedPath) {
+        const currentSampleTabId = specificSampleTabId || sampleTabId;
+        const url = sampleUrl(
+          resolvedPath,
+          sampleId,
+          epoch,
+          currentSampleTabId,
+        );
+        return url;
+      }
+      return undefined;
+    },
+    [resolveLogPath, tabId, sampleTabId],
+  );
+  return getSampleUrl;
+};
+
 /**
  * Hook that provides sample navigation utilities with proper URL handling
  * for use across the application
@@ -50,9 +100,7 @@ export const useSampleNavigation = () => {
   }>();
 
   // Get the store access values directly in the hook
-  const getSelectedLogFile = useStore(
-    (state) => state.logsActions.getSelectedLogFile,
-  );
+  const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
 
   // Helper function to resolve the log path for URLs
   const resolveLogPath = useCallback(() => {
@@ -61,15 +109,12 @@ export const useSampleNavigation = () => {
       return logPath;
     }
 
-    // Otherwise use the selected log file
-    const selectedLogFile = getSelectedLogFile();
-
     if (selectedLogFile) {
       return directoryRelativeUrl(selectedLogFile, logDirectory);
     }
 
     return undefined;
-  }, [logPath, getSelectedLogFile, logDirectory]);
+  }, [logPath, selectedLogFile, logDirectory]);
 
   // The samples
   const sampleSummaries = useFilteredSamples();
@@ -180,3 +225,13 @@ export const useSampleNavigation = () => {
     clearSampleUrl,
   };
 };
+
+export const useSampleDetailNavigation = () => {
+  const [searchParams, _setSearchParams] = useSearchParams();
+  const message = searchParams.get("message");
+  const event = searchParams.get("event");
+  return {
+    message,
+    event,
+  };
+};

inspect_ai/_view/www/src/app/routing/url.ts

@@ -1,3 +1,4 @@
+import { kSampleMessagesTabId, kSampleTranscriptTabId } from "../../constants";
 import { directoryRelativeUrl } from "../../utils/uri";
 
 export const kLogRouteUrlPattern = "/logs/:logPath/:tabId?/:sampleTabId?";
@@ -29,6 +30,38 @@ export const sampleUrl = (
   }
 };
 
+export const sampleEventUrl = (
+  eventId: string,
+  logPath: string,
+  sampleId?: string | number,
+  sampleEpoch?: string | number,
+) => {
+  const baseUrl = sampleUrl(
+    logPath,
+    sampleId,
+    sampleEpoch,
+    kSampleTranscriptTabId,
+  );
+
+  return `${baseUrl}?event=${eventId}`;
+};
+
+export const sampleMessageUrl = (
+  messageId: string,
+  logPath: string,
+  sampleId?: string | number,
+  sampleEpoch?: string | number,
+) => {
+  const baseUrl = sampleUrl(
+    logPath,
+    sampleId,
+    sampleEpoch,
+    kSampleMessagesTabId,
+  );
+
+  return `${baseUrl}?message=${messageId}`;
+};
+
 export const logUrl = (log_file: string, log_dir?: string, tabId?: string) => {
   const pathSegment = directoryRelativeUrl(log_file, log_dir);
   return logUrlRaw(pathSegment, tabId);
@@ -41,3 +74,15 @@ export const logUrlRaw = (log_segment: string, tabId?: string) => {
     return `/logs/${encodeURIComponent(log_segment)}`;
   }
 };
+
+export const supportsLinking = () => {
+  return (
+    location.hostname !== "localhost" &&
+    location.hostname !== "127.0.0.1" &&
+    location.protocol !== "vscode-webview:"
+  );
+};
+
+export const toFullUrl = (path: string) => {
+  return `${window.location.origin}${window.location.pathname}#${path}`;
+};

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

@@ -5,7 +5,8 @@
 }
 
 .body {
-  margin: 1em 1em 1em 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
 .scroller {

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

@@ -31,30 +31,37 @@ export const InlineSampleDisplay: FC = () => {
       : true,
   );
   const prevLogFile = usePrevious<string | undefined>(logSelection.loadedLog);
+  const prevSampleNeedsReload = usePrevious<number>(
+    sampleData.sampleNeedsReload,
+  );
+
   useEffect(() => {
     if (logSelection.logFile && logSelection.sample) {
       const currentSampleCompleted =
-        logSelection.sample?.completed !== undefined
+        logSelection.sample.completed !== undefined
           ? logSelection.sample.completed
           : true;
 
       if (
-        (prevLogFile !== undefined && prevLogFile !== logSelection.loadedLog) ||
-        sampleData.sample?.id !== logSelection.sample.id ||
-        sampleData.sample?.epoch !== logSelection.sample.epoch ||
+        (prevLogFile !== undefined && prevLogFile !== logSelection.logFile) ||
+        sampleData.selectedSampleIdentifier?.id !== logSelection.sample.id ||
+        sampleData.selectedSampleIdentifier?.epoch !==
+          logSelection.sample.epoch ||
         (prevCompleted !== undefined &&
-          currentSampleCompleted !== prevCompleted)
+          currentSampleCompleted !== prevCompleted) ||
+        prevSampleNeedsReload !== sampleData.sampleNeedsReload
       ) {
         loadSample(logSelection.logFile, logSelection.sample);
       }
     }
   }, [
-    logSelection.loadedLog,
+    logSelection.logFile,
     logSelection.sample?.id,
     logSelection.sample?.epoch,
     logSelection.sample?.completed,
-    sampleData.sample?.id,
-    sampleData.sample?.epoch,
+    sampleData.selectedSampleIdentifier?.id,
+    sampleData.selectedSampleIdentifier?.epoch,
+    sampleData.sampleNeedsReload,
   ]);
 
   // Scroll ref

inspect_ai/_view/www/src/app/samples/SampleDialog.module.css

@@ -0,0 +1,3 @@
+.modalBody {
+  padding: 1em 0;
+}

inspect_ai/_view/www/src/app/samples/SampleDialog.tsx

@@ -9,6 +9,8 @@ import { useStore } from "../../state/store";
 import { useSampleNavigation } from "../routing/navigationHooks";
 import { SampleDisplay } from "./SampleDisplay";
 
+import styles from "./SampleDialog.module.css";
+
 interface SampleDialogProps {
   id: string;
   title: string;
@@ -46,6 +48,9 @@ export const SampleDialog: FC<SampleDialogProps> = ({
       : true,
   );
   const prevLogFile = usePrevious<string | undefined>(logSelection.logFile);
+  const prevSampleNeedsReload = usePrevious<number>(
+    sampleData.sampleNeedsReload,
+  );
 
   useEffect(() => {
     if (logSelection.logFile && logSelection.sample) {
@@ -56,10 +61,12 @@ export const SampleDialog: FC<SampleDialogProps> = ({
 
       if (
         (prevLogFile !== undefined && prevLogFile !== logSelection.logFile) ||
-        sampleData.sample?.id !== logSelection.sample.id ||
-        sampleData.sample?.epoch !== logSelection.sample.epoch ||
+        sampleData.selectedSampleIdentifier?.id !== logSelection.sample.id ||
+        sampleData.selectedSampleIdentifier?.epoch !==
+          logSelection.sample.epoch ||
         (prevCompleted !== undefined &&
-          currentSampleCompleted !== prevCompleted)
+          currentSampleCompleted !== prevCompleted) ||
+        prevSampleNeedsReload !== sampleData.sampleNeedsReload
       ) {
         loadSample(logSelection.logFile, logSelection.sample);
       }
@@ -69,8 +76,9 @@ export const SampleDialog: FC<SampleDialogProps> = ({
     logSelection.sample?.id,
     logSelection.sample?.epoch,
     logSelection.sample?.completed,
-    sampleData.sample?.id,
-    sampleData.sample?.epoch,
+    sampleData.selectedSampleIdentifier?.id,
+    sampleData.selectedSampleIdentifier?.epoch,
+    sampleData.sampleNeedsReload,
   ]);
 
   // Get sample navigation utilities
@@ -139,6 +147,9 @@ export const SampleDialog: FC<SampleDialogProps> = ({
       onkeyup={handleKeyUp}
       visible={showingSampleDialog}
       onHide={onHide}
+      classNames={{
+        body: styles.modalBody,
+      }}
       showProgress={
         sampleData.status === "loading" || sampleData.status === "streaming"
       }

inspect_ai/_view/www/src/app/samples/SampleDisplay.module.css

@@ -41,5 +41,13 @@
 }
 
 .chat {
-  padding-top: 1em;
+  padding: 1em;
+}
+
+.padded {
+  padding: 1em;
+}
+
+.transcriptContainer {
+  padding-bottom: 1em;
 }

inspect_ai/_view/www/src/app/samples/SampleDisplay.tsx

@@ -1,5 +1,4 @@
 import { TabPanel, TabSet } from "../../components/TabSet";
-import { MetaDataView } from "../content/MetaDataView";
 
 import { escapeSelector } from "../../utils/html";
 import { isVscode } from "../../utils/vscode";
@@ -34,15 +33,23 @@ import {
 import { useFilteredSamples, useSampleData } from "../../state/hooks";
 import { useStore } from "../../state/store";
 import { formatTime } from "../../utils/format";
+import { estimateSize } from "../../utils/json";
 import { printHeadingHtml, printHtml } from "../../utils/print";
-import { sampleUrl } from "../routing/url";
+import { RecordTree } from "../content/RecordTree";
+import { useSampleDetailNavigation } from "../routing/navigationHooks";
+import {
+  sampleMessageUrl,
+  sampleUrl,
+  supportsLinking,
+  toFullUrl,
+} from "../routing/url";
 import { ModelTokenTable } from "../usage/ModelTokenTable";
 import { ChatViewVirtualList } from "./chat/ChatViewVirtualList";
 import { messagesFromEvents } from "./chat/messages";
 import styles from "./SampleDisplay.module.css";
 import { SampleSummaryView } from "./SampleSummaryView";
 import { SampleScoresView } from "./scores/SampleScoresView";
-import { TranscriptVirtualList } from "./transcript/TranscriptView";
+import { TranscriptVirtualList } from "./transcript/TranscriptVirtualList";
 
 interface SampleDisplayProps {
   id: string;
@@ -61,7 +68,10 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
   );
 
   const sampleData = useSampleData();
-  const sample = sampleData.sample;
+  const sample = useMemo(() => {
+    return sampleData.getSelectedSample();
+  }, [sampleData.selectedSampleIdentifier, sampleData.getSelectedSample]);
+
   const runningSampleData = sampleData.running;
 
   // Selected tab handling
@@ -105,6 +115,12 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
     epoch?: string;
   }>();
 
+  const getMessageUrl = (id: string) => {
+    return id && urlLogPath && supportsLinking()
+      ? toFullUrl(sampleMessageUrl(id, urlLogPath, urlSampleId, urlEpoch))
+      : undefined;
+  };
+
   // Tab selection
   const onSelectedTab = useCallback(
     (e: MouseEvent<HTMLElement>) => {
@@ -129,7 +145,11 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
     ],
   );
 
-  const sampleMetadatas = metadataViewsForSample(`${baseId}-${id}`, sample);
+  const sampleMetadatas = metadataViewsForSample(
+    `${baseId}-${id}`,
+    scrollRef,
+    sample,
+  );
 
   const tabsetId = `task-sample-details-tab-${id}`;
   const targetId = `${tabsetId}-content`;
@@ -153,6 +173,8 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
   // Is the sample running?
   const running = isRunning(sampleSummary, runningSampleData);
 
+  const sampleDetailNavigation = useSampleDetailNavigation();
+
   return (
     <Fragment>
       {sample || sampleSummary ? (
@@ -167,7 +189,7 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
         <TabPanel
           key={kSampleTranscriptTabId}
           id={kSampleTranscriptTabId}
-          className="sample-tab"
+          className={clsx("sample-tab", styles.transcriptContainer)}
           title="Transcript"
           onSelected={onSelectedTab}
           selected={
@@ -180,6 +202,7 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
             key={`${baseId}-transcript-display-${id}`}
             id={`${baseId}-transcript-display-${id}`}
             events={sampleEvents || []}
+            initialEventId={sampleDetailNavigation.event}
             running={running}
             scrollRef={scrollRef}
           />
@@ -197,10 +220,12 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
             key={`${baseId}-chat-${id}`}
             id={`${baseId}-chat-${id}`}
             messages={sampleMessages}
+            initialMessageId={sampleDetailNavigation.message}
             indented={true}
             scrollRef={scrollRef}
             toolCallStyle="complete"
             running={running}
+            getMessageUrl={getMessageUrl}
           />
         </TabPanel>
         <TabPanel
@@ -211,7 +236,11 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
           onSelected={onSelectedTab}
           selected={effectiveSelectedTab === kSampleScoringTabId}
         >
-          <SampleScoresView sample={sample} />
+          <SampleScoresView
+            sample={sample}
+            className={styles.padded}
+            scrollRef={scrollRef}
+          />
         </TabPanel>
         <TabPanel
           id={kSampleMetdataTabId}
@@ -220,8 +249,10 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
           onSelected={onSelectedTab}
           selected={effectiveSelectedTab === kSampleMetdataTabId}
         >
-          {sampleMetadatas.length > 0 ? (
-            <div className={clsx(styles.metadataPanel)}>{sampleMetadatas}</div>
+          {!sample || sampleMetadatas.length > 0 ? (
+            <div className={clsx(styles.padded, styles.fullWidth)}>
+              {sampleMetadatas}
+            </div>
           ) : (
             <NoContentsPanel text="No metadata" />
           )}
@@ -280,8 +311,8 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
         >
           {!sample ? (
             <NoContentsPanel text="JSON not available" />
-          ) : sample.messages.length > 100 ? (
-            <NoContentsPanel text="JSON too large too display" />
+          ) : estimateSize(sample.events) > 250000 ? (
+            <NoContentsPanel text="JSON too large to display" />
           ) : (
             <div className={clsx(styles.padded, styles.fullWidth)}>
               <JSONPanel
@@ -297,7 +328,11 @@ export const SampleDisplay: FC<SampleDisplayProps> = ({ id, scrollRef }) => {
   );
 };
 
-const metadataViewsForSample = (id: string, sample?: EvalSample) => {
+const metadataViewsForSample = (
+  id: string,
+  scrollRef: RefObject<HTMLDivElement | null>,
+  sample?: EvalSample,
+) => {
   if (!sample) {
     return [];
   }
@@ -326,17 +361,16 @@ const metadataViewsForSample = (id: string, sample?: EvalSample) => {
     sampleMetadatas.push(
       <Card key={`sample-time-${id}`}>
         <CardHeader label="Time" />
-        <CardBody>
-          <div className={clsx(styles.timePanel, "text-size-smaller")}>
-            <div className={clsx("text-style-label", "text-style-secondary")}>
-              Working
-            </div>
-            <div>{formatTime(sample.working_time)}</div>
-            <div className={clsx("text-style-label", "text-style-secondary")}>
-              Total
-            </div>
-            <div>{formatTime(sample.total_time)}</div>
-          </div>
+        <CardBody padded={false}>
+          <RecordTree
+            id={`task-sample-time-${id}`}
+            record={{
+              Working: formatTime(sample.working_time),
+              Total: formatTime(sample.total_time),
+            }}
+            className={clsx("tab-pane", styles.noTop)}
+            scrollRef={scrollRef}
+          />
         </CardBody>
       </Card>,
     );
@@ -346,11 +380,12 @@ const metadataViewsForSample = (id: string, sample?: EvalSample) => {
     sampleMetadatas.push(
       <Card key={`sample-metadata-${id}`}>
         <CardHeader label="Metadata" />
-        <CardBody>
-          <MetaDataView
-            id="task-sample-metadata-${id}"
-            entries={sample?.metadata as Record<string, unknown>}
+        <CardBody padded={false}>
+          <RecordTree
+            id={`task-sample-metadata-${id}`}
+            record={sample?.metadata as Record<string, unknown>}
             className={clsx("tab-pane", styles.noTop)}
+            scrollRef={scrollRef}
           />
         </CardBody>
       </Card>,
@@ -361,11 +396,13 @@ const metadataViewsForSample = (id: string, sample?: EvalSample) => {
     sampleMetadatas.push(
       <Card key={`sample-store-${id}`}>
         <CardHeader label="Store" />
-        <CardBody>
-          <MetaDataView
-            id="task-sample-store-${id}"
-            entries={sample?.store as Record<string, unknown>}
+        <CardBody padded={false}>
+          <RecordTree
+            id={`task-sample-store-${id}`}
+            record={sample?.store as Record<string, unknown>}
             className={clsx("tab-pane", styles.noTop)}
+            scrollRef={scrollRef}
+            processStore={true}
           />
         </CardBody>
       </Card>,

inspect_ai/_view/www/src/app/samples/chat/ChatMessage.module.css

@@ -5,17 +5,13 @@
   white-space: normal;
 }
 
-.padded {
-  padding-bottom: 1em;
-}
-
 .systemRole {
   opacity: 0.7;
 }
 
 .messageGrid {
   display: grid;
-  grid-template-columns: max-content auto;
+  grid-template-columns: max-content max-content max-content;
   column-gap: 0.3em;
   font-weight: 500;
   margin-bottom: 0.3em;
@@ -27,6 +23,15 @@
 }
 
 .messageContents.indented {
-  margin-left: 1.1rem;
-  padding-bottom: 0.8rem;
+  margin-left: 0rem;
+}
+
+.copyLink {
+  opacity: 0;
+  padding-left: 0;
+  padding-right: 2em;
+}
+
+.copyLink:hover {
+  opacity: 1;
 }

inspect_ai/_view/www/src/app/samples/chat/ChatMessage.tsx

@@ -6,10 +6,11 @@ import {
   ChatMessageTool,
   ChatMessageUser,
 } from "../../../@types/log";
+import { CopyButton } from "../../../components/CopyButton";
 import ExpandablePanel from "../../../components/ExpandablePanel";
+import { ApplicationIcons } from "../../appearance/icons";
 import styles from "./ChatMessage.module.css";
 import { MessageContents } from "./MessageContents";
-import { iconForMsg } from "./messages";
 import { ChatViewToolCallStyle } from "./types";
 
 interface ChatMessageProps {
@@ -18,7 +19,7 @@ interface ChatMessageProps {
   toolMessages: ChatMessageTool[];
   indented?: boolean;
   toolCallStyle: ChatViewToolCallStyle;
-  padded?: boolean;
+  getMessageUrl?: (id: string) => string | undefined;
 }
 
 export const ChatMessage: FC<ChatMessageProps> = ({
@@ -27,8 +28,11 @@ export const ChatMessage: FC<ChatMessageProps> = ({
   toolMessages,
   indented,
   toolCallStyle,
-  padded,
+  getMessageUrl,
 }) => {
+  const messageUrl =
+    message.id && getMessageUrl ? getMessageUrl(message.id) : undefined;
+
   const collapse = message.role === "system" || message.role === "user";
   return (
     <div
@@ -36,13 +40,21 @@ export const ChatMessage: FC<ChatMessageProps> = ({
         message.role,
         "text-size-base",
         styles.message,
-        padded ? styles.padded : undefined,
         message.role === "system" ? styles.systemRole : undefined,
+        message.role === "user" ? styles.userRole : undefined,
       )}
     >
       <div className={clsx(styles.messageGrid, "text-style-label")}>
-        <i className={iconForMsg(message)} />
         {message.role}
+        {messageUrl ? (
+          <CopyButton
+            icon={ApplicationIcons.link}
+            value={messageUrl}
+            className={clsx(styles.copyLink)}
+          />
+        ) : (
+          ""
+        )}
       </div>
       <div
         className={clsx(

inspect_ai/_view/www/src/app/samples/chat/ChatMessageRow.module.css

@@ -7,3 +7,12 @@
 .number {
   margin-top: 0.1em;
 }
+
+.user {
+  background-color: var(--bs-secondary-bg);
+  border-radius: var(--bs-border-radius);
+}
+
+.container {
+  padding: 0.4em 0.4em 0.4em 0.4em;
+}