inspect-ai 0.3.90__py3-none-any.whl → 0.3.92__py3-none-any.whl

inspect_ai/_view/www/src/{samples → app/samples}/list/SampleList.tsx

@@ -9,17 +9,18 @@ import {
   useRef,
 } from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-import { MessageBand } from "../../components/MessageBand";
-import { formatNoDecimal } from "../../utils/format";
-import { ListItem } from "../../workspace/tabs/types";
+import { MessageBand } from "../../../components/MessageBand";
+import { formatNoDecimal } from "../../../utils/format";
+import { ListItem } from "../../log-view/tabs/types";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import { SampleRow } from "./SampleRow";
 import { SampleSeparator } from "./SampleSeparator";
 
 import clsx from "clsx";
-import { useProperty, useSampleDescriptor } from "../../state/hooks";
-import { useVirtuosoState } from "../../state/scrolling";
-import { useStore } from "../../state/store";
+import { useProperty, useSampleDescriptor } from "../../../state/hooks";
+import { useVirtuosoState } from "../../../state/scrolling";
+import { useStore } from "../../../state/store";
+import { useSampleNavigation } from "../../routing/navigationHooks";
 import { SampleFooter } from "./SampleFooter";
 import { SampleHeader } from "./SampleHeader";
 import styles from "./SampleList.module.css";
@@ -31,9 +32,6 @@ interface SampleListProps {
   items: ListItem[];
   totalItemCount: number;
   running: boolean;
-  nextSample: () => void;
-  prevSample: () => void;
-  showSample: (index: number) => void;
   className?: string | string[];
   listHandle: RefObject<VirtuosoHandle | null>;
 }
@@ -41,22 +39,21 @@ interface SampleListProps {
 export const kSampleFollowProp = "sample-list";
 
 export const SampleList: FC<SampleListProps> = memo((props) => {
-  const {
-    items,
-    totalItemCount,
-    running,
-    nextSample,
-    prevSample,
-    showSample,
-    className,
-    listHandle,
-  } = props;
+  const { items, totalItemCount, running, className, listHandle } = props;
 
+  const selectedLogIndex = useStore((state) => state.logs.selectedLogIndex);
   const { getRestoreState, isScrolling } = useVirtuosoState(
     listHandle,
-    "sample-list",
+    `sample-list-${selectedLogIndex}`,
   );
 
+  useEffect(() => {
+    listHandle.current?.scrollTo({ top: 0, behavior: "instant" });
+  }, [selectedLogIndex]);
+
+  // Get sample navigation utilities
+  const sampleNavigation = useSampleNavigation();
+
   const selectedSampleIndex = useStore(
     (state) => state.log.selectedSampleIndex,
   );
@@ -107,23 +104,28 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
     (e: KeyboardEvent<HTMLDivElement>) => {
       switch (e.key) {
         case "ArrowUp":
-          prevSample();
+          sampleNavigation.previousSample();
           e.preventDefault();
           e.stopPropagation();
           break;
         case "ArrowDown":
-          nextSample();
+          sampleNavigation.nextSample();
           e.preventDefault();
           e.stopPropagation();
           break;
         case "Enter":
-          showSample(selectedSampleIndex);
+          sampleNavigation.showSample(selectedSampleIndex);
           e.preventDefault();
           e.stopPropagation();
           break;
       }
     },
-    [selectedSampleIndex, nextSample, prevSample, showSample],
+    [
+      selectedSampleIndex,
+      sampleNavigation.nextSample,
+      sampleNavigation.previousSample,
+      sampleNavigation.showSample,
+    ],
   );
 
   const gridColumnsTemplate = useMemo(() => {
@@ -143,7 +145,6 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
             completed={item.completed}
             scoreRendered={item.scoreRendered}
             gridColumnsTemplate={gridColumnsTemplate}
-            showSample={showSample}
           />
         );
       } else if (item.type === "separator") {
@@ -158,10 +159,11 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
         return null;
       }
     },
-    [showSample, gridColumnsTemplate],
+    [gridColumnsTemplate],
   );
 
-  const { input, limit, answer, target } = gridColumns(samplesDescriptor);
+  const { input, limit, answer, target, retries } =
+    gridColumns(samplesDescriptor);
 
   const sampleCount = items?.reduce((prev, current) => {
     if (current.type === "sample") {
@@ -212,6 +214,7 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
         target={target !== "0"}
         answer={answer !== "0"}
         limit={limit !== "0"}
+        retries={retries !== "0em"}
         gridColumnsTemplate={gridColumnsTemplate}
       />
       <Virtuoso
@@ -220,9 +223,13 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
         data={items}
         defaultItemHeight={50}
         itemContent={renderRow}
-        followOutput={(_atBottom: boolean) => {
-          return followOutput;
-        }}
+        followOutput={
+          running
+            ? (_atBottom: boolean) => {
+                return followOutput;
+              }
+            : undefined
+        }
         atBottomStateChange={handleAtBottomStateChange}
         atBottomThreshold={30}
         increaseViewportBy={{ top: 300, bottom: 300 }}
@@ -230,11 +237,12 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
           main: 10,
           reverse: 10,
         }}
-        className={clsx(className)}
+        className={clsx(className, "samples-list")}
         onKeyDown={onkeydown}
         skipAnimationFrameInResizeObserver={true}
         isScrolling={isScrolling}
         restoreStateFrom={getRestoreState()}
+        tabIndex={0}
       />
       <SampleFooter
         sampleCount={sampleCount}
@@ -246,9 +254,9 @@ export const SampleList: FC<SampleListProps> = memo((props) => {
 });
 
 const gridColumnsValue = (sampleDescriptor?: SamplesDescriptor) => {
-  const { input, target, answer, limit, id, score } =
+  const { input, target, answer, limit, retries, id, score } =
     gridColumns(sampleDescriptor);
-  return `${id} ${input} ${target} ${answer} ${limit} ${score}`;
+  return `${id} ${input} ${target} ${answer} ${limit} ${retries} ${score}`;
 };
 
 const gridColumns = (sampleDescriptor?: SamplesDescriptor) => {
@@ -268,6 +276,11 @@ const gridColumns = (sampleDescriptor?: SamplesDescriptor) => {
     sampleDescriptor && sampleDescriptor.messageShape.normalized.limit > 0
       ? Math.max(0.15, sampleDescriptor.messageShape.normalized.limit)
       : 0;
+  const retries =
+    sampleDescriptor && sampleDescriptor.messageShape.normalized.retries > 0
+      ? 4
+      : 0;
+
   const id = Math.max(
     2,
     Math.min(10, sampleDescriptor?.messageShape.raw.id || 0),
@@ -290,6 +303,7 @@ const gridColumns = (sampleDescriptor?: SamplesDescriptor) => {
     target: frSize(target),
     answer: frSize(answer),
     limit: frSize(limit),
+    retries: `${retries}em`,
     id: `${id}rem`,
     score: `${score}rem`,
   };

inspect_ai/_view/www/src/{samples → app/samples}/list/SampleRow.module.css

@@ -14,6 +14,17 @@
   box-shadow: inset 0 0 0px 2px var(--bs-focus-ring-color);
 }
 
+.sampleRowLink {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
 .cell {
   padding-left: 0;
   padding-right: 0;
@@ -32,6 +43,11 @@
   justify-self: center;
 }
 
+.centered {
+  display: flex;
+  justify-content: center;
+}
+
 .spinner {
   height: 1.4em;
   width: 1.4em;

inspect_ai/_view/www/src/{samples → app/samples}/list/SampleRow.tsx

@@ -1,10 +1,11 @@
 import clsx from "clsx";
-import { FC, ReactNode, useCallback } from "react";
-import { SampleSummary } from "../../api/types";
-import { MarkdownDiv } from "../../components/MarkdownDiv";
-import { PulsingDots } from "../../components/PulsingDots";
-import { useStore } from "../../state/store";
-import { arrayToString, inputString } from "../../utils/format";
+import { FC, ReactNode } from "react";
+import { SampleSummary } from "../../../client/api/types";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { PulsingDots } from "../../../components/PulsingDots";
+import { useStore } from "../../../state/store";
+import { arrayToString, inputString } from "../../../utils/format";
+import { useSampleNavigation } from "../../routing/navigationHooks";
 import { SampleErrorView } from "../error/SampleErrorView";
 import styles from "./SampleRow.module.css";
 
@@ -17,7 +18,6 @@ interface SampleRowProps {
   scoreRendered: ReactNode;
   gridColumnsTemplate: string;
   height: number;
-  showSample: (index: number) => void;
 }
 
 export const SampleRow: FC<SampleRowProps> = ({
@@ -29,7 +29,6 @@ export const SampleRow: FC<SampleRowProps> = ({
   scoreRendered,
   gridColumnsTemplate,
   height,
-  showSample,
 }) => {
   const streamSampleData = useStore(
     (state) => state.capabilities.streamSampleData,
@@ -37,20 +36,25 @@ export const SampleRow: FC<SampleRowProps> = ({
   const selectedSampleIndex = useStore(
     (state) => state.log.selectedSampleIndex,
   );
-  const handleClick = useCallback(() => {
-    if (completed || streamSampleData) {
-      showSample(index);
-    }
-  }, [index, showSample, completed]);
+  // Determine if this sample can be viewed (completed or streaming)
+  const isViewable = completed || streamSampleData;
 
-  return (
+  // Get sample navigation utilities
+  const sampleNavigation = useSampleNavigation();
+
+  // Use sample navigation hook to get sample URL
+  const sampleUrl = isViewable
+    ? sampleNavigation.getSampleUrl(sample.id, sample.epoch)
+    : undefined;
+
+  const rowContent = (
     <div
       id={`sample-${id}`}
-      onClick={handleClick}
       className={clsx(
         styles.grid,
         "text-size-base",
         selectedSampleIndex === index ? styles.selected : undefined,
+        !isViewable && !sampleUrl ? styles.disabled : undefined,
       )}
       style={{
         height: `${height}px`,
@@ -72,10 +76,12 @@ export const SampleRow: FC<SampleRowProps> = ({
         <MarkdownDiv markdown={inputString(sample.input).join(" ")} />
       </div>
       <div className={clsx("sample-target", "three-line-clamp", styles.cell)}>
-        <MarkdownDiv
-          markdown={arrayToString(sample?.target)}
-          className={clsx("no-last-para-padding", styles.noLeft)}
-        />
+        {sample?.target ? (
+          <MarkdownDiv
+            markdown={arrayToString(sample.target)}
+            className={clsx("no-last-para-padding", styles.noLeft)}
+          />
+        ) : undefined}
       </div>
       <div className={clsx("sample-answer", "three-line-clamp", styles.cell)}>
         {sample ? (
@@ -97,7 +103,17 @@ export const SampleRow: FC<SampleRowProps> = ({
       >
         {sample.limit}
       </div>
-
+      <div
+        className={clsx(
+          "sample-retries",
+          "text-size-small",
+          "three-line-clamp",
+          styles.cell,
+          styles.centered,
+        )}
+      >
+        {sample.retries && sample.retries > 0 ? sample.retries : undefined}
+      </div>
       <div className={clsx("text-size-small", styles.cell, styles.score)}>
         {sample.error ? (
           <SampleErrorView message={sample.error} />
@@ -109,4 +125,15 @@ export const SampleRow: FC<SampleRowProps> = ({
       </div>
     </div>
   );
+
+  // Render the row content either as a link or directly
+  return (
+    <div
+      onClick={
+        isViewable ? () => sampleNavigation.showSample(index) : undefined
+      }
+    >
+      {rowContent}
+    </div>
+  );
 };

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/SelectScorer.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ScoreLabel } from "../../types";
+import { ScoreLabel } from "../../../app/types";
 
 import { ChangeEvent, FC, useCallback } from "react";
 import styles from "./SelectScorer.module.css";

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/SortFilter.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ChangeEvent, FC, useCallback } from "react";
-import { SampleSummary } from "../../api/types";
+import { SampleSummary } from "../../../client/api/types";
 import {
   kEpochAscVal,
   kEpochDescVal,
@@ -8,9 +8,9 @@ import {
   kSampleDescVal,
   kScoreAscVal,
   kScoreDescVal,
-} from "../../constants";
-import { ScoreLabel } from "../../types";
-import { isNumeric } from "../../utils/type";
+} from "../../../constants";
+import { ScoreLabel } from "../../../app/types";
+import { isNumeric } from "../../../utils/type";
 import { SamplesDescriptor } from "../descriptor/samplesDescriptor";
 import styles from "./SortFilter.module.css";
 

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/filters.ts

@@ -1,9 +1,9 @@
 import { compileExpression } from "filtrex";
-import { SampleSummary } from "../../api/types";
-import { kScoreTypeBoolean } from "../../constants";
-import { ScoreLabel } from "../../types";
-import { Scores1 } from "../../types/log";
-import { inputString } from "../../utils/format";
+import { Scores1 } from "../../../@types/log";
+import { ScoreLabel } from "../../../app/types";
+import { SampleSummary } from "../../../client/api/types";
+import { kScoreTypeBoolean } from "../../../constants";
+import { inputString } from "../../../utils/format";
 import { EvalDescriptor, ScoreDescriptor } from "../descriptor/types";
 
 export interface FilterError {
@@ -110,6 +110,7 @@ const scoreVariables = (
 const sampleVariables = (sample: SampleSummary): Record<string, unknown> => {
   return {
     has_error: !!sample.error,
+    has_retries: sample.retries !== undefined && sample.retries > 0,
   };
 };
 
@@ -220,7 +221,8 @@ export const filterExpression = (
     const resolveVariable = (name: string, get: (name: string) => any) => {
       // Sample variables (like has_error) always exist.
       if (name in mySampleVariables) {
-        return get(name);
+        const value = get(name);
+        return value;
       }
       // Score variables exist only if the sample completed successfully.
       return sample.error ? undefined : get(name);

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/sample-filter/SampleFilter.tsx

@@ -16,9 +16,9 @@ import clsx from "clsx";
 import { EditorView, minimalSetup } from "codemirror";
 import { FC, useEffect, useMemo, useRef, useState } from "react";
 
-import { SampleSummary } from "../../../api/types";
-import { useEvalDescriptor } from "../../../state/hooks";
-import { ScoreFilter } from "../../../types";
+import { ScoreFilter } from "../../../../app/types";
+import { SampleSummary } from "../../../../client/api/types";
+import { useEvalDescriptor } from "../../../../state/hooks";
 import { EvalDescriptor } from "../../descriptor/types";
 import { FilterError, filterSamples, scoreFilterItems } from "../filters";
 import { getCompletions } from "./completions";
@@ -43,6 +43,7 @@ Filter samples by:
   • Scores
   • Samples with errors: has_error
   • Input, target and error regex search: input_contains, target_contains, error_contains
+  • Samples that have been retried: has_retries
 
 Supported expressions:
   • Arithmetic: +, -, *, /, mod, ^

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/sample-filter/completions.ts

@@ -11,7 +11,7 @@ import {
   kScoreTypeNumeric,
   kScoreTypeOther,
   kScoreTypePassFail,
-} from "../../../constants";
+} from "../../../../constants";
 import { ScoreFilterItem } from "../filters";
 import {
   KEYWORDS,

inspect_ai/_view/www/src/{samples → app/samples}/sample-tools/sample-filter/language.ts

@@ -15,6 +15,7 @@ export const MATH_FUNCTIONS: [string, string][] = [
 
 export const SAMPLE_VARIABLES: [string, string][] = [
   ["has_error", "Checks if the sample has an error"],
+  ["has_retries", "Checks if the sample has been retried"],
 ];
 
 export const SAMPLE_FUNCTIONS: [string, string][] = [

inspect_ai/_view/www/src/{samples → app/samples}/sampleDataAdapter.ts

@@ -1,6 +1,6 @@
-import { EventData, SampleData } from "../api/types";
-import { Events } from "../types/log";
-import { resolveAttachments } from "../utils/attachments";
+import { Events } from "../../@types/log";
+import { EventData, SampleData } from "../../client/api/types";
+import { resolveAttachments } from "../../utils/attachments";
 
 export const sampleDataAdapter = () => {
   const attachments: Record<string, string> = {};

inspect_ai/_view/www/src/{samples → app/samples}/sampleLimit.ts

@@ -1,4 +1,4 @@
-import { Type14 } from "../types/log";
+import { Type14 } from "../../@types/log";
 
 /**
  * Formats a limit message

inspect_ai/_view/www/src/{samples → app/samples}/scores/SampleScores.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { SampleSummary } from "../../api/types";
+import { SampleSummary } from "../../../client/api/types";
 
 import { getScoreDescriptorForValues } from "../descriptor/score/ScoreDescriptor";
 

inspect_ai/_view/www/src/{samples → app/samples}/scores/SampleScoresGrid.tsx

@@ -1,10 +1,11 @@
 import clsx from "clsx";
-import { FC } from "react";
-import { SampleSummary } from "../../api/types";
-import { EmptyPanel } from "../../components/EmptyPanel";
-import { MetaDataGrid } from "../../metadata/MetaDataGrid";
-import { useEvalDescriptor } from "../../state/hooks";
-import { EvalSample } from "../../types/log";
+import { FC, Fragment } from "react";
+import { EvalSample } from "../../../@types/log";
+import { SampleSummary } from "../../../client/api/types";
+import { EmptyPanel } from "../../../components/EmptyPanel";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { useEvalDescriptor } from "../../../state/hooks";
+import { MetaDataGrid } from "../../content/MetaDataGrid";
 import { SampleScores } from "./SampleScores";
 import styles from "./SampleScoresGrid.module.css";
 
@@ -73,7 +74,7 @@ export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
         let metadata = scoreData.metadata || {};
 
         return (
-          <>
+          <Fragment key={`${scorer}-row`}>
             <div className={clsx("text-size-base", styles.cell)}>{scorer}</div>
             <div className={clsx(styles.cell, "text-size-base")}>{answer}</div>
             <div className={clsx(styles.cell, "text-size-base")}>
@@ -83,11 +84,11 @@ export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
               />
             </div>
             <div className={clsx("text-size-base", styles.cell)}>
-              {explanation}
+              <MarkdownDiv markdown={explanation} />
             </div>
 
             {Object.keys(metadata).length > 0 ? (
-              <>
+              <Fragment key={`${scorer}-metadata`}>
                 <div
                   className={clsx(
                     "text-size-smaller",
@@ -108,9 +109,9 @@ export const SampleScoresGrid: FC<SampleScoresGridProps> = ({
                     styles.fullWidth,
                   )}
                 ></div>
-              </>
+              </Fragment>
             ) : undefined}
-          </>
+          </Fragment>
         );
       })}
     </div>

inspect_ai/_view/www/src/{samples → app/samples}/scores/SampleScoresView.tsx

@@ -1,12 +1,12 @@
 import clsx from "clsx";
-import { Card, CardBody } from "../../components/Card";
-import { MarkdownDiv } from "../../components/MarkdownDiv";
-import { EvalSample } from "../../types/log";
-import { inputString } from "../../utils/format";
+import { EvalSample } from "../../../@types/log";
+import { Card, CardBody } from "../../../components/Card";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { inputString } from "../../../utils/format";
 
 import { FC } from "react";
-import ExpandablePanel from "../../components/ExpandablePanel";
-import { useEvalDescriptor } from "../../state/hooks";
+import ExpandablePanel from "../../../components/ExpandablePanel";
+import { useEvalDescriptor } from "../../../state/hooks";
 import { SampleScoresGrid } from "./SampleScoresGrid";
 import styles from "./SampleScoresView.module.css";
 

inspect_ai/_view/www/src/{samples → app/samples}/transcript/ApprovalEventView.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
+import { ApprovalEvent } from "../../../@types/log";
 import { ApplicationIcons } from "../../appearance/icons";
-import { ApprovalEvent } from "../../types/log";
 import { EventRow } from "./event/EventRow";
 
 interface ApprovalEventViewProps {

inspect_ai/_view/www/src/{samples → app/samples}/transcript/ErrorEventView.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
+import { ErrorEvent } from "../../../@types/log";
+import { ANSIDisplay } from "../../../components/AnsiDisplay";
+import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
-import { ANSIDisplay } from "../../components/AnsiDisplay";
-import { ErrorEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
 
 interface ErrorEventViewProps {

inspect_ai/_view/www/src/{samples → app/samples}/transcript/InfoEventView.tsx

@@ -1,9 +1,9 @@
 import { FC } from "react";
+import { InfoEvent } from "../../../@types/log";
+import { JSONPanel } from "../../../components/JsonPanel";
+import { MarkdownDiv } from "../../../components/MarkdownDiv";
+import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
-import { JSONPanel } from "../../components/JsonPanel";
-import { MarkdownDiv } from "../../components/MarkdownDiv";
-import { InfoEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
 import styles from "./InfoEventView.module.css";
 

inspect_ai/_view/www/src/{samples → app/samples}/transcript/InputEventView.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react";
+import { InputEvent } from "../../../@types/log";
+import { ANSIDisplay } from "../../../components/AnsiDisplay";
+import { formatDateTime } from "../../../utils/format";
 import { ApplicationIcons } from "../../appearance/icons";
-import { ANSIDisplay } from "../../components/AnsiDisplay";
-import { InputEvent } from "../../types/log";
-import { formatDateTime } from "../../utils/format";
 import { EventPanel } from "./event/EventPanel";
 
 interface InputEventViewProps {

inspect_ai/_view/www/src/{samples → app/samples}/transcript/LoggerEventView.tsx

@@ -1,11 +1,11 @@
 import clsx from "clsx";
+import { LoggerEvent } from "../../../@types/log";
 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 { parsedJson as maybeParseJson } from "../../../utils/json";
+import { MetaDataGrid } from "../../content/MetaDataGrid";
 import styles from "./LoggerEventView.module.css";
 
 interface LoggerEventViewProps {

inspect_ai/_view/www/src/{samples → app/samples}/transcript/ModelEventView.module.css

@@ -1,9 +1,5 @@
-.output {
-  padding-top: 1em;
-}
-
 .container {
-  margin: 0.5em 0;
+  margin: 0.5em 0 0 0;
   width: 100%;
 }
 
@@ -35,13 +31,23 @@
   word-wrap: anywhere !important;
 }
 
+.progress {
+  margin-left: 2em;
+}
+
 .toolConfig {
   display: grid;
   grid-template-columns: max-content auto;
   column-gap: 1em;
   row-gap: 0.5em;
+  padding-top: 0.5em;
 }
 
-.progress {
-  margin-left: 2em;
+.toolChoice {
+  border-top: solid var(--bs-light-border-subtle) 1px;
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 1em;
+  margin-top: 0.5em;
+  padding-top: 0.5em;
 }