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

inspect_ai/_view/www/src/app/log-view/{navbar → title-view}/PrimaryBar.tsx

@@ -1,24 +1,19 @@
 import clsx from "clsx";
-import { FC, useCallback } from "react";
+import { FC } from "react";
 import { EvalResults, EvalSpec, Status } from "../../../@types/log";
 import { RunningMetric } from "../../../client/api/types";
 import { CopyButton } from "../../../components/CopyButton";
 import { kModelNone } from "../../../constants";
+import { toDisplayScorers } from "../../../scoring/metrics";
 import { useStore } from "../../../state/store";
 import { filename } from "../../../utils/path";
-import { ApplicationIcons } from "../../appearance/icons";
 import { ModelRolesView } from "./ModelRolesView";
 import styles from "./PrimaryBar.module.css";
-import {
-  displayScorersFromRunningMetrics,
-  ResultsPanel,
-  toDisplayScorers,
-} from "./ResultsPanel";
+import { displayScorersFromRunningMetrics, ResultsPanel } from "./ResultsPanel";
 import { RunningStatusPanel } from "./RunningStatusPanel";
 import { CancelledPanel, ErroredPanel } from "./StatusPanel";
 
 interface PrimaryBarProps {
-  showToggle: boolean;
   status?: Status;
   evalResults?: EvalResults | null;
   runningMetrics?: RunningMetric[];
@@ -27,24 +22,17 @@ interface PrimaryBarProps {
 }
 
 export const PrimaryBar: FC<PrimaryBarProps> = ({
-  showToggle,
   status,
   evalResults,
   runningMetrics,
   evalSpec,
   sampleCount,
 }) => {
-  const offCanvas = useStore((state) => state.app.offcanvas);
-  const setOffCanvas = useStore((state) => state.appActions.setOffcanvas);
   const streamSamples = useStore((state) => state.capabilities.streamSamples);
   const selectedLogFile = useStore((state) => state.logs.selectedLogFile);
 
   const logFileName = selectedLogFile ? filename(selectedLogFile) : "";
 
-  const handleToggle = useCallback(() => {
-    setOffCanvas(!offCanvas);
-  }, [offCanvas, setOffCanvas]);
-
   const hasRunningMetrics = runningMetrics && runningMetrics.length > 0;
 
   return (
@@ -57,22 +45,6 @@ export const PrimaryBar: FC<PrimaryBarProps> = ({
           styles.container,
         )}
       >
-        {showToggle ? (
-          <button
-            id="sidebarToggle"
-            onClick={handleToggle}
-            className={clsx(
-              "btn",
-              offCanvas ? "d-md-none" : undefined,
-              styles.toggle,
-            )}
-            type="button"
-          >
-            <i className={ApplicationIcons.menu}></i>
-          </button>
-        ) : (
-          ""
-        )}
         <div className={styles.body}>
           <div className={styles.bodyContainer}>
             <div

inspect_ai/_view/www/src/app/log-view/{navbar → title-view}/ResultsPanel.tsx

@@ -1,27 +1,16 @@
 import clsx from "clsx";
 import { FC } from "react";
-import { Scores } from "../../../@types/log";
 import { RunningMetric } from "../../../client/api/types";
 import { LinkButton } from "../../../components/LinkButton";
 import { Modal } from "../../../components/Modal";
+import { metricDisplayName } from "../../../scoring/metrics";
+import { groupScorers } from "../../../scoring/scores";
+import { MetricSummary, ScoreSummary } from "../../../scoring/types";
 import { useProperty } from "../../../state/hooks";
 import { formatPrettyDecimal } from "../../../utils/format";
-import { metricDisplayName } from "../utils";
 import styles from "./ResultsPanel.module.css";
 import { ScoreGrid } from "./ScoreGrid";
 
-export interface ResultsMetric {
-  name: string;
-  params?: {};
-  value: number;
-}
-
-export interface ResultsScorer {
-  scorer: string;
-  reducer?: string;
-  metrics: ResultsMetric[];
-}
-
 const kMaxPrimaryScoreRows = 4;
 
 export const displayScorersFromRunningMetrics = (metrics?: RunningMetric[]) => {
@@ -35,7 +24,7 @@ export const displayScorersFromRunningMetrics = (metrics?: RunningMetric[]) => {
       : metric.scorer;
   };
 
-  const scorers: Record<string, ResultsScorer> = {};
+  const scorers: Record<string, ScoreSummary> = {};
   metrics.forEach((metric) => {
     if (metric.value !== undefined && metric.value !== null) {
       const key = getKey(metric);
@@ -62,29 +51,8 @@ export const displayScorersFromRunningMetrics = (metrics?: RunningMetric[]) => {
   return Object.values(scorers);
 };
 
-export const toDisplayScorers = (scores?: Scores): ResultsScorer[] => {
-  if (!scores) {
-    return [];
-  }
-
-  return scores.map((score) => {
-    return {
-      scorer: score.name,
-      reducer: score.reducer === null ? undefined : score.reducer,
-      metrics: Object.keys(score.metrics).map((key) => {
-        const metric = score.metrics[key];
-        return {
-          name: metric.name,
-          value: metric.value,
-          params: metric.params,
-        };
-      }),
-    };
-  });
-};
-
 interface ResultsPanelProps {
-  scorers?: ResultsScorer[];
+  scorers?: ScoreSummary[];
 }
 
 export const ResultsPanel: FC<ResultsPanelProps> = ({ scorers }) => {
@@ -121,7 +89,7 @@ export const ResultsPanel: FC<ResultsPanelProps> = ({ scorers }) => {
     );
   } else {
     const showReducer = scorers.findIndex((score) => !!score.reducer) !== -1;
-    const grouped = groupMetrics(scorers);
+    const grouped = groupScorers(scorers);
 
     // Try to select metrics with a group size 5 or less, if possible
     let primaryResults = grouped[0];
@@ -174,26 +142,8 @@ export const ResultsPanel: FC<ResultsPanelProps> = ({ scorers }) => {
   }
 };
 
-const metricsKey = (metrics: ResultsMetric[]): string => {
-  const metricKey = metrics.map((m) => m.name).join("");
-  return metricKey;
-};
-
-const groupMetrics = (scorers: ResultsScorer[]): ResultsScorer[][] => {
-  const results: Record<string, ResultsScorer[]> = {};
-  scorers.forEach((scorer) => {
-    if (scorer.metrics.length > 0) {
-      const key = metricsKey(scorer.metrics);
-      results[key] = results[key] || [];
-
-      results[key].push(scorer);
-    }
-  });
-  return Object.values(results);
-};
-
 interface VerticalMetricProps {
-  metric: ResultsMetric;
+  metric: MetricSummary;
   reducer?: string;
   isFirst: boolean;
   showReducer: boolean;

inspect_ai/_view/www/src/app/log-view/{navbar → title-view}/ScoreGrid.tsx

@@ -1,12 +1,12 @@
 import clsx from "clsx";
 import { FC, ReactNode } from "react";
 import { formatPrettyDecimal } from "../../../utils/format";
-import { ResultsScorer } from "./ResultsPanel";
 
+import { ScoreSummary } from "../../../scoring/types";
 import styles from "./ScoreGrid.module.css";
 
 interface ScoreGridProps {
-  scoreGroups: ResultsScorer[][];
+  scoreGroups: ScoreSummary[][];
   showReducer?: boolean;
   className?: string | string[];
   striped?: boolean;

inspect_ai/_view/www/src/app/log-view/{navbar → title-view}/SecondaryBar.tsx

@@ -215,7 +215,13 @@ const ParamSummary: FC<ParamSummaryProps> = ({ params }) => {
   });
   if (paraValues.length > 0) {
     return (
-      <code style={{ padding: 0, color: "var(--bs-body-color)" }}>
+      <code
+        style={{
+          padding: 0,
+          color: "var(--bs-body-color)",
+          overflowWrap: "anywhere",
+        }}
+      >
         {paraValues.join(", ")}
       </code>
     );

inspect_ai/_view/www/src/app/log-view/{navbar/Navbar.tsx → title-view/TitleView.tsx}

@@ -9,29 +9,27 @@ import {
 } from "../../../@types/log";
 import { RunningMetric } from "../../../client/api/types";
 import { useTotalSampleCount } from "../../../state/hooks";
-import styles from "./Navbar.module.css";
 import { PrimaryBar } from "./PrimaryBar";
 import { SecondaryBar } from "./SecondaryBar";
+import styles from "./TitleView.module.css";
 
-interface NavBarProps {
+interface TitleViewProps {
   evalSpec?: EvalSpec;
   evalResults?: EvalResults | null;
   runningMetrics?: RunningMetric[];
   evalPlan?: EvalPlan;
   evalStats?: EvalStats;
   status?: Status;
-  showToggle: boolean;
 }
 
 /**
  * Renders the Navbar
  */
-export const Navbar: FC<NavBarProps> = ({
+export const TitleView: FC<TitleViewProps> = ({
   evalSpec,
   evalPlan,
   evalResults,
   evalStats,
-  showToggle,
   status,
   runningMetrics,
 }) => {
@@ -41,7 +39,6 @@ export const Navbar: FC<NavBarProps> = ({
       <PrimaryBar
         evalSpec={evalSpec}
         evalResults={evalResults}
-        showToggle={showToggle}
         status={status}
         runningMetrics={runningMetrics}
         sampleCount={totalSampleCount}

inspect_ai/_view/www/src/app/navbar/Navbar.module.css

@@ -0,0 +1,57 @@
+.header {
+  border-bottom: solid var(--bs-border-color) 1px;
+  background: var(--bs-light);
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  justify-content: space-between;
+  padding: 0.2em 0.5em;
+  --bs-breadcrumb-divider: ">";
+  overflow: hidden;
+}
+
+.breadcrumbs {
+  border-left: solid var(--bs-border-color) 1px;
+  padding-left: 0.5em;
+  margin-bottom: 0;
+  min-width: 0;
+  overflow: hidden;
+  width: max-content;
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.ellipsis {
+  color: var(--bs-secondary);
+  font-weight: normal;
+}
+
+.left {
+  display: grid;
+  grid-template-columns: max-content max-content 1fr;
+  align-items: center;
+  column-gap: 0.75em;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.right {
+  display: grid;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  justify-content: end;
+  align-items: center;
+  column-gap: 0.5em;
+}
+
+.toolbarButton {
+  color: var(--bs-body);
+}
+
+.toolbarButton:hover {
+  color: var(--bs-link-hover-color);
+}
+
+.pathContainer {
+  overflow-x: hidden;
+}

inspect_ai/_view/www/src/app/navbar/Navbar.tsx

@@ -0,0 +1,117 @@
+import clsx from "clsx";
+import { FC, Fragment, ReactNode, useMemo, useRef } from "react";
+import { Link } from "react-router-dom";
+import { useStore } from "../../state/store";
+import { basename, dirname, ensureTrailingSlash } from "../../utils/path";
+import { ApplicationIcons } from "../appearance/icons";
+import { logUrl, useLogRouteParams } from "../routing/url";
+import styles from "./Navbar.module.css";
+import { useBreadcrumbTruncation } from "./useBreadcrumbTruncation";
+
+interface NavbarProps {
+  children?: ReactNode;
+}
+
+export const Navbar: FC<NavbarProps> = ({ children }) => {
+  const { logPath } = useLogRouteParams();
+  const logs = useStore((state) => state.logs.logs);
+  const baseLogDir = dirname(logs.log_dir || "");
+  const baseLogName = basename(logs.log_dir || "");
+  const pathContainerRef = useRef<HTMLDivElement>(null);
+
+  const backUrl = logUrl(
+    ensureTrailingSlash(dirname(logPath || "")),
+    logs.log_dir,
+  );
+
+  const segments = useMemo(() => {
+    const pathSegments = logPath ? logPath.split("/") : [];
+    const dirSegments: Array<{ text: string; url: string }> = [];
+    const currentSegment = [];
+    for (const pathSegment of pathSegments) {
+      currentSegment.push(pathSegment);
+      const segmentUrl = logUrl(currentSegment.join("/"), logs.log_dir);
+      dirSegments.push({
+        text: pathSegment,
+        url: segmentUrl,
+      });
+    }
+
+    return [
+      { text: prettyDirUri(baseLogDir) },
+      { text: baseLogName, url: logUrl("", logs.log_dir) },
+      ...dirSegments,
+    ];
+  }, [baseLogDir, baseLogName, logPath, logs.log_dir]);
+
+  const { visibleSegments, showEllipsis } = useBreadcrumbTruncation(
+    segments,
+    pathContainerRef,
+  );
+
+  return (
+    <nav
+      className={clsx("text-size-smaller", styles.header)}
+      aria-label="breadcrumb"
+    >
+      <div className={clsx(styles.left)}>
+        <Link to={backUrl} className={clsx(styles.toolbarButton)}>
+          <i className={clsx(ApplicationIcons.navbar.back)} />
+        </Link>
+        <Link
+          to={logUrl("", logs.log_dir)}
+          className={clsx(styles.toolbarButton)}
+        >
+          <i className={clsx(ApplicationIcons.navbar.home)} />
+        </Link>
+        <div className={clsx(styles.pathContainer)} ref={pathContainerRef}>
+          {logs.log_dir ? (
+            <ol className={clsx("breadcrumb", styles.breadcrumbs)}>
+              {visibleSegments?.map((segment, index) => {
+                const isLast = index === visibleSegments.length - 1;
+                const shouldShowEllipsis =
+                  showEllipsis && index === 1 && visibleSegments.length >= 2;
+
+                return (
+                  <Fragment key={index}>
+                    {shouldShowEllipsis && (
+                      <li className={clsx("breadcrumb-item", styles.ellipsis)}>
+                        <span>...</span>
+                      </li>
+                    )}
+                    <li
+                      className={clsx(
+                        styles.pathLink,
+                        "breadcrumb-item",
+                        isLast ? "active" : undefined,
+                      )}
+                    >
+                      {segment.url ? (
+                        <Link to={segment.url}>{segment.text}</Link>
+                      ) : (
+                        <span className={clsx(styles.pathSegment)}>
+                          {segment.text}
+                        </span>
+                      )}
+                    </li>
+                  </Fragment>
+                );
+              })}
+            </ol>
+          ) : (
+            ""
+          )}
+        </div>
+      </div>
+      <div className={clsx(styles.right)}>{children}</div>
+    </nav>
+  );
+};
+
+const prettyDirUri = (uri: string) => {
+  if (uri.startsWith("file://")) {
+    return uri.replace("file://", "");
+  } else {
+    return uri;
+  }
+};

inspect_ai/_view/www/src/app/navbar/useBreadcrumbTruncation.ts

@@ -0,0 +1,128 @@
+import { useEffect, useState, useCallback, RefObject } from "react";
+
+interface BreadcrumbSegment {
+  text: string;
+  url?: string;
+}
+
+interface TruncatedBreadcrumbs {
+  visibleSegments: BreadcrumbSegment[];
+  hiddenCount: number;
+  showEllipsis: boolean;
+}
+
+export const useBreadcrumbTruncation = (
+  segments: BreadcrumbSegment[],
+  containerRef: RefObject<HTMLElement | null>,
+): TruncatedBreadcrumbs => {
+  const [truncatedData, setTruncatedData] = useState<TruncatedBreadcrumbs>({
+    visibleSegments: segments,
+    hiddenCount: 0,
+    showEllipsis: false,
+  });
+
+  const measureAndTruncate = useCallback(() => {
+    if (!containerRef.current || segments.length <= 3) {
+      setTruncatedData({
+        visibleSegments: segments,
+        hiddenCount: 0,
+        showEllipsis: false,
+      });
+      return;
+    }
+
+    const container = containerRef.current;
+    const containerWidth = container.offsetWidth;
+
+    // Create a test element to measure breadcrumb widths
+    const testElement = document.createElement("ol");
+    testElement.className = "breadcrumb";
+    testElement.style.position = "absolute";
+    testElement.style.visibility = "hidden";
+    testElement.style.whiteSpace = "nowrap";
+    testElement.style.margin = "0";
+    testElement.style.padding = "0";
+
+    container.appendChild(testElement);
+
+    // Test if all segments fit
+    testElement.innerHTML = segments
+      .map((segment) => `<li class="breadcrumb-item">${segment.text}</li>`)
+      .join("");
+
+    if (testElement.scrollWidth <= containerWidth) {
+      container.removeChild(testElement);
+      setTruncatedData({
+        visibleSegments: segments,
+        hiddenCount: 0,
+        showEllipsis: false,
+      });
+      return;
+    }
+
+    // Find the maximum number of segments we can show
+    // Always keep first and last segments
+    const firstSegment = segments[0];
+    const lastSegment = segments[segments.length - 1];
+
+    let maxVisible = 2; // Start with just first and last
+
+    // Try adding segments from the end (most recent path) first
+    for (let endCount = 1; endCount < segments.length - 1; endCount++) {
+      const candidateSegments = [
+        firstSegment,
+        ...segments.slice(segments.length - 1 - endCount, -1),
+        lastSegment,
+      ];
+
+      // Test with ellipsis
+      const testHTML = [
+        `<li class="breadcrumb-item">${firstSegment.text}</li>`,
+        `<li class="breadcrumb-item">...</li>`,
+        ...segments
+          .slice(segments.length - 1 - endCount, -1)
+          .map((s) => `<li class="breadcrumb-item">${s.text}</li>`),
+        `<li class="breadcrumb-item">${lastSegment.text}</li>`,
+      ].join("");
+
+      testElement.innerHTML = testHTML;
+
+      if (testElement.scrollWidth <= containerWidth) {
+        maxVisible = candidateSegments.length;
+        setTruncatedData({
+          visibleSegments: candidateSegments,
+          hiddenCount: segments.length - candidateSegments.length,
+          showEllipsis: true,
+        });
+      } else {
+        break;
+      }
+    }
+
+    // If we couldn't fit any middle segments, just show first ... last
+    if (maxVisible === 2) {
+      setTruncatedData({
+        visibleSegments: [firstSegment, lastSegment],
+        hiddenCount: segments.length - 2,
+        showEllipsis: true,
+      });
+    }
+
+    container.removeChild(testElement);
+  }, [segments, containerRef]);
+
+  useEffect(() => {
+    measureAndTruncate();
+
+    const resizeObserver = new ResizeObserver(measureAndTruncate);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [measureAndTruncate]);
+
+  return truncatedData;
+};

inspect_ai/_view/www/src/app/plan/DatasetDetailView.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { EvalDataset } from "../../@types/log";
-import { MetaDataView } from "../content/MetaDataView";
 
 import { CSSProperties, FC } from "react";
+import { MetaDataGrid } from "../content/MetaDataGrid";
 import styles from "./DatasetDetailView.module.css";
 
 interface DatasetDetailViewProps {
@@ -28,11 +28,11 @@ export const DatasetDetailView: FC<DatasetDetailViewProps> = ({
   }
 
   return (
-    <MetaDataView
+    <MetaDataGrid
       className={clsx("text-size-base", styles.item)}
       entries={filtered}
-      tableOptions="borderless,sm"
       style={style}
+      plain={true}
     />
   );
 };

inspect_ai/_view/www/src/app/plan/DetailStep.tsx

@@ -20,16 +20,16 @@ export const DetailStep: FC<DetailStepProps> = ({
   return (
     <div className={clsx(className)}>
       {iconHtml} {name}
-      <div className={styles.container}>
-        {params ? (
+      {params && Object.keys(params).length > 0 ? (
+        <div className={styles.container}>
           <MetaDataGrid
             entries={params}
             className={clsx("text-size-small", styles.metadata)}
           />
-        ) : (
-          ""
-        )}
-      </div>
+        </div>
+      ) : (
+        ""
+      )}
     </div>
   );
 };

inspect_ai/_view/www/src/app/plan/PlanDetailView.module.css

@@ -23,6 +23,7 @@
 
 .planCol {
   margin-top: 0;
+  margin-bottom: 0.5em;
 }
 
 .container {

inspect_ai/_view/www/src/app/plan/ScorerDetailView.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { FC } from "react";
 import { ApplicationIcons } from "../appearance/icons";
-import styles from "./DatasetDetailView.module.css";
 import { DetailStep } from "./DetailStep";
+import styles from "./ScorerDetailView.module.css";
 
 interface ScorerDetailViewProps {
   name: string;

inspect_ai/_view/www/src/app/routing/AppRouter.tsx

@@ -5,10 +5,16 @@ import {
   Outlet,
   useLocation,
 } from "react-router-dom";
-import { storeImplementation } from "../../state/store";
+import { storeImplementation, useStore } from "../../state/store";
 import { AppErrorBoundary } from "../AppErrorBoundary";
+import { LogsPanel } from "../log-list/LogsPanel";
 import { LogViewContainer } from "../log-view/LogViewContainer";
-import { kLogRouteUrlPattern, kSampleRouteUrlPattern } from "./url";
+import { RouteDispatcher } from "./RouteDispatcher";
+import {
+  kLogRouteUrlPattern,
+  kLogsRoutUrlPattern as kLogsRouteUrlPattern,
+  kSampleRouteUrlPattern,
+} from "./url";
 
 // Create a layout component that includes the RouteTracker
 const AppLayout = () => {
@@ -21,6 +27,20 @@ const AppLayout = () => {
     }
   }, [location]);
 
+  // Get log selection state from store
+  const singleFileMode = useStore((state) => state.app.singleFileMode);
+
+  // Single file mode is a legacy mode that is used when an explicit
+  // file is passed via URL (task_file or log_file params) or via
+  // embedded state (VSCode)
+  if (singleFileMode) {
+    return (
+      <AppErrorBoundary>
+        <LogViewContainer />
+      </AppErrorBoundary>
+    );
+  }
+
   return (
     <AppErrorBoundary>
       <Outlet />
@@ -37,11 +57,15 @@ export const AppRouter = createHashRouter(
       children: [
         {
           index: true, // This will match exactly the "/" path
-          element: <LogViewContainer />,
+          element: <LogsPanel />,
+        },
+        {
+          path: kLogsRouteUrlPattern,
+          element: <LogsPanel />,
         },
         {
           path: kLogRouteUrlPattern,
-          element: <LogViewContainer />,
+          element: <RouteDispatcher />,
         },
         {
           path: kSampleRouteUrlPattern,