inspect-ai 0.3.63__py3-none-any.whl → 0.3.65__py3-none-any.whl

inspect_ai/_view/www/src/metadata/MetaDataGrid.tsx

@@ -26,7 +26,7 @@ export const MetaDataGrid: React.FC<MetadataGridProps> = ({
   const entryEls = entryRecords(entries).map((entry, index) => {
     const id = `${baseId}-value-${index}`;
     return (
-      <Fragment>
+      <Fragment key={`${baseId}-record-${index}`}>
         <div
           style={{
             gridColumn: "1 / -1",

inspect_ai/_view/www/src/metadata/MetaDataView.tsx

@@ -35,7 +35,7 @@ export const MetaDataView: React.FC<MetadataViewProps> = ({
   const entryEls = (coercedEntries || []).map((entry, index) => {
     const id = `${baseId}-value-${index}`;
     return (
-      <tr>
+      <tr key={id}>
         <td
           className={clsx(
             styles.cell,

inspect_ai/_view/www/src/metadata/RenderedContent.tsx

@@ -132,9 +132,11 @@ const contentRenderers: Record<string, ContentRenderer> = {
       const isArray = Array.isArray(entry.value);
       if (isArray) {
         const types = new Set(
-          entry.value.map((e: unknown) => {
-            return typeof e;
-          }),
+          entry.value
+            .filter((e: unknown) => e !== null)
+            .map((e: unknown) => {
+              return typeof e;
+            }),
         );
         return types.size === 1;
       } else {
@@ -235,16 +237,7 @@ const contentRenderers: Record<string, ContentRenderer> = {
     },
     render: (id, entry) => {
       // Generate a json preview
-      const summary = [];
-      const keys = Object.keys(entry.value);
-      if (keys.length > 4) {
-        summary.push(...keys.slice(0, 2));
-        summary.push("...");
-        summary.push(...keys.slice(keys.length - 2));
-      } else {
-        summary.push(...keys);
-      }
-
+      console.log({ entry });
       return {
         rendered: (
           <MetaDataView

inspect_ai/_view/www/src/plan/PlanDetailView.tsx

@@ -125,6 +125,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       const scorerPanels = Object.keys(scorers).map((key) => {
         return (
           <ScorerDetailView
+            key={key}
             name={key}
             scores={scorers[key].scores}
             params={scorers[key].params as Record<string, unknown>}
@@ -159,6 +160,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
     className: cols === 1 ? styles.oneCol : styles.twoCol,
     contents: (
       <MetaDataView
+        key={`plan-md-task`}
         className={"text-size-small"}
         entries={taskInformation}
         tableOptions="sm"
@@ -172,6 +174,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-task-args`}
           className={"text-size-small"}
           entries={task_args as Record<string, unknown>}
           tableOptions="sm"
@@ -185,6 +188,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-model-args`}
           className={"text-size-small"}
           entries={model_args as Record<string, unknown>}
           tableOptions="sm"
@@ -199,6 +203,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-config`}
           className={"text-size-small"}
           entries={config}
           tableOptions="sm"
@@ -217,6 +222,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-generate-config`}
           className={"text-size-small"}
           entries={generate_record}
           tableOptions="sm"
@@ -231,6 +237,7 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       className: cols === 1 ? styles.oneCol : styles.twoCol,
       contents: (
         <MetaDataView
+          key={`plan-md-metadata`}
           className={"text-size-small"}
           entries={metadata}
           tableOptions="sm"
@@ -249,7 +256,11 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       >
         {taskColumns.map((col) => {
           return (
-            <PlanColumn title={col.title} className={col.className}>
+            <PlanColumn
+              title={col.title}
+              className={col.className}
+              key={`plan-col-${col.title}`}
+            >
               {col.contents}
             </PlanColumn>
           );
@@ -259,7 +270,11 @@ export const PlanDetailView: React.FC<PlanDetailViewProps> = ({
       <div className={clsx(styles.row)}>
         {metadataColumns.map((col) => {
           return (
-            <PlanColumn title={col.title} className={col.className}>
+            <PlanColumn
+              title={col.title}
+              className={col.className}
+              key={`plan-col-${col.title}`}
+            >
               {col.contents}
             </PlanColumn>
           );

inspect_ai/_view/www/src/plan/SolverDetailView.tsx

@@ -18,7 +18,7 @@ export const SolversDetailView: React.FC<SolversDetailView> = ({ steps }) => {
 
   const details = steps?.map((step, index) => {
     return (
-      <Fragment>
+      <Fragment key={`solver-step-${index}`}>
         <DetailStep
           name={step.solver}
           className={clsx(styles.items, "text-size-small")}

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

@@ -77,6 +77,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
   if (!isVscode()) {
     tools.push(
       <ToolButton
+        key="sample-print-tool"
         label="Print"
         icon={ApplicationIcons.copy}
         onClick={() => {
@@ -101,6 +102,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
       >
         {sample.events && sample.events.length > 0 ? (
           <TabPanel
+            key={kSampleTranscriptTabId}
             id={kSampleTranscriptTabId}
             className="sample-tab"
             title="Transcript"
@@ -120,6 +122,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
           </TabPanel>
         ) : null}
         <TabPanel
+          key={kSampleMessagesTabId}
           id={kSampleMessagesTabId}
           className={clsx("sample-tab", styles.fullWidth)}
           title="Messages"
@@ -138,6 +141,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
         </TabPanel>
         {scorerNames.length === 1 ? (
           <TabPanel
+            key={kSampleScoringTabId}
             id={kSampleScoringTabId}
             className="sample-tab"
             title="Scoring"
@@ -156,6 +160,7 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
               const tabId = `score-${scorer}`;
               return (
                 <TabPanel
+                  key={tabId}
                   id={tabId}
                   className="sample-tab"
                   title={scorer}
@@ -208,7 +213,11 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
             selected={selectedTab === kSampleJsonTabId}
           >
             <div className={clsx(styles.padded, styles.fullWidth)}>
-              <JSONPanel data={sample} simple={true} />
+              <JSONPanel
+                data={sample}
+                simple={true}
+                className={clsx("text-size-small")}
+              />
             </div>
           </TabPanel>
         ) : null}
@@ -217,11 +226,11 @@ export const SampleDisplay: React.FC<SampleDisplayProps> = ({
   );
 };
 
-const metadataViewsForSample = (_id: string, sample: EvalSample) => {
+const metadataViewsForSample = (id: string, sample: EvalSample) => {
   const sampleMetadatas = [];
   if (sample.model_usage && Object.keys(sample.model_usage).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-usage-${id}`}>
         <CardHeader label="Usage" />
         <CardBody>
           <ModelTokenTable
@@ -235,7 +244,7 @@ const metadataViewsForSample = (_id: string, sample: EvalSample) => {
 
   if (Object.keys(sample?.metadata).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-metadata-${id}`}>
         <CardHeader label="Metadata" />
         <CardBody>
           <MetaDataView
@@ -250,7 +259,7 @@ const metadataViewsForSample = (_id: string, sample: EvalSample) => {
 
   if (Object.keys(sample?.store).length > 0) {
     sampleMetadatas.push(
-      <Card>
+      <Card key={`sample-store-${id}`}>
         <CardHeader label="Store" />
         <CardBody>
           <MetaDataView

inspect_ai/_view/www/src/samples/SampleSummaryView.tsx

@@ -143,9 +143,10 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
           .join(" ")}`,
       }}
     >
-      {columns.map((col) => {
+      {columns.map((col, idx) => {
         return (
           <div
+            key={`sample-summ-lbl-${idx}`}
             className={clsx(
               "text-style-label",
               "text-style-secondary",
@@ -157,9 +158,10 @@ export const SampleSummaryView: React.FC<SampleSummaryViewProps> = ({
           </div>
         );
       })}
-      {columns.map((col) => {
+      {columns.map((col, idx) => {
         return (
           <div
+            key={`sample-summ-val-${idx}`}
             className={clsx(
               styles.wrap,
               col.clamp ? "three-line-clamp" : undefined,

inspect_ai/_view/www/src/samples/SamplesTools.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react/jsx-runtime";
 import { ScoreFilter, ScoreLabel } from "../types";
 import { SamplesDescriptor } from "./descriptor/samplesDescriptor";
 import { EpochFilter } from "./sample-tools/EpochFilter";
@@ -32,29 +33,20 @@ export const SampleTools: React.FC<SampleToolsProps> = ({
   scores,
   sampleDescriptor,
 }) => {
-  const tools = [];
-
-  tools.push(
-    <SampleFilter
-      evalDescriptor={sampleDescriptor.evalDescriptor}
-      scoreFilter={scoreFilter}
-      setScoreFilter={setScoreFilter}
-    />,
+  return (
+    <Fragment>
+      <SampleFilter
+        evalDescriptor={sampleDescriptor.evalDescriptor}
+        scoreFilter={scoreFilter}
+        setScoreFilter={setScoreFilter}
+      />
+      {scores.length > 1 ? (
+        <SelectScorer scores={scores} score={score} setScore={setScore} />
+      ) : undefined}
+      {epochs > 1 ? (
+        <EpochFilter epoch={epoch} setEpoch={setEpoch} epochs={epochs} />
+      ) : undefined}
+      <SortFilter sort={sort} setSort={setSort} epochs={epochs} />
+    </Fragment>
   );
-
-  if (scores.length > 1) {
-    tools.push(
-      <SelectScorer scores={scores} score={score} setScore={setScore} />,
-    );
-  }
-
-  if (epochs > 1) {
-    tools.push(
-      <EpochFilter epoch={epoch} setEpoch={setEpoch} epochs={epochs} />,
-    );
-  }
-
-  tools.push(<SortFilter sort={sort} setSort={setSort} epochs={epochs} />);
-
-  return tools;
 };

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

@@ -42,7 +42,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
         {message.role}
       </div>
       {message.role === "assistant" && message.reasoning ? (
-        <Fragment>
+        <Fragment key={`${id}-response-label`}>
           <div className={clsx("text-style-label", "text-style-secondary")}>
             Reasoning
           </div>

inspect_ai/_view/www/src/samples/chat/ChatView.tsx

@@ -32,6 +32,7 @@ export const ChatView: React.FC<ChatViewProps> = ({
           collapsedMessages.length > 1 && numbered ? index + 1 : undefined;
         return (
           <ChatMessageRow
+            key={`${id}-msg-${index}`}
             parentName={id || "chat-view"}
             number={number}
             resolvedMessage={msg}

inspect_ai/_view/www/src/samples/chat/MessageContent.tsx

@@ -42,6 +42,7 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
     return contents.map((content, index) => {
       if (typeof content === "string") {
         return messageRenderers["text"].render(
+          `text-content-${index}`,
           {
             type: "text",
             text: content,
@@ -52,7 +53,11 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
         if (content) {
           const renderer = messageRenderers[content.type];
           if (renderer) {
-            return renderer.render(content, index === contents.length - 1);
+            return renderer.render(
+              `text-${content.type}-${index}`,
+              content,
+              index === contents.length - 1,
+            );
           } else {
             console.error(`Unknown message content type '${content.type}'`);
           }
@@ -65,20 +70,29 @@ export const MessageContent: React.FC<MessageContentProps> = ({ contents }) => {
       type: "text",
       text: contents,
     };
-    return messageRenderers["text"].render(contentText, true);
+    return messageRenderers["text"].render(
+      "text-message-content",
+      contentText,
+      true,
+    );
   }
 };
 
 interface MessageRenderer {
-  render: (content: ContentType, isLast: boolean) => React.ReactNode;
+  render: (
+    key: string,
+    content: ContentType,
+    isLast: boolean,
+  ) => React.ReactNode;
 }
 
 const messageRenderers: Record<string, MessageRenderer> = {
   text: {
-    render: (content, isLast) => {
+    render: (key, content, isLast) => {
       const c = content as ContentText;
       return (
         <MarkdownDiv
+          key={key}
           markdown={c.text}
           className={isLast ? "no-last-para-padding" : ""}
         />
@@ -86,39 +100,39 @@ const messageRenderers: Record<string, MessageRenderer> = {
     },
   },
   image: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentImage;
       if (c.image.startsWith("data:")) {
-        return <img src={c.image} className={styles.contentImage} />;
+        return <img src={c.image} className={styles.contentImage} key={key} />;
       } else {
-        return <code>{c.image}</code>;
+        return <code key={key}>{c.image}</code>;
       }
     },
   },
   audio: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentAudio;
       return (
-        <audio controls>
+        <audio controls key={key}>
           <source src={c.audio} type={mimeTypeForFormat(c.format)} />
         </audio>
       );
     },
   },
   video: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentVideo;
       return (
-        <video width="500" height="375" controls>
+        <video width="500" height="375" controls key={key}>
           <source src={c.video} type={mimeTypeForFormat(c.format)} />
         </video>
       );
     },
   },
   tool: {
-    render: (content) => {
+    render: (key, content) => {
       const c = content as ContentTool;
-      return <ToolOutput output={c.content} />;
+      return <ToolOutput output={c.content} key={key} />;
     },
   },
 };

inspect_ai/_view/www/src/samples/chat/MessageContents.tsx

@@ -8,6 +8,7 @@ import { MessageContent } from "./MessageContent";
 import { resolveToolInput } from "./tools/tool";
 import { ToolCallView } from "./tools/ToolCallView";
 
+import { Fragment } from "react";
 import { ContentTool } from "../../types";
 import styles from "./MessageContents.module.css";
 
@@ -27,20 +28,10 @@ export const MessageContents: React.FC<MessageContentsProps> = ({
     message.tool_calls &&
     message.tool_calls.length
   ) {
-    const result = [];
-    // If the message contains content, render that.
-    if (message.content) {
-      result.push(
-        <div className={styles.content}>
-          <MessageContent contents={message.content} />
-        </div>,
-      );
-    }
-
     // Render the tool calls made by this message
     const toolCalls = message.tool_calls.map((tool_call, idx) => {
       // Extract tool input
-      const { input, functionCall, inputType } = resolveToolInput(
+      const { input, functionCall, highlightLanguage } = resolveToolInput(
         tool_call.function,
         tool_call.arguments,
       );
@@ -57,23 +48,34 @@ export const MessageContents: React.FC<MessageContentsProps> = ({
       // Resolve the tool output
       const resolvedToolOutput = resolveToolMessage(toolMessage);
       if (toolCallStyle === "compact") {
-        return <code>tool: {functionCall}</code>;
+        return (
+          <div key={`tool-call-${idx}`}>
+            <code>tool: {functionCall}</code>
+          </div>
+        );
       } else {
         return (
           <ToolCallView
+            key={`tool-call-${idx}`}
             functionCall={functionCall}
             input={input}
-            inputType={inputType}
+            highlightLanguage={highlightLanguage}
             output={resolvedToolOutput}
           />
         );
       }
     });
 
-    if (toolCalls) {
-      result.push(...toolCalls);
-    }
-    return result;
+    return (
+      <Fragment>
+        <div className={styles.content}>
+          {message.content ? (
+            <MessageContent contents={message.content} />
+          ) : undefined}
+        </div>
+        {toolCalls}
+      </Fragment>
+    );
   } else {
     return <MessageContent contents={message.content} />;
   }

inspect_ai/_view/www/src/samples/chat/tools/ToolCallView.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import ExpandablePanel from "../../../components/ExpandablePanel";
 import { ContentTool } from "../../../types";
 import {
@@ -14,7 +15,7 @@ import { ToolTitle } from "./ToolTitle";
 interface ToolCallViewProps {
   functionCall: string;
   input?: string;
-  inputType?: string;
+  highlightLanguage?: string;
   view?: ToolCallContent;
   output:
     | string
@@ -41,7 +42,7 @@ interface ToolCallViewProps {
 export const ToolCallView: React.FC<ToolCallViewProps> = ({
   functionCall,
   input,
-  inputType,
+  highlightLanguage,
   view,
   output,
   mode,
@@ -76,6 +77,7 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
   const collapse = Array.isArray(output)
     ? output.every((item) => !isContentImage(item))
     : !isContentImage(output);
+  const normalizedContent = useMemo(() => normalizeContent(output), [output]);
 
   return (
     <div>
@@ -86,14 +88,14 @@ export const ToolCallView: React.FC<ToolCallViewProps> = ({
       )}
       <div>
         <div>
-          <ToolInput type={inputType} contents={input} view={view} />
-          {output ? (
-            <ExpandablePanel collapse={collapse} border={true} lines={15}>
-              <MessageContent contents={normalizeContent(output)} />
-            </ExpandablePanel>
-          ) : (
-            ""
-          )}
+          <ToolInput
+            highlightLanguage={highlightLanguage}
+            contents={input}
+            toolCallView={view}
+          />
+          <ExpandablePanel collapse={collapse} border={true} lines={15}>
+            <MessageContent contents={normalizedContent} />
+          </ExpandablePanel>
         </div>
       </div>
     </div>