inspect-ai 0.3.70__py3-none-any.whl → 0.3.72__py3-none-any.whl

inspect_ai/_view/www/src/samples/sample-tools/EpochFilter.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ChangeEvent } from "react";
+import { ChangeEvent, FC } from "react";
 import styles from "./EpochFilter.module.css";
 
 interface EpochFilterProps {
@@ -8,7 +8,7 @@ interface EpochFilterProps {
   setEpoch: (n: string) => void;
 }
 
-export const EpochFilter: React.FC<EpochFilterProps> = ({
+export const EpochFilter: FC<EpochFilterProps> = ({
   epochs,
   epoch,
   setEpoch,

inspect_ai/_view/www/src/samples/sample-tools/SelectScorer.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ScoreLabel } from "../../types";
 
+import { FC } from "react";
 import styles from "./SelectScorer.module.css";
 
 interface SelectScorerProps {
@@ -9,7 +10,7 @@ interface SelectScorerProps {
   setScore: (score: ScoreLabel) => void;
 }
 
-export const SelectScorer: React.FC<SelectScorerProps> = ({
+export const SelectScorer: FC<SelectScorerProps> = ({
   scores,
   score,
   setScore,
@@ -100,7 +101,7 @@ interface ScoreSelectorProps {
   className?: string | string[];
 }
 
-const ScoreSelector: React.FC<ScoreSelectorProps> = ({
+const ScoreSelector: FC<ScoreSelectorProps> = ({
   scores,
   selectedIndex,
   setSelectedIndex,
@@ -138,7 +139,7 @@ interface ScorerSelectorProps {
   setSelectedIndex: (index: number) => void;
 }
 
-const ScorerSelector: React.FC<ScorerSelectorProps> = ({
+const ScorerSelector: FC<ScorerSelectorProps> = ({
   scorers,
   selectedIndex,
   setSelectedIndex,

inspect_ai/_view/www/src/samples/sample-tools/SortFilter.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import {
   kEpochAscVal,
@@ -18,11 +19,7 @@ interface SortFilterProps {
   epochs: number;
 }
 
-export const SortFilter: React.FC<SortFilterProps> = ({
-  sort,
-  setSort,
-  epochs,
-}) => {
+export const SortFilter: FC<SortFilterProps> = ({ sort, setSort, epochs }) => {
   const options = [
     { label: "sample asc", val: kSampleAscVal },
     { label: "sample desc", val: kSampleDescVal },

inspect_ai/_view/www/src/samples/sample-tools/sample-filter/SampleFilter.tsx

@@ -14,7 +14,7 @@ import {
 import { tags } from "@lezer/highlight";
 import clsx from "clsx";
 import { EditorView, minimalSetup } from "codemirror";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 
 import { ScoreFilter } from "../../../types";
 import { EvalDescriptor } from "../../descriptor/types";
@@ -147,7 +147,7 @@ const getLints = (
 };
 
 // Main component
-export const SampleFilter: React.FC<SampleFilterProps> = ({
+export const SampleFilter: FC<SampleFilterProps> = ({
   evalDescriptor,
   scoreFilter,
   setScoreFilter,

inspect_ai/_view/www/src/samples/scores/SampleScoreView.tsx

@@ -7,6 +7,7 @@ import { arrayToString, inputString } from "../../utils/format";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import { SampleScores } from "./SampleScores";
 
+import { FC } from "react";
 import { SampleSummary } from "../../api/types";
 import styles from "./SampleScoreView.module.css";
 
@@ -17,7 +18,7 @@ interface SampleScoreViewProps {
   className?: string | string[];
 }
 
-export const SampleScoreView: React.FC<SampleScoreViewProps> = ({
+export const SampleScoreView: FC<SampleScoreViewProps> = ({
   sample,
   sampleDescriptor,
   className,

inspect_ai/_view/www/src/samples/scores/SampleScores.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { SampleSummary } from "../../api/types";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 
@@ -10,7 +10,7 @@ interface SampleScoresProps {
   scorer: string;
 }
 
-export const SampleScores: React.FC<SampleScoresProps> = ({
+export const SampleScores: FC<SampleScoresProps> = ({
   sample,
   sampleDescriptor,
   scorer,

inspect_ai/_view/www/src/samples/transcript/ApprovalEventView.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ApprovalEvent } from "../../types/log";
 import { EventRow } from "./event/EventRow";
@@ -10,7 +11,7 @@ interface ApprovalEventViewProps {
 /**
  * Renders the ApprovalEventView component.
  */
-export const ApprovalEventView: React.FC<ApprovalEventViewProps> = ({
+export const ApprovalEventView: FC<ApprovalEventViewProps> = ({
   event,
   className,
 }) => {

inspect_ai/_view/www/src/samples/transcript/ErrorEventView.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ANSIDisplay } from "../../components/AnsiDisplay";
 import { ErrorEvent } from "../../types/log";
@@ -16,7 +17,7 @@ interface ErrorEventViewProps {
 /**
  * Renders the ErrorEventView component.
  */
-export const ErrorEventView: React.FC<ErrorEventViewProps> = ({
+export const ErrorEventView: FC<ErrorEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/InfoEventView.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { JSONPanel } from "../../components/JsonPanel";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
@@ -18,7 +19,7 @@ interface InfoEventViewProps {
 /**
  * Renders the InfoEventView component.
  */
-export const InfoEventView: React.FC<InfoEventViewProps> = ({
+export const InfoEventView: FC<InfoEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/InputEventView.tsx

@@ -1,3 +1,4 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { ANSIDisplay } from "../../components/AnsiDisplay";
 import { InputEvent } from "../../types/log";
@@ -16,7 +17,7 @@ interface InputEventViewProps {
 /**
  * Renders the ErrorEventView component.
  */
-export const InputEventView: React.FC<InputEventViewProps> = ({
+export const InputEventView: FC<InputEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/LoggerEventView.module.css

@@ -4,3 +4,7 @@
   grid-template-columns: 1fr max-content;
   column-gap: 1em;
 }
+
+.jsonPanel {
+  padding: 0 !important;
+}

inspect_ai/_view/www/src/samples/transcript/LoggerEventView.tsx

@@ -3,6 +3,9 @@ import { ApplicationIcons } from "../../appearance/icons";
 import { LoggerEvent } from "../../types/log";
 import { EventRow } from "./event/EventRow";
 
+import { FC } from "react";
+import { MetaDataGrid } from "../../metadata/MetaDataGrid";
+import { parsedJson as maybeParseJson } from "../../utils/json";
 import styles from "./LoggerEventView.module.css";
 
 interface LoggerEventViewProps {
@@ -13,10 +16,11 @@ interface LoggerEventViewProps {
 /**
  * Renders the LoggerEventView component.
  */
-export const LoggerEventView: React.FC<LoggerEventViewProps> = ({
+export const LoggerEventView: FC<LoggerEventViewProps> = ({
   event,
   className,
 }) => {
+  const obj = maybeParseJson(event.message.message);
   return (
     <EventRow
       className={className}
@@ -24,7 +28,13 @@ export const LoggerEventView: React.FC<LoggerEventViewProps> = ({
       icon={ApplicationIcons.logging[event.message.level.toLowerCase()]}
     >
       <div className={clsx("text-size-base", styles.grid)}>
-        <div className={clsx("text-size-smaller")}>{event.message.message}</div>
+        <div className={clsx("text-size-smaller")}>
+          {obj !== undefined && obj !== null ? (
+            <MetaDataGrid entries={obj as Record<string, unknown>} />
+          ) : (
+            event.message.message
+          )}
+        </div>
         <div className={clsx("text-size-smaller", "text-style-secondary")}>
           {event.message.filename}:{event.message.lineno}
         </div>

inspect_ai/_view/www/src/samples/transcript/ModelEventView.module.css

@@ -9,7 +9,7 @@
 
 .all {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
   column-gap: 1em;
 }
 

inspect_ai/_view/www/src/samples/transcript/ModelEventView.tsx

@@ -3,7 +3,7 @@ import "prismjs/components/prism-json";
 import "prismjs/components/prism-python";
 
 import clsx from "clsx";
-import { Fragment, useEffect, useMemo, useRef } from "react";
+import { FC, Fragment, useEffect, useMemo, useRef } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MetaDataGrid } from "../../metadata/MetaDataGrid";
 import {
@@ -14,11 +14,6 @@ import {
   Tools1,
 } from "../../types/log";
 import { ModelUsagePanel } from "../../usage/ModelUsagePanel";
-import {
-  formatDateTime,
-  formatNumber,
-  formatPrettyDecimal,
-} from "../../utils/format";
 import { ChatView } from "../chat/ChatView";
 import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
@@ -26,6 +21,8 @@ import { TranscriptEventState } from "./types";
 
 import { highlightElement } from "prismjs";
 import styles from "./ModelEventView.module.css";
+import { EventTimingPanel } from "./event/EventTimingPanel";
+import { formatTiming, formatTitle } from "./event/utils";
 
 interface ModelEventViewProps {
   id: string;
@@ -38,7 +35,7 @@ interface ModelEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const ModelEventView: React.FC<ModelEventViewProps> = ({
+export const ModelEventView: FC<ModelEventViewProps> = ({
   id,
   event,
   eventState,
@@ -48,15 +45,6 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
   const totalUsage = event.output.usage?.total_tokens;
   const callTime = event.output.time;
 
-  const subItems = [];
-  if (totalUsage) {
-    subItems.push(`${formatNumber(totalUsage)} tokens`);
-  }
-  if (callTime) {
-    subItems.push(`${formatPrettyDecimal(callTime)} sec`);
-  }
-  const subtitle = subItems.length > 0 ? `(${subItems.join(", ")})` : "";
-
   // Note: despite the type system saying otherwise, this has appeared empircally
   // to sometimes be undefined
   const outputMessages = event.output.choices?.map((choice) => {
@@ -83,8 +71,8 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
     <EventPanel
       id={id}
       className={className}
-      title={`Model Call: ${event.model} ${subtitle}`}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      title={formatTitle(`Model Call: ${event.model}`, totalUsage, callTime)}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       icon={ApplicationIcons.model}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
@@ -116,6 +104,15 @@ export const ModelEventView: React.FC<ModelEventViewProps> = ({
             ) : undefined}
           </EventSection>
 
+          <EventSection title="Timing" className={styles.tableSelection}>
+            <EventTimingPanel
+              timestamp={event.timestamp}
+              completed={event.completed}
+              working_start={event.working_start}
+              working_time={event.working_time}
+            />
+          </EventSection>
+
           <EventSection
             title="Tools"
             className={clsx(styles.tableSelection, styles.tools)}
@@ -150,7 +147,7 @@ interface APIViewProps {
   className?: string | string[];
 }
 
-export const APIView: React.FC<APIViewProps> = ({ call, className }) => {
+export const APIView: FC<APIViewProps> = ({ call, className }) => {
   if (!call) {
     return null;
   }
@@ -172,11 +169,7 @@ interface APICodeCellProps {
   contents: Request | Response;
 }
 
-export const APICodeCell: React.FC<APICodeCellProps> = ({ id, contents }) => {
-  if (!contents) {
-    return null;
-  }
-
+export const APICodeCell: FC<APICodeCellProps> = ({ id, contents }) => {
   const codeRef = useRef<HTMLElement>(null);
   const sourceCode = useMemo(() => {
     return JSON.stringify(contents, undefined, 2);
@@ -186,11 +179,15 @@ export const APICodeCell: React.FC<APICodeCellProps> = ({ id, contents }) => {
     if (codeRef.current) {
       highlightElement(codeRef.current);
     }
-  }, [codeRef.current, contents]);
+  }, [contents]);
+
+  if (!contents) {
+    return null;
+  }
 
   return (
-    <div>
-      <pre className={styles.codePre}>
+    <div className={clsx("model-call")}>
+      <pre className={clsx(styles.codePre)}>
         <code
           id={id}
           ref={codeRef}
@@ -207,7 +204,7 @@ interface ToolConfigProps {
   tools: Tools1;
 }
 
-const ToolsConfig: React.FC<ToolConfigProps> = ({ tools }) => {
+const ToolsConfig: FC<ToolConfigProps> = ({ tools }) => {
   const toolEls = tools.map((tool, idx) => {
     return (
       <Fragment key={`${tool.name}-${idx}`}>

inspect_ai/_view/www/src/samples/transcript/SampleInitEventView.tsx

@@ -9,6 +9,7 @@ import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
 import { TranscriptEventState } from "./types";
 
+import { FC } from "react";
 import styles from "./SampleInitEventView.module.css";
 
 interface SampleInitEventViewProps {
@@ -22,7 +23,7 @@ interface SampleInitEventViewProps {
 /**
  * Renders the SampleInitEventView component.
  */
-export const SampleInitEventView: React.FC<SampleInitEventViewProps> = ({
+export const SampleInitEventView: FC<SampleInitEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/SampleLimitEventView.tsx

@@ -1,5 +1,6 @@
+import { FC } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
-import { SampleLimitEvent, Type7 } from "../../types/log";
+import { SampleLimitEvent, Type8 } from "../../types/log";
 import { EventPanel } from "./event/EventPanel";
 import { TranscriptEventState } from "./types";
 
@@ -14,14 +15,14 @@ interface SampleLimitEventViewProps {
 /**
  * Renders the InfoEventView component.
  */
-export const SampleLimitEventView: React.FC<SampleLimitEventViewProps> = ({
+export const SampleLimitEventView: FC<SampleLimitEventViewProps> = ({
   id,
   event,
   eventState,
   setEventState,
   className,
 }) => {
-  const resolve_title = (type: Type7) => {
+  const resolve_title = (type: Type8) => {
     switch (type) {
       case "custom":
         return "Custom Limit Exceeded";
@@ -38,7 +39,7 @@ export const SampleLimitEventView: React.FC<SampleLimitEventViewProps> = ({
     }
   };
 
-  const resolve_icon = (type: Type7) => {
+  const resolve_icon = (type: Type8) => {
     switch (type) {
       case "custom":
         return ApplicationIcons.limits.custom;

inspect_ai/_view/www/src/samples/transcript/SampleTranscript.tsx

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import { FC, RefObject } from "react";
 import { Events } from "../../types/log";
 import { TranscriptVirtualList } from "./TranscriptView";
 
@@ -11,7 +11,7 @@ interface SampleTranscriptProps {
 /**
  * Renders the SampleTranscript component.=
  */
-export const SampleTranscript: React.FC<SampleTranscriptProps> = ({
+export const SampleTranscript: FC<SampleTranscriptProps> = ({
   id,
   evalEvents,
   scrollRef,

inspect_ai/_view/www/src/samples/transcript/SandboxEventView.tsx

@@ -3,13 +3,14 @@ import ExpandablePanel from "../../components/ExpandablePanel";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { MetaDataGrid } from "../../metadata/MetaDataGrid";
 import { SandboxEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
 import { EventSection } from "./event/EventSection";
 import { TranscriptEventState } from "./types";
 
 import clsx from "clsx";
+import { FC } from "react";
 import styles from "./SandboxEventView.module.css";
+import { formatTiming } from "./event/utils";
 
 interface SandboxEventViewProps {
   id: string;
@@ -22,7 +23,7 @@ interface SandboxEventViewProps {
 /**
  * Renders the SandboxEventView component.
  */
-export const SandboxEventView: React.FC<SandboxEventViewProps> = ({
+export const SandboxEventView: FC<SandboxEventViewProps> = ({
   id,
   event,
   eventState,
@@ -35,7 +36,7 @@ export const SandboxEventView: React.FC<SandboxEventViewProps> = ({
       className={className}
       title={`Sandbox: ${event.action}`}
       icon={ApplicationIcons.sandbox}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
         setEventState({ ...eventState, selectedNav });
@@ -60,7 +61,7 @@ interface ExecViewProps {
   event: SandboxEvent;
 }
 
-const ExecView: React.FC<ExecViewProps> = ({ event }) => {
+const ExecView: FC<ExecViewProps> = ({ event }) => {
   if (event.cmd === null) {
     return undefined;
   }
@@ -105,7 +106,7 @@ interface ReadFileViewProps {
   event: SandboxEvent;
 }
 
-const ReadFileView: React.FC<ReadFileViewProps> = ({ event }) => {
+const ReadFileView: FC<ReadFileViewProps> = ({ event }) => {
   if (event.file === null) {
     return undefined;
   }
@@ -118,7 +119,7 @@ interface WriteFileViewProps {
   event: SandboxEvent;
 }
 
-const WriteFileView: React.FC<WriteFileViewProps> = ({ event }) => {
+const WriteFileView: FC<WriteFileViewProps> = ({ event }) => {
   if (event.file === null) {
     return undefined;
   }
@@ -133,7 +134,7 @@ interface FileViewProps {
   contents?: string;
 }
 
-const FileView: React.FC<FileViewProps> = ({ file, contents }) => {
+const FileView: FC<FileViewProps> = ({ file, contents }) => {
   return (
     <div>
       <EventSection title="File">

inspect_ai/_view/www/src/samples/transcript/ScoreEventView.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MarkdownDiv } from "../../components/MarkdownDiv";
 import { MetaDataGrid } from "../../metadata/MetaDataGrid";
@@ -21,7 +21,7 @@ interface ScoreEventViewProps {
 /**
  * Renders the ScoreEventView component.
  */
-export const ScoreEventView: React.FC<ScoreEventViewProps> = ({
+export const ScoreEventView: FC<ScoreEventViewProps> = ({
   id,
   event,
   eventState,

inspect_ai/_view/www/src/samples/transcript/StepEventView.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { RefObject, useCallback, useState } from "react";
+import { FC, RefObject, useCallback, useState } from "react";
 import { StepEvent } from "../../types/log";
 import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
@@ -18,7 +18,7 @@ interface StepEventViewProps {
 /**
  * Renders the StepEventView component.
  */
-export const StepEventView: React.FC<StepEventViewProps> = ({
+export const StepEventView: FC<StepEventViewProps> = ({
   event,
   eventState,
   setEventState,
@@ -37,7 +37,7 @@ export const StepEventView: React.FC<StepEventViewProps> = ({
     (state: TranscriptEventState) => {
       setTranscriptState({ ...state });
     },
-    [transcriptState, setTranscriptState],
+    [setTranscriptState],
   );
 
   return (

inspect_ai/_view/www/src/samples/transcript/SubtaskEventView.tsx

@@ -1,10 +1,10 @@
 import clsx from "clsx";
-import { Fragment } from "react";
+import { FC, Fragment } from "react";
 import { ApplicationIcons } from "../../appearance/icons";
 import { MetaDataView } from "../../metadata/MetaDataView";
-import { Input2, Input4, Result1, SubtaskEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
+import { Input2, Input5, Result2, SubtaskEvent } from "../../types/log";
 import { EventPanel } from "./event/EventPanel";
+import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./SubtaskEventView.module.css";
 import { TranscriptView } from "./TranscriptView";
 import { TranscriptEventState } from "./types";
@@ -21,7 +21,7 @@ interface SubtaskEventViewProps {
 /**
  * Renders the StateEventView component.
  */
-export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
+export const SubtaskEventView: FC<SubtaskEventViewProps> = ({
   id,
   event,
   eventState,
@@ -73,8 +73,12 @@ export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
     <EventPanel
       id={id}
       className={className}
-      title={`${type}: ${event.name}`}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      title={formatTitle(
+        `${type}: ${event.name}`,
+        undefined,
+        event.working_time,
+      )}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       collapse={false}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {
@@ -91,25 +95,25 @@ export const SubtaskEventView: React.FC<SubtaskEventViewProps> = ({
 };
 
 interface SubtaskSummaryProps {
-  input: Input2 | Input4;
-  result: Result1;
+  input: Input2 | Input5;
+  result: Result2;
 }
 /**
  * Renders the StateEventView component.
  */
-const SubtaskSummary: React.FC<SubtaskSummaryProps> = ({ input, result }) => {
-  result = typeof result === "object" ? result : { result };
+const SubtaskSummary: FC<SubtaskSummaryProps> = ({ input, result }) => {
+  const output = typeof result === "object" ? result : { result };
   return (
     <div className={clsx(styles.subtaskSummary)}>
       <div className={clsx("text-style-label")}>Input</div>
       <div className={clsx("text-size-large", styles.subtaskLabel)}></div>
       <div className={clsx("text-style-label")}>Output</div>
-      <Rendered values={input} />
+      {input ? <Rendered values={input} /> : undefined}
       <div className={clsx("text-size-title-secondary", styles.subtaskLabel)}>
         <i className={ApplicationIcons.arrows.right} />
       </div>
       <div>
-        <Rendered values={result} />
+        <Rendered values={output} />
       </div>
     </div>
   );
@@ -123,7 +127,7 @@ interface RenderedProps {
  * Recursively renders content based on the type of `values`.
 value.
  */
-const Rendered: React.FC<RenderedProps> = ({ values }) => {
+const Rendered: FC<RenderedProps> = ({ values }) => {
   if (Array.isArray(values)) {
     return values.map((val) => {
       return <Rendered values={val} />;
@@ -139,7 +143,7 @@ const Rendered: React.FC<RenderedProps> = ({ values }) => {
   }
 };
 
-const None: React.FC = () => {
+const None: FC = () => {
   return (
     <span className={clsx("text-size-small", "text-style-secondary")}>
       [None]

inspect_ai/_view/www/src/samples/transcript/ToolEventView.tsx

@@ -1,6 +1,5 @@
 import { ApplicationIcons } from "../../appearance/icons";
 import { ToolEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { resolveToolInput } from "../chat/tools/tool";
 import { ToolCallView } from "../chat/tools/ToolCallView";
 import { ApprovalEventView } from "./ApprovalEventView";
@@ -8,7 +7,8 @@ import { EventPanel } from "./event/EventPanel";
 import { TranscriptView } from "./TranscriptView";
 import { TranscriptEventState } from "./types";
 
-import { useMemo } from "react";
+import { FC, useMemo } from "react";
+import { formatTiming, formatTitle } from "./event/utils";
 import styles from "./ToolEventView.module.css";
 
 interface ToolEventViewProps {
@@ -23,7 +23,7 @@ interface ToolEventViewProps {
 /**
  * Renders the ToolEventView component.
  */
-export const ToolEventView: React.FC<ToolEventViewProps> = ({
+export const ToolEventView: FC<ToolEventViewProps> = ({
   id,
   event,
   eventState,
@@ -46,9 +46,9 @@ export const ToolEventView: React.FC<ToolEventViewProps> = ({
   return (
     <EventPanel
       id={id}
-      title={title}
+      title={formatTitle(title, undefined, event.working_time)}
       className={className}
-      subTitle={formatDateTime(new Date(event.timestamp))}
+      subTitle={formatTiming(event.timestamp, event.working_start)}
       icon={ApplicationIcons.solvers.use_tools}
       selectedNav={eventState.selectedNav || ""}
       setSelectedNav={(selectedNav) => {