inspect-ai 0.3.62__py3-none-any.whl → 0.3.64__py3-none-any.whl

inspect_ai/_view/www/src/{App.mjs → App.tsx}

@@ -1,178 +1,181 @@
-import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import "prismjs/themes/prism.css";
+import "bootstrap/dist/css/bootstrap.css";
+
 import "prismjs";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-python";
+import "prismjs/themes/prism.css";
+
 import "../App.css";
-import "asciinema-player/dist/bundle/asciinema-player.css";
 
-import { default as ClipboardJS } from "clipboard";
-// @ts-ignore
-import { Offcanvas } from "bootstrap";
-import { html } from "htm/preact";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "preact/hooks";
-
-// Registration component
-import "./Register.mjs";
-
-import { debounce, sleep } from "./utils/sync.mjs";
-import { clearDocumentSelection } from "./components/Browser.mjs";
-import { AppErrorBoundary } from "./components/AppErrorBoundary.mjs";
-import { ErrorPanel } from "./components/ErrorPanel.mjs";
-import { ProgressBar } from "./components/ProgressBar.mjs";
-
-import { Sidebar } from "./sidebar/Sidebar.mjs";
-import { WorkSpace } from "./workspace/WorkSpace.mjs";
-import { FindBand } from "./components/FindBand.mjs";
-import { isVscode } from "./utils/Html.mjs";
-import { getVscodeApi } from "./utils/vscode";
-import { kDefaultSort } from "./constants.mjs";
+import { AppErrorBoundary } from "./AppErrorBoundary";
+import { ErrorPanel } from "./components/ErrorPanel";
+import { ProgressBar } from "./components/ProgressBar";
+import { clearDocumentSelection } from "./utils/browser";
+import { debounce, sleep } from "./utils/sync";
+
+import { FindBand } from "./components/FindBand";
+import { kDefaultSort } from "./constants";
 import {
   createEvalDescriptor,
   createSamplesDescriptor,
-} from "./samples/SamplesDescriptor.mjs";
-import { byEpoch, bySample, sortSamples } from "./samples/tools/SortFilter.mjs";
-import { resolveAttachments } from "./utils/attachments.mjs";
-import { filterSamples } from "./samples/tools/filters.mjs";
+} from "./samples/descriptor/samplesDescriptor";
+import { filterSamples } from "./samples/sample-tools/filters";
+import {
+  byEpoch,
+  bySample,
+  sortSamples,
+} from "./samples/sample-tools/SortFilter";
+import { resolveAttachments } from "./utils/attachments";
+import { getVscodeApi } from "./utils/vscode";
+import { Sidebar } from "./workspace/sidebar/Sidebar.tsx";
+import { WorkSpace } from "./workspace/WorkSpace";
 
+import ClipboardJS from "clipboard";
+import clsx from "clsx";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ClientAPI,
+  EvalLogHeader,
+  EvalSummary,
+  HostMessage,
+  LogFiles,
+  SampleSummary,
+} from "./api/types.ts";
 import {
   kEvalWorkspaceTabId,
   kInfoWorkspaceTabId,
   kSampleMessagesTabId,
   kSampleTranscriptTabId,
-} from "./constants.mjs";
+} from "./constants";
+import {
+  ApplicationState,
+  AppStatus,
+  Capabilities,
+  CurrentLog,
+  ScoreFilter,
+  ScoreLabel,
+} from "./types.ts";
+import { EvalSample } from "./types/log";
+
+interface AppProps {
+  api: ClientAPI;
+  applicationState?: ApplicationState;
+  saveApplicationState?: (state: ApplicationState) => void;
+  pollForLogs: boolean;
+  capabilities: Capabilities;
+}
 
 /**
  * Renders the Main Application
- *
- * @param {Object} props - The parameters for the component.
- * @param {import("./api/Types.ts").ClientAPI} props.api - The api that this view should use
- * @param {Object} [props.initialState] - Initial state for app (optional, used by VS Code extension)
- * @param {(state: Object) => void} [props.saveInitialState] - Save initial state for app (optional, used by VS Code extension)
- * @param {boolean} props.pollForLogs - Whether the application should poll for log changes
- * @returns {import("preact").JSX.Element} The App component.
  */
-export function App({
+export const App: React.FC<AppProps> = ({
   api,
-  initialState = undefined,
-  saveInitialState = undefined,
+  applicationState,
+  saveApplicationState,
   pollForLogs = true,
-}) {
+  capabilities,
+}) => {
   // List of Logs
-  const [logs, setLogs] = useState(
-    initialState?.logs || { log_dir: "", files: [] },
+  const [logs, setLogs] = useState<LogFiles>(
+    applicationState?.logs || { log_dir: "", files: [] },
   );
-  const [selectedLogIndex, setSelectedLogIndex] = useState(
-    initialState?.selectedLogIndex !== undefined
-      ? initialState.selectedLogIndex
+  const [selectedLogIndex, setSelectedLogIndex] = useState<number>(
+    applicationState?.selectedLogIndex !== undefined
+      ? applicationState.selectedLogIndex
       : -1,
   );
 
   // Log Headers
-  const [logHeaders, setLogHeaders] = useState(initialState?.logHeaders || {});
-  const [headersLoading, setHeadersLoading] = useState(
-    initialState?.headersLoading || false,
+  const [logHeaders, setLogHeaders] = useState<Record<string, EvalLogHeader>>(
+    applicationState?.logHeaders || {},
+  );
+  const [headersLoading, setHeadersLoading] = useState<boolean>(
+    applicationState?.headersLoading || false,
   );
 
-  /** @type {[import("./Types.mjs").CurrentLog, function(import("./Types.mjs").CurrentLog): void]} */
-  const [selectedLog, setSelectedLog] = useState(
-    initialState?.selectedLog || {
-      contents: undefined,
-      name: undefined,
-    },
+  const [selectedLog, setSelectedLog] = useState<CurrentLog | undefined>(
+    applicationState?.selectedLog,
   );
 
   // Workspace (the selected tab)
-  const [selectedWorkspaceTab, setSelectedWorkspaceTab] = useState(
-    initialState?.selectedWorkspaceTab || kEvalWorkspaceTabId,
+  const [selectedWorkspaceTab, setSelectedWorkspaceTab] = useState<string>(
+    applicationState?.selectedWorkspaceTab || kEvalWorkspaceTabId,
   );
-
-  // Samples
-  const [selectedSampleIndex, setSelectedSampleIndex] = useState(
-    initialState?.selectedSampleIndex !== undefined
-      ? initialState.selectedSampleIndex
+  const [selectedSampleIndex, setSelectedSampleIndex] = useState<number>(
+    applicationState?.selectedSampleIndex !== undefined
+      ? applicationState.selectedSampleIndex
       : -1,
   );
-  /** @type {[import("./types/log").EvalSample, function(import("./types/log").EvalSample): void]} */
-  const [selectedSample, setSelectedSample] = useState(
-    initialState?.selectedSample,
+  const [selectedSample, setSelectedSample] = useState<EvalSample | undefined>(
+    applicationState?.selectedSample,
   );
-  const [sampleStatus, setSampleStatus] = useState(initialState?.sampleStatus);
-  const [sampleError, setSampleError] = useState(initialState?.sampleError);
-  const [selectedSampleTab, setSelectedSampleTab] = useState(
-    initialState?.selectedSampleTab,
+  const [sampleStatus, setSampleStatus] = useState<"loading" | "ok" | "error">(
+    applicationState?.sampleStatus || "loading",
   );
-  const sampleScrollPosition = useRef(initialState?.sampleScrollPosition || 0);
-  const loadingSampleIndexRef = useRef(null);
-  const workspaceTabScrollPosition = useRef(
-    initialState?.workspaceTabScrollPosition || {},
+  const [sampleError, setSampleError] = useState<Error | undefined>(
+    applicationState?.sampleError,
   );
-
-  const [showingSampleDialog, setShowingSampleDialog] = useState(
-    initialState?.showingSampleDialog,
+  const [selectedSampleTab, setSelectedSampleTab] = useState<
+    string | undefined
+  >(applicationState?.selectedSampleTab);
+  const sampleScrollPosition = useRef<number>(
+    applicationState?.sampleScrollPosition || 0,
+  );
+  const loadingSampleIndexRef = useRef<number | null>(null);
+  const workspaceTabScrollPosition = useRef<Record<string, number>>(
+    applicationState?.workspaceTabScrollPosition || {},
   );
 
-  // App loading status
-  const [status, setStatus] = useState(
-    initialState?.status || {
-      loading: true,
-      error: undefined,
-    },
+  const [showingSampleDialog, setShowingSampleDialog] = useState<boolean>(
+    !!applicationState?.showingSampleDialog,
   );
 
-  // App host capabilities
-  const [capabilities, setCapabilities] = useState(
-    initialState?.capabilities || {
-      downloadFiles: true,
-      webWorkers: true,
-    },
+  // App loading status
+  const [status, setStatus] = useState<AppStatus>(
+    applicationState?.status || { loading: false },
   );
 
   // Other application state
-  const [offcanvas, setOffcanvas] = useState(initialState?.offcanvas || false);
-  const [showFind, setShowFind] = useState(initialState?.showFind || false);
+  const [offcanvas, setOffcanvas] = useState<boolean>(
+    applicationState?.offcanvas || false,
+  );
+  const [showFind, setShowFind] = useState<boolean>(
+    applicationState?.showFind || false,
+  );
 
   // Filtering and sorting
-  /**
-   * @type {[import("./Types.mjs").ScoreFilter, function(import("./Types.mjs").ScoreFilter): void]}
-   */
-  const [filter, setFilter] = useState(initialState?.filter || {});
-
-  /**
-   * @type {[string, function(string): void]}
-   */
-  const [epoch, setEpoch] = useState(initialState?.epoch || "all");
+  const [filter, setFilter] = useState<ScoreFilter>(
+    applicationState?.filter || {},
+  );
 
-  /**
-   * @type {[string, function(string): void]}
-   */
-  const [sort, setSort] = useState(initialState?.sort || kDefaultSort);
+  const [epoch, setEpoch] = useState<string>(applicationState?.epoch || "all");
+  const [sort, setSort] = useState<string>(
+    applicationState?.sort || kDefaultSort,
+  );
 
-  /**
-   * @type {[import("./Types.mjs").ScoreLabel[], function(import("./Types.mjs").ScoreLabel[]): void]}
-   */
-  const [scores, setScores] = useState(initialState?.scores || []);
+  const [scores, setScores] = useState<ScoreLabel[]>(
+    applicationState?.scores || [],
+  );
 
-  /**
-   * @type {[import("./Types.mjs").ScoreLabel, function(import("./Types.mjs").ScoreLabel): void]}
-   */
-  const [score, setScore] = useState(initialState?.score);
+  const [score, setScore] = useState<ScoreLabel | undefined>(
+    applicationState?.score,
+  );
 
   // Re-filter the samples
-  const [filteredSamples, setFilteredSamples] = useState(
-    initialState?.filteredSamples || [],
+  const [filteredSamples, setFilteredSamples] = useState<SampleSummary[]>(
+    applicationState?.filteredSamples || [],
+  );
+  const [groupBy, setGroupBy] = useState<"none" | "epoch" | "sample">(
+    applicationState?.groupBy || "none",
   );
-  const [groupBy, setGroupBy] = useState(initialState?.groupBy || "none");
-  const [groupByOrder, setGroupByOrder] = useState(
-    initialState?.groupByOrder || "asc",
+  const [groupByOrder, setGroupByOrder] = useState<"asc" | "desc">(
+    applicationState?.groupByOrder || "asc",
   );
 
-  const afterBodyElements = [];
   const saveState = useCallback(() => {
     const state = {
       logs,
@@ -188,7 +191,6 @@ export function App({
       selectedSampleTab,
       showingSampleDialog,
       status,
-      capabilities,
       offcanvas,
       showFind,
       filter,
@@ -202,8 +204,8 @@ export function App({
       sampleScrollPosition: sampleScrollPosition.current,
       workspaceTabScrollPosition: workspaceTabScrollPosition.current,
     };
-    if (saveInitialState) {
-      saveInitialState(state);
+    if (saveApplicationState) {
+      saveApplicationState(state);
     }
   }, [
     logs,
@@ -219,7 +221,6 @@ export function App({
     selectedSampleTab,
     showingSampleDialog,
     status,
-    capabilities,
     offcanvas,
     showFind,
     filter,
@@ -277,7 +278,6 @@ export function App({
     selectedSampleTab,
     showingSampleDialog,
     status,
-    capabilities,
     offcanvas,
     showFind,
     filter,
@@ -291,7 +291,7 @@ export function App({
   ]);
 
   const handleSampleShowingDialog = useCallback(
-    (show) => {
+    (show: boolean) => {
       setShowingSampleDialog(show);
       if (!show) {
         setSelectedSample(undefined);
@@ -308,15 +308,15 @@ export function App({
 
   useEffect(() => {
     const samples = selectedLog?.contents?.sampleSummaries || [];
-    const { result: prefiltered } = filterSamples(
-      evalDescriptor,
-      samples,
-      filter?.value,
-    );
+    const { result: prefiltered } =
+      evalDescriptor && filter?.value
+        ? filterSamples(evalDescriptor, samples, filter.value)
+        : { result: samples };
+
     const filtered = prefiltered.filter((sample) => {
       // Filter by epoch if specified
       if (epoch && epoch !== "all") {
-        if (epoch !== sample.epoch + "") {
+        if (epoch !== String(sample.epoch)) {
           return false;
         }
       }
@@ -324,50 +324,53 @@ export function App({
     });
 
     // Sort the samples
-    const { sorted, order } = sortSamples(sort, filtered, samplesDescriptor);
+    if (samplesDescriptor) {
+      const { sorted, order } = sortSamples(sort, filtered, samplesDescriptor);
+      setFilteredSamples(sorted);
+      setGroupByOrder(order);
+    }
 
     // Set the grouping
-    let grouping = "none";
-    if (samplesDescriptor?.evalDescriptor?.epochs > 1) {
+    let grouping: "none" | "epoch" | "sample" = "none";
+    if (
+      samplesDescriptor?.evalDescriptor?.epochs &&
+      samplesDescriptor.evalDescriptor.epochs > 1
+    ) {
       if (byEpoch(sort) || epoch !== "all") {
         grouping = "epoch";
       } else if (bySample(sort)) {
         grouping = "sample";
       }
     }
-
-    setFilteredSamples(sorted);
     setGroupBy(grouping);
-    setGroupByOrder(order);
   }, [selectedLog, filter, sort, epoch]);
 
   const evalDescriptor = useMemo(() => {
     return createEvalDescriptor(
       scores,
-      selectedLog.contents?.sampleSummaries,
-      selectedLog.contents?.eval?.config?.epochs || 1,
+      selectedLog?.contents?.eval?.config?.epochs || 1,
+      selectedLog?.contents?.sampleSummaries,
     );
   }, [selectedLog, scores]);
 
   const samplesDescriptor = useMemo(() => {
-    return createSamplesDescriptor(evalDescriptor, score);
+    return evalDescriptor && score
+      ? createSamplesDescriptor(evalDescriptor, score)
+      : undefined;
   }, [evalDescriptor, score]);
 
-  const refreshSampleTab = useCallback(
-    (sample) => {
-      if (selectedSampleTab === undefined) {
-        const defaultTab =
-          sample.events && sample.events.length > 0
-            ? kSampleTranscriptTabId
-            : kSampleMessagesTabId;
-        setSelectedSampleTab(defaultTab);
-      }
-    },
-    [selectedSampleTab, showingSampleDialog],
-  );
+  useEffect(() => {
+    if (selectedSampleTab === undefined && selectedSample) {
+      setSelectedSampleTab(
+        selectedSample.events && selectedSample.events.length > 0
+          ? kSampleTranscriptTabId
+          : kSampleMessagesTabId,
+      );
+    }
+  }, [selectedSample, selectedSampleTab]);
 
   // The main application reference
-  const mainAppRef = useRef();
+  const mainAppRef = useRef<HTMLDivElement>(null);
 
   // Loads a sample
   useEffect(() => {
@@ -408,30 +411,34 @@ export function App({
       api
         .get_log_sample(selectedLog.name, summary.id, summary.epoch)
         .then((sample) => {
-          // migrate transcript to new structure
-          // @ts-ignore
-          if (sample.transcript) {
-            // @ts-ignore
-            sample.events = sample.transcript.events;
-            // @ts-ignore
-            sample.attachments = sample.transcript.content;
+          if (sample) {
+            // This migrates old samples (with raw transcript element)
+            // to the new structure (hence the type bypass).
+            const anySample = sample as any;
+            if (anySample.transcript) {
+              sample.events = anySample.transcript.events;
+              sample.attachments = anySample.transcript.content;
+            }
+            sample.attachments = sample.attachments || {};
+            sample.input = resolveAttachments(sample.input, sample.attachments);
+            sample.messages = resolveAttachments(
+              sample.messages,
+              sample.attachments,
+            );
+            sample.events = resolveAttachments(
+              sample.events,
+              sample.attachments,
+            );
+            sample.attachments = {};
+
+            sampleScrollPosition.current = 0;
+            setSelectedSample(sample);
+
+            setSampleStatus("ok");
+            loadingSampleIndexRef.current = null;
+          } else {
+            throw Error("Unable to load sample - an unknown error occurred.");
           }
-          sample.attachments = sample.attachments || {};
-          sample.input = resolveAttachments(sample.input, sample.attachments);
-          sample.messages = resolveAttachments(
-            sample.messages,
-            sample.attachments,
-          );
-          sample.events = resolveAttachments(sample.events, sample.attachments);
-          sample.attachments = {};
-
-          sampleScrollPosition.current = 0;
-          setSelectedSample(sample);
-
-          refreshSampleTab(sample);
-
-          setSampleStatus("ok");
-          loadingSampleIndexRef.current = null;
         })
         .catch((e) => {
           setSampleStatus("error");
@@ -473,10 +480,10 @@ export function App({
         for (const fileList of fileLists) {
           const headers = await api.get_log_headers(fileList);
           setLogHeaders((prev) => {
-            const updatedHeaders = {};
+            const updatedHeaders: Record<string, EvalLogHeader> = {};
             headers.forEach((header, index) => {
               const logFile = fileList[index];
-              updatedHeaders[logFile] = header;
+              updatedHeaders[logFile] = header as EvalLogHeader;
             });
             return { ...prev, ...updatedHeaders };
           });
@@ -485,16 +492,18 @@ export function App({
             await sleep(5000); // Pause between chunks
           }
         }
-      } catch (e) {
-        if (e.message === "Load failed" || e.message === "Failed to fetch") {
+      } catch (e: unknown) {
+        if (
+          e instanceof Error &&
+          (e.message === "Load failed" || e.message === "Failed to fetch")
+        ) {
           // This will happen if the server disappears (e.g. inspect view is terminated)
           setStatus({ loading: false });
         } else {
           console.log(e);
-          setStatus({ loading: false, error: e });
+          setStatus({ loading: false, error: e as Error });
         }
       }
-
       setHeadersLoading(false);
     };
 
@@ -506,15 +515,9 @@ export function App({
    *
    * Determines whether the workspace tab should display samples or info,
    * depending on the presence of samples and the log status.
-   *
-   * @param {import("./api/Types.ts").EvalSummary} log - The log object containing sample summaries and status.
-   * @returns {void}
    */
   const resetWorkspace = useCallback(
-    /**
-     * @param {import("./api/Types.ts").EvalSummary} log
-     */
-    (log) => {
+    (log: EvalSummary) => {
       // Reset the workspace tab
       const hasSamples =
         !!log.sampleSummaries && log.sampleSummaries.length > 0;
@@ -573,7 +576,7 @@ export function App({
           }
         } catch (e) {
           console.log(e);
-          setStatus({ loading: false, error: e });
+          setStatus({ loading: false, error: e as Error });
         }
       } else if (logs.log_dir && logs.files.length === 0) {
         setStatus({
@@ -586,36 +589,31 @@ export function App({
     };
 
     loadSpecificLog();
-  }, [
-    selectedLogIndex,
-    logs,
-    capabilities,
-    selectedLog,
-    setSelectedLog,
-    setStatus,
-  ]);
+  }, [selectedLogIndex, logs, selectedLog, setSelectedLog, setStatus]);
 
   // Load the list of logs
-  const loadLogs = async () => {
+  const loadLogs = async (): Promise<LogFiles> => {
     try {
       const result = await api.get_log_paths();
+
       return result;
     } catch (e) {
       // Show an error
       console.log(e);
-      setStatus({ loading: false, error: e });
+      setStatus({ loading: false, error: e as Error });
+      return { log_dir: "", files: [] };
     }
   };
 
   // Load a specific log file
-  const loadLog = async (logFileName) => {
+  const loadLog = async (logFileName: string) => {
     try {
       const logContents = await api.get_log_summary(logFileName);
       return logContents;
     } catch (e) {
       // Show an error
       console.log(e);
-      setStatus({ loading: false, error: e });
+      setStatus({ loading: false, error: e as Error });
     }
   };
 
@@ -629,10 +627,10 @@ export function App({
         if (log.status !== "started") {
           setLogHeaders((prev) => {
             const updatedState = { ...prev };
-            const freshHeaders = {
+            const freshHeaders: EvalLogHeader = {
               eval: log.eval,
               plan: log.plan,
-              results: log.results,
+              results: log.results !== null ? log.results : undefined,
               stats: log.stats,
               status: log.status,
               version: log.version,
@@ -655,12 +653,12 @@ export function App({
     } catch (e) {
       // Show an error
       console.log(e);
-      setStatus({ loading: false, error: e });
+      setStatus({ loading: false, error: e as Error });
     }
   }, [logs, selectedLogIndex, setStatus, setSelectedLog, setLogHeaders]);
 
   const showLogFile = useCallback(
-    async (logUrl) => {
+    async (logUrl: string) => {
       const index = logs.files.findIndex((val) => {
         return logUrl.endsWith(val.name);
       });
@@ -668,11 +666,11 @@ export function App({
         setSelectedLogIndex(index);
       } else {
         const result = await loadLogs();
-        const idx = result.files.findIndex((file) => {
+        const idx = result?.files.findIndex((file) => {
           return logUrl.endsWith(file.name);
         });
-        setLogs(result);
-        setSelectedLogIndex(idx > -1 ? idx : 0);
+        setLogs(result || { log_dir: "", files: [] });
+        setSelectedLogIndex(idx && idx > -1 ? idx : 0);
       }
     },
     [logs, setSelectedLogIndex, setLogs],
@@ -680,19 +678,20 @@ export function App({
 
   const refreshLogList = useCallback(async () => {
     const currentLog = logs.files[selectedLogIndex > -1 ? selectedLogIndex : 0];
-
     const refreshedLogs = await loadLogs();
-    const newIndex = refreshedLogs.files.findIndex((file) => {
+    setLogs(refreshedLogs || { log_dir: "", files: [] });
+
+    const newIndex = refreshedLogs?.files.findIndex((file) => {
       return currentLog.name.endsWith(file.name);
     });
-    setLogs(refreshedLogs);
-    setSelectedLogIndex(newIndex);
+    if (newIndex !== undefined) {
+      setSelectedLogIndex(newIndex);
+    }
   }, [logs, selectedLogIndex, setSelectedLogIndex, setLogs]);
 
-  const onMessage = useMemo(() => {
-    return async (e) => {
-      const type = e.data.type || e.data.message;
-      switch (type) {
+  const onMessage = useCallback(
+    async (e: HostMessage) => {
+      switch (e.data.type) {
         case "updateState": {
           if (e.data.url) {
             const decodedUrl = decodeURIComponent(e.data.url);
@@ -716,8 +715,9 @@ export function App({
           break;
         }
       }
-    };
-  }, [logs, showLogFile, refreshLogList]);
+    },
+    [logs, showLogFile, refreshLogList],
+  );
 
   // listen for updateState messages from vscode
   useEffect(() => {
@@ -732,29 +732,13 @@ export function App({
       // See whether a specific task_file has been passed.
       const urlParams = new URLSearchParams(window.location.search);
 
-      // Determine the capabilities
-      const extensionVersionEl = document.querySelector(
-        'meta[name="inspect-extension:version"]',
-      );
-      const extensionVersion = extensionVersionEl
-        ? extensionVersionEl.getAttribute("content")
-        : undefined;
-
-      if (isVscode()) {
-        if (!extensionVersion) {
-          setCapabilities({ downloadFiles: false, webWorkers: false });
-        }
-      }
-
-      setOffcanvas(true);
-
       // If the URL provides a task file, load that
       const logPath = urlParams.get("task_file");
 
       // Replace spaces with a '+' sign:
       const resolvedLogPath = logPath ? logPath.replace(" ", "+") : logPath;
       const load = resolvedLogPath
-        ? async () => {
+        ? async (): Promise<LogFiles> => {
             return {
               log_dir: "",
               files: [{ name: resolvedLogPath }],
@@ -764,7 +748,7 @@ export function App({
 
       const embeddedState = document.getElementById("logview-state");
       if (embeddedState) {
-        const state = JSON.parse(embeddedState.textContent);
+        const state = JSON.parse(embeddedState.textContent || "");
         onMessage({ data: state });
       } else {
         const result = await load();
@@ -828,31 +812,6 @@ export function App({
   // Configure an app envelope specific to the current state
   // if there are no log files, then don't show sidebar
   const fullScreen = logs.files.length === 1 && !logs.log_dir;
-  const sidebar =
-    !fullScreen && selectedLog.contents
-      ? html`
-          <${Sidebar}
-            logs=${logs}
-            logHeaders=${logHeaders}
-            loading=${headersLoading}
-            offcanvas=${offcanvas}
-            selectedIndex=${selectedLogIndex}
-            onSelectedIndexChanged=${(index) => {
-              setSelectedLogIndex(index);
-
-              // hide the sidebar offcanvas
-              var myOffcanvas = document.getElementById("sidebarOffCanvas");
-              var bsOffcanvas = Offcanvas.getInstance(myOffcanvas);
-              if (bsOffcanvas) {
-                bsOffcanvas.hide();
-              }
-            }}
-          />
-        `
-      : "";
-
-  const fullScreenClz = fullScreen ? " full-screen" : "";
-  const offcanvasClz = offcanvas ? " off-canvas" : "";
 
   const hideFind = useCallback(() => {
     clearDocumentSelection();
@@ -861,12 +820,10 @@ export function App({
     }
   }, [showFind, setShowFind]);
 
-  const showToggle = logs.files.length > 1 || logs.log_dir;
+  const showToggle = logs.files.length > 1 || !!logs.log_dir || false;
 
   /**
    * Determines the sample mode based on the selected log's contents.
-   *
-   * @type {import("./Types.mjs").SampleMode}
    */
   const sampleMode =
     selectedLog?.contents?.sampleSummaries === undefined ||
@@ -875,104 +832,135 @@ export function App({
       : selectedLog.contents.sampleSummaries.length === 1
         ? "single"
         : "many";
-  return html`
-    <${AppErrorBoundary}>
-    ${sidebar}
-    <div ref=${mainAppRef} class="app-main-grid${fullScreenClz}${offcanvasClz}" tabIndex="0" onKeyDown=${(
-      e,
-    ) => {
-      // regular browsers user their own find
-      if (!getVscodeApi()) {
-        return;
-      }
+  return (
+    <AppErrorBoundary>
+      {!fullScreen && selectedLog?.contents ? (
+        <Sidebar
+          logs={logs}
+          logHeaders={logHeaders}
+          loading={headersLoading}
+          offcanvas={offcanvas}
+          setOffcanvas={setOffcanvas}
+          selectedIndex={selectedLogIndex}
+          onSelectedIndexChanged={(index) => {
+            setSelectedLogIndex(index);
+            setOffcanvas(false);
+          }}
+        />
+      ) : undefined}
+      <div
+        ref={mainAppRef}
+        className={clsx(
+          "app-main-grid",
+          fullScreen ? "full-screen" : undefined,
+          offcanvas ? "off-canvas" : undefined,
+        )}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          // regular browsers user their own find
+          if (!getVscodeApi()) {
+            return;
+          }
 
-      if ((e.ctrlKey || e.metaKey) && e.key === "f") {
-        setShowFind(true);
-      } else if (e.key === "Escape") {
-        hideFind();
-      }
-    }}>
-      ${showFind ? html`<${FindBand} hideBand=${hideFind} />` : ""}
-      <${ProgressBar} animating=${status.loading}  containerStyle=${{
-        background: "var(--bs-light)",
-        marginBottom: "-1px",
-      }}/>
-      ${
-        status.error
-          ? html`<${ErrorPanel}
-              title="An error occurred while loading this task."
-              error=${status.error}
-            />`
-          : html`<${WorkSpace}
-              task_id=${selectedLog?.contents?.eval?.task_id}
-              logFileName=${selectedLog?.name}
-              evalStatus=${selectedLog?.contents?.status}
-              evalError=${selectedLog?.contents?.error}
-              evalVersion=${selectedLog?.contents?.version}
-              evalSpec=${selectedLog?.contents?.eval}
-              evalPlan=${selectedLog?.contents?.plan}
-              evalStats=${selectedLog?.contents?.stats}
-              evalResults=${selectedLog?.contents?.results}
-              showToggle=${showToggle}
-              samples=${filteredSamples}
-              sampleMode=${sampleMode}
-              groupBy=${groupBy}
-              groupByOrder=${groupByOrder}
-              sampleStatus=${sampleStatus}
-              sampleError=${sampleError}
-              samplesDescriptor=${samplesDescriptor}
-              refreshLog=${refreshLog}
-              offcanvas=${offcanvas}
-              capabilities=${capabilities}
-              selected=${selectedLogIndex}
-              selectedSample=${selectedSample}
-              selectedSampleIndex=${selectedSampleIndex}
-              setSelectedSampleIndex=${setSelectedSampleIndex}
-              showingSampleDialog=${showingSampleDialog}
-              setShowingSampleDialog=${handleSampleShowingDialog}
-              selectedTab=${selectedWorkspaceTab}
-              setSelectedTab=${setSelectedWorkspaceTab}
-              selectedSampleTab=${selectedSampleTab}
-              setSelectedSampleTab=${setSelectedSampleTab}
-              sort=${sort}
-              setSort=${setSort}
-              epochs=${selectedLog?.contents?.eval?.config?.epochs}
-              epoch=${epoch}
-              setEpoch=${setEpoch}
-              filter=${filter}
-              setFilter=${setFilter}
-              score=${score}
-              setScore=${setScore}
-              scores=${scores}
-              sampleScrollPositionRef=${sampleScrollPosition}
-              setSampleScrollPosition=${setSampleScrollPosition}
-              workspaceTabScrollPositionRef=${workspaceTabScrollPosition}
-              setWorkspaceTabScrollPosition=${setWorkspaceTabScrollPosition}
-            />`
-      }
-    </div>
-    ${afterBodyElements}
-    </${AppErrorBoundary}>
-  `;
+          if ((e.ctrlKey || e.metaKey) && e.key === "f") {
+            setShowFind(true);
+          } else if (e.key === "Escape") {
+            hideFind();
+          }
+        }}
+      >
+        {showFind ? <FindBand hideBand={hideFind} /> : ""}
+        <ProgressBar animating={status?.loading} />
+        {status?.error ? (
+          <ErrorPanel
+            title="An error occurred while loading this task."
+            error={status.error}
+          />
+        ) : (
+          <WorkSpace
+            task_id={selectedLog?.contents?.eval?.task_id}
+            logFileName={selectedLog?.name}
+            evalStatus={selectedLog?.contents?.status}
+            evalError={filterNull(selectedLog?.contents?.error)}
+            evalVersion={selectedLog?.contents?.version}
+            evalSpec={selectedLog?.contents?.eval}
+            evalPlan={selectedLog?.contents?.plan}
+            evalStats={selectedLog?.contents?.stats}
+            evalResults={filterNull(selectedLog?.contents?.results)}
+            showToggle={showToggle}
+            samples={filteredSamples}
+            sampleMode={sampleMode}
+            groupBy={groupBy}
+            groupByOrder={groupByOrder}
+            sampleStatus={sampleStatus}
+            sampleError={sampleError}
+            samplesDescriptor={samplesDescriptor}
+            refreshLog={refreshLog}
+            offcanvas={offcanvas}
+            setOffcanvas={setOffcanvas}
+            capabilities={capabilities}
+            selectedSample={selectedSample}
+            selectedSampleIndex={selectedSampleIndex}
+            setSelectedSampleIndex={setSelectedSampleIndex}
+            showingSampleDialog={showingSampleDialog}
+            setShowingSampleDialog={handleSampleShowingDialog}
+            selectedTab={selectedWorkspaceTab}
+            setSelectedTab={setSelectedWorkspaceTab}
+            selectedSampleTab={selectedSampleTab}
+            setSelectedSampleTab={setSelectedSampleTab}
+            sort={sort}
+            setSort={setSort}
+            epochs={selectedLog?.contents?.eval?.config?.epochs}
+            epoch={epoch}
+            setEpoch={setEpoch}
+            filter={filter}
+            setFilter={setFilter}
+            score={score}
+            setScore={setScore}
+            scores={scores}
+            sampleScrollPositionRef={sampleScrollPosition}
+            setSampleScrollPosition={setSampleScrollPosition}
+            workspaceTabScrollPositionRef={workspaceTabScrollPosition}
+            setWorkspaceTabScrollPosition={setWorkspaceTabScrollPosition}
+          />
+        )}
+      </div>
+    </AppErrorBoundary>
+  );
+};
+
+const filterNull = <T,>(obj: T | null): T | undefined => {
+  if (obj === null) {
+    return undefined;
+  }
+  return obj;
+};
+
+interface ScorerInfo {
+  name: string;
+  scorer: string;
 }
 
 /**
  * Determines the default scorer for a log
- *
- * @param {import("./api/Types.ts").EvalSummary} log - The log object containing sample summaries and status.
- * @returns {{name: string, scorer: string} | undefined} A scorer object with name and scorer properties, or undefined
  */
-const defaultScorer = (log) => {
+const defaultScorer = (log: EvalSummary): ScorerInfo | undefined => {
+  if (log.sampleSummaries.length === 0) {
+    return undefined;
+  }
+
   // Select the default scorer to use
+  const scores = log.sampleSummaries[0].scores;
+
   const scorer = log.results?.scores[0]
     ? {
         name: log.results?.scores[0].name,
         scorer: log.results?.scores[0].scorer,
       }
-    : log.sampleSummaries.length > 0
+    : log.sampleSummaries.length > 0 && scores !== null
       ? {
-          name: Object.keys(log.sampleSummaries[0].scores)[0],
-          scorer: Object.keys(log.sampleSummaries[0].scores)[0],
+          name: Object.keys(scores)[0],
+          scorer: Object.keys(scores)[0],
         }
       : undefined;
   return scorer;
@@ -980,14 +968,11 @@ const defaultScorer = (log) => {
 
 /**
  * Determines the default scorers for a log
- *
- * @param {import("./api/Types.ts").EvalSummary} log - The log object containing sample summaries and status.
- * @returns {Array<{name: string, scorer: string}>} An array of scorer objects with name and scorer properties, or an empty array if no scorers are found.
  */
-const defaultScorers = (log) => {
+const defaultScorers = (log: EvalSummary): Array<ScorerInfo> => {
   if (log.results?.scores) {
     return (log.results?.scores || [])
-      .map((score) => {
+      .map((score): ScorerInfo => {
         return {
           name: score.name,
           scorer: score.scorer,
@@ -1002,14 +987,20 @@ const defaultScorers = (log) => {
           accum.push(scorer);
         }
         return accum;
-      }, []);
+      }, [] as Array<ScorerInfo>);
   } else if (log.sampleSummaries && log.sampleSummaries.length > 0) {
-    return Object.keys(log.sampleSummaries[0].scores).map((key) => {
-      return {
-        name: key,
-        scorer: key,
-      };
-    });
+    const scores = log.sampleSummaries[0].scores;
+
+    if (scores !== null) {
+      return Object.keys(scores).map((key) => {
+        return {
+          name: key,
+          scorer: key,
+        };
+      });
+    } else {
+      return [];
+    }
   } else {
     return [];
   }