Improve tool input / output appearance when rendered in vscode

CHANGELOG.md

@@ -16,6 +16,7 @@
 - Bugfix: Fix audio and video inputs for new Google GenAI client.
 - Bugfix: Ensure that token limits are not enforced during model graded scoring.
 - Inspect View: Fix layout issues with human agent terminal session playback.
+- Inspect View: Improve tool input / output appearance when rendered in VSCode.
 
 ## v0.3.70 (25 February 2025)
 

src/inspect_ai/_view/www/App.css

@@ -805,15 +805,19 @@ table.table.table-sm td {
   overflow: unset;
 }
 
+.markdown-content pre[class*="language-"],
 pre[class*="language-"].tool-output,
 .tool-output {
   background-color: #f8f8f8;
 }
+
+.vscode-dark .markdown-content pre[class*="language-"],
 .vscode-dark pre[class*="language-"].tool-output,
 .vscode-dark .tool-output {
   background-color: #333333;
 }
 
+.markdown-content pre[class*="language-"],
 pre[class*="language-"].tool-output {
   border: none !important;
   box-shadow: none !important;

src/inspect_ai/_view/www/dist/assets/index.js

@@ -21335,10 +21335,10 @@ var require_assets = __commonJS({
     const styles$11 = {
       contentImage
     };
-    const toolImage = "_toolImage_hw4du_1";
-    const output$1 = "_output_hw4du_6";
-    const textOutput = "_textOutput_hw4du_10";
-    const textCode = "_textCode_hw4du_17";
+    const toolImage = "_toolImage_1j5uu_1";
+    const output$1 = "_output_1j5uu_6";
+    const textOutput = "_textOutput_1j5uu_10";
+    const textCode = "_textCode_1j5uu_17";
     const styles$10 = {
       toolImage,
       output: output$1,
@@ -21380,7 +21380,7 @@ var require_assets = __commonJS({
       return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(styles$10.output), children: outputs });
     };
     const ToolTextOutput = ({ text: text2 }) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$10.textOutput), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$10.textCode), children: text2.trim() }) });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: clsx(styles$10.textOutput, "tool-output"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("code", { className: clsx("sourceCode", styles$10.textCode), children: text2.trim() }) });
     };
     const MessageContent = ({ contents: contents2 }) => {
       if (Array.isArray(contents2)) {
@@ -21600,7 +21600,7 @@ var require_assets = __commonJS({
           {
             markdown: toolCallView.content,
             ref: toolViewRef,
-            className: clsx(styles$$.bottomPadding, "text-size-small")
+            className: clsx("text-size-small", "tool-output")
           }
         );
       }

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

@@ -49,7 +49,7 @@ export const ToolInput: React.FC<ToolInputProps> = memo((props) => {
       <MarkdownDiv
         markdown={toolCallView.content}
         ref={toolViewRef}
-        className={clsx(styles.bottomPadding, "text-size-small")}
+        className={clsx("text-size-small", "tool-output")}
       />
     );
   }

src/inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css

@@ -8,7 +8,7 @@
 }
 
 .textOutput {
-  margin-left: 2px;
+  padding-left: 2px;
   padding: 0.5em 0.5em 0.5em 0.5em;
   white-space: pre-wrap;
   margin-bottom: 0;

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

@@ -53,7 +53,7 @@ interface ToolTextOutputProps {
  */
 const ToolTextOutput: React.FC<ToolTextOutputProps> = ({ text }) => {
   return (
-    <pre className={clsx(styles.textOutput)}>
+    <pre className={clsx(styles.textOutput, "tool-output")}>
       <code className={clsx("sourceCode", styles.textCode)}>{text.trim()}</code>
     </pre>
   );