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

inspect_ai/_view/www/src/components/Card.css

@@ -0,0 +1,60 @@
+.card-header-container {
+  display: grid;
+  grid-template-columns: max-content auto;
+  column-gap: 0em;
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  font-size: var(--inspect-font-size-small);
+  font-weight: 600;
+}
+
+.card-header-icon {
+  padding-right: 0.2rem;
+}
+
+.card-body {
+  background-color: var(--bs-body-bg);
+  border: solid 1px var(--bs-light-border-subtle);
+  border-radius: var(--bs-border-radius);
+  margin: 0 8px 8px 8px;
+  padding: 0.5em;
+}
+
+.card {
+  background-color: var(--bs-light-bg-subtle);
+  border: solid 1px var(--bs-light-border-subtle);
+  border-radius: var(--bs-border-radius);
+  margin-bottom: 1.5em;
+}
+
+.card-collaping-header {
+  border-bottom: none;
+}
+
+.card-collapsing-header-container {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-collapsing-header-icon {
+  flex: 0 0 content;
+  padding-right: 0.5rem;
+}
+
+.card-collapsing-header-contents {
+  color: var(--body-color);
+  opacity: 0.8;
+  flex: 1 1 auto;
+  font-size: var(--inspect-font-size-smaller);
+  padding-right: 0;
+  padding-left: 0;
+  transition: opacity 0.2s ease-out;
+  display: flex;
+  justify-content: space-between;
+}
+
+.card-collapsing-header-toggle {
+  flex: 0 1 1em;
+  text-align: right;
+  padding: 0 0.5em 0.1em 0.5em;
+  font-size: var(--inspect-font-size-smaller);
+}

inspect_ai/_view/www/src/components/Card.tsx

@@ -0,0 +1,109 @@
+import clsx from "clsx";
+import { ApplicationIcons } from "../appearance/icons";
+import "./Card.css";
+
+interface CardHeaderProps {
+  id?: string;
+  icon?: string;
+  label?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+interface CardBodyProps {
+  id?: string;
+  children?: React.ReactNode;
+}
+
+interface CardProps {
+  id?: string;
+  children?: React.ReactNode;
+}
+
+interface CardCollapsingHeaderProps {
+  id: string;
+  icon: string;
+  label: string;
+  cardBodyId: string;
+  children?: React.ReactNode;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({
+  id,
+  icon,
+  label,
+  className,
+  children,
+}) => {
+  return (
+    <div
+      className={clsx("card-header-container", "text-style-label", className)}
+      id={id || ""}
+    >
+      {icon ? (
+        <i className={clsx("card-header-icon", icon)}></i>
+      ) : (
+        <span className={"card-header-icon"}></span>
+      )}
+      {label ? label : ""} {children}
+    </div>
+  );
+};
+
+export const CardBody: React.FC<CardBodyProps> = ({ id, children }) => {
+  return (
+    <div className={"card-body"} id={id || ""}>
+      {children}
+    </div>
+  );
+};
+
+export const Card: React.FC<CardProps> = ({ id, children }) => {
+  return (
+    <div className={"card"} id={id}>
+      {children}
+    </div>
+  );
+};
+
+export const CardCollapsingHeader: React.FC<CardCollapsingHeaderProps> = ({
+  id,
+  icon,
+  label,
+  cardBodyId,
+  children,
+}) => {
+  return (
+    <CardHeader
+      id={id}
+      className={clsx(
+        "card-collaping-header",
+        "container-fluid",
+        "collapse",
+        "show",
+        "do-not-collapse-self",
+      )}
+    >
+      <div
+        className={clsx("card-collaping-header-container", "row", "row-cols-3")}
+        data-bs-toggle="collapse"
+        data-bs-target={`#${cardBodyId}`}
+        aria-expanded="false"
+        aria-controls={cardBodyId}
+      >
+        <div className={"card-collaping-header-icon"}>
+          <i className={icon}></i>{" "}
+          <span className="hide-when-collapsed">{label}</span>
+        </div>
+        <div className="hide-when-expanded card-collapsing-header-content">
+          {children}
+        </div>
+        <div className={"card-collapsing-header-toggle"}>
+          <i
+            className={clsx(ApplicationIcons["toggle-right"], "toggle-rotated")}
+          ></i>
+        </div>
+      </div>
+    </CardHeader>
+  );
+};

inspect_ai/_view/www/src/components/CopyButton.module.css

@@ -0,0 +1,11 @@
+.copyButton {
+  border: none;
+  background-color: inherit;
+  opacity: 0.5;
+  padding-top: 0;
+  transition: opacity 0.2s;
+}
+
+.copyButton:hover {
+  opacity: 0.75;
+}

inspect_ai/_view/www/src/components/CopyButton.tsx

@@ -0,0 +1,58 @@
+import clsx from "clsx";
+import { JSX, useState } from "react";
+import { ApplicationIcons } from "../appearance/icons";
+import styles from "./CopyButton.module.css";
+
+interface CopyButtonProps {
+  value: string;
+  onCopySuccess?: () => void;
+  onCopyError?: (error: Error) => void;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const CopyButton = ({
+  value,
+  onCopySuccess,
+  onCopyError,
+  className = "",
+  ariaLabel = "Copy to clipboard",
+}: CopyButtonProps): JSX.Element => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleClick = async (): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setIsCopied(true);
+      onCopySuccess?.();
+
+      // Reset copy state after delay
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 1250);
+    } catch (error) {
+      onCopyError?.(
+        error instanceof Error ? error : new Error("Failed to copy"),
+      );
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={clsx(styles.copyButton, className)}
+      onClick={handleClick}
+      aria-label={ariaLabel}
+      disabled={isCopied}
+    >
+      <i
+        className={
+          isCopied
+            ? `${ApplicationIcons.confirm} primary`
+            : ApplicationIcons.copy
+        }
+        aria-hidden="true"
+      />
+    </button>
+  );
+};

inspect_ai/_view/www/src/components/DownloadButton.css

@@ -0,0 +1,4 @@
+.download-button {
+  margin-top: 3em;
+  font-size: var(--inspect-font-size-small);
+}

inspect_ai/_view/www/src/components/DownloadButton.tsx

@@ -0,0 +1,25 @@
+import api from "../api/index";
+import "./DownloadButton.css";
+
+interface DownloadButtonProps {
+  label: string;
+  fileName: string;
+  fileContents: string | Blob | ArrayBuffer | ArrayBufferView;
+}
+
+export const DownloadButton: React.FC<DownloadButtonProps> = ({
+  label,
+  fileName,
+  fileContents,
+}) => {
+  return (
+    <button
+      className={"btn btn-outline-primary download-button"}
+      onClick={async () => {
+        await api.download_file(fileName, fileContents);
+      }}
+    >
+      {label}
+    </button>
+  );
+};

inspect_ai/_view/www/src/components/DownloadPanel.css

@@ -0,0 +1,10 @@
+.download-panel {
+  display: grid;
+  grid-template-rows: content content;
+  padding-top: 3em;
+  justify-items: center;
+}
+
+.download-panel-message {
+  font-size: var(--inspect-font-size-small);
+}

inspect_ai/_view/www/src/components/DownloadPanel.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DownloadButton } from "../components/DownloadButton";
+import "./DownloadPanel.css";
+
+interface DownloadPanelProps {
+  message: string;
+  buttonLabel: string;
+  fileName: string;
+  fileContents: string | Blob | ArrayBuffer | ArrayBufferView;
+}
+
+export const DownloadPanel: React.FC<DownloadPanelProps> = ({
+  message,
+  buttonLabel,
+  fileName,
+  fileContents,
+}) => {
+  return (
+    <div>
+      <div className={"download-panel"}>
+        <div className={"download-panel-message"}>{message}</div>
+        <DownloadButton
+          label={buttonLabel}
+          fileName={fileName}
+          fileContents={fileContents}
+        />
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/EmptyPanel.css

@@ -0,0 +1,12 @@
+.empty-panel {
+  width: 100%;
+}
+
+.empty-panel .container {
+  display: flex;
+  text-align: center;
+  flex: 0 0 content;
+  align-items: center;
+  justify-content: center;
+  height: 10rem;
+}

inspect_ai/_view/www/src/components/EmptyPanel.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface EmptyPanelProps {
+  children?: ReactNode;
+}
+
+export const EmptyPanel: React.FC<EmptyPanelProps> = ({ children }) => {
+  return (
+    <div className={"empty-panel"}>
+      <div className={"container"}>
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/ErrorPanel.css

@@ -0,0 +1,37 @@
+.error-panel {
+  flex-direction: column;
+  min-height: 10rem;
+  margin-top: 4rem;
+  margin-bottom: 4em;
+  width: 100vw;
+}
+.error-panel-heading {
+  font-size: var(--inspect-font-size-larger);
+}
+
+.error-panel-body {
+  display: inline-block;
+  font-size: var(--inspect-font-size-smaller);
+  margin-top: 1rem;
+  border: solid 1px var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  padding: 1em;
+  max-width: 80%;
+}
+
+.error-panel-stack {
+  font-size: var(--inspect-font-size-smaller);
+  white-space: prewrap;
+}
+
+.centered-flex {
+  display: flex;
+  flex: 0 0 content;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-icon {
+  margin-right: 0.5rem;
+  color: var(--bs-red);
+}

inspect_ai/_view/www/src/components/ErrorPanel.tsx

@@ -0,0 +1,39 @@
+import { ApplicationIcons } from "../appearance/icons";
+import "./ErrorPanel.css";
+
+export interface DisplayError {
+  message: string;
+  stack?: string;
+  displayStack?: boolean;
+}
+
+interface ErrorPanelProps {
+  title: string;
+  error: DisplayError;
+}
+
+export const ErrorPanel: React.FC<ErrorPanelProps> = ({ title, error }) => {
+  const message = error.message;
+  const stack = error.stack;
+
+  return (
+    <div className={"error-panel centered-flex"}>
+      <div className={"error-panel-heading centered-flex"}>
+        <div>
+          <i className={`${ApplicationIcons.error} error-icon`}></i>
+        </div>
+        <div>{title || ""}</div>
+      </div>
+      <div className={"error-panel-body"}>
+        <div>
+          Error: {message || ""}$
+          {stack && error.displayStack !== false && (
+            <pre className={"error-panel-stack"}>
+              <code>at ${stack}</code>
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

inspect_ai/_view/www/src/components/ExpandablePanel.css

@@ -0,0 +1,40 @@
+.expandable-bordered {
+  border: solid var(--bs-light-border-subtle) 1px;
+}
+
+.expandable-togglable {
+  margin-bottom: 1em;
+}
+
+.expandable-contents {
+  font-size: var(--inspect-font-size-base);
+}
+
+.expandable-collapsed {
+  overflow: hidden;
+}
+
+.more-toggle {
+  display: flex;
+  margin-bottom: 0.5em;
+  margin-top: 0;
+}
+
+.more-toggle.bordered {
+  border-top: solid var(--bs-light-border-subtle) 1px;
+  margin-top: 0.5em;
+}
+
+.more-toggle-container {
+  display: inline-block;
+  border: solid var(--bs-light-border-subtle) 1px;
+  border-top: none;
+  margin-left: auto;
+  margin-right: 1em;
+}
+
+.more-toggle-button {
+  font-size: var(--inspect-font-size-smaller);
+  border: none;
+  padding: 0.1rem 0.5rem;
+}

inspect_ai/_view/www/src/components/ExpandablePanel.tsx

@@ -0,0 +1,115 @@
+import clsx from "clsx";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ApplicationIcons } from "../appearance/icons";
+import { useResizeObserver } from "../utils/dom";
+import "./ExpandablePanel.css";
+
+interface ExpandablePanelProps {
+  collapse: boolean;
+  border?: boolean;
+  lines?: number;
+  children?: React.ReactNode;
+  className?: string | string[];
+}
+
+export const ExpandablePanel: React.FC<ExpandablePanelProps> = ({
+  collapse,
+  border,
+  lines = 15,
+  children,
+  className,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(collapse);
+  const [showToggle, setShowToggle] = useState(false);
+  const lineHeightRef = useRef<number>(0);
+
+  useEffect(() => {
+    setIsCollapsed(collapse);
+  }, [collapse]);
+
+  const checkOverflow = useCallback(
+    (entry: ResizeObserverEntry) => {
+      const element = entry.target as HTMLDivElement;
+
+      // Calculate line height if we haven't yet
+      if (!lineHeightRef.current) {
+        const computedStyle = window.getComputedStyle(element);
+        lineHeightRef.current = parseInt(computedStyle.lineHeight) || 16; // fallback to 16px if can't get line height
+      }
+
+      const maxCollapsedHeight = lines * lineHeightRef.current;
+      const contentHeight = element.scrollHeight;
+
+      setShowToggle(contentHeight > maxCollapsedHeight);
+    },
+    [lines],
+  );
+
+  const contentRef = useResizeObserver(checkOverflow);
+
+  const baseStyles = {
+    overflow: "hidden",
+    ...(isCollapsed && {
+      maxHeight: `${lines}em`,
+    }),
+  };
+
+  return (
+    <div className={clsx(className)}>
+      <div
+        style={baseStyles}
+        ref={contentRef}
+        className={clsx(
+          "expandable-panel",
+          isCollapsed ? "expandable-collapsed" : undefined,
+          border ? "expandable-bordered" : undefined,
+        )}
+      >
+        {children}
+      </div>
+
+      {showToggle && (
+        <MoreToggle
+          collapsed={isCollapsed}
+          setCollapsed={setIsCollapsed}
+          border={!border}
+        />
+      )}
+    </div>
+  );
+};
+
+interface MoreToggleProps {
+  collapsed: boolean;
+  border: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+  style?: React.CSSProperties;
+}
+
+const MoreToggle: React.FC<MoreToggleProps> = ({
+  collapsed,
+  border,
+  setCollapsed,
+  style,
+}) => {
+  const text = collapsed ? "more" : "less";
+  const icon = collapsed
+    ? ApplicationIcons["expand-down"]
+    : ApplicationIcons.collapse.up;
+
+  return (
+    <div className={`more-toggle ${border ? "bordered" : ""}`} style={style}>
+      <div className="more-toggle-container">
+        <button
+          className="btn more-toggle-button"
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          <i className={icon} />
+          {text}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ExpandablePanel;

inspect_ai/_view/www/src/components/FindBand.css

@@ -0,0 +1,49 @@
+.findBand {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-right: 20%;
+  z-index: 1060;
+  color: var(--inspect-find-foreground);
+  background-color: var(--inspect-find-background);
+  font-size: 0.9rem;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  column-gap: 0.2em;
+  padding: 0.2rem;
+  border-bottom: solid 1px var(--bs-light-border-subtle);
+  border-left: solid 1px var(--bs-light-border-subtle);
+  border-right: solid 1px var(--bs-light-border-subtle);
+  box-shadow: var(--bs-box-shadow);
+}
+
+.findBand input {
+  height: 2em;
+  font-size: 0.9em;
+  margin: 0.1rem;
+  outline: none;
+  border: solid 1px var(--inspect-input-border);
+  color: var(--inspect-input-foreground);
+  background: var(--inspect-input-background);
+}
+
+#inspect-find-no-results {
+  font-size: 0.9em;
+  opacity: 0;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.5em;
+}
+
+.findBand .btn.next,
+.findBand .btn.prev {
+  padding: 0;
+  font-size: var(--inspect-fond-size-larger);
+}
+
+.findBand .btn.close {
+  padding: 0;
+  font-size: var(--inspect-font-size-title-secondary);
+  margin-top: -0.1rem;
+  margin-bottom: -0.1rem;
+}