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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (219) hide show
  1. inspect_ai/_cli/eval.py +14 -8
  2. inspect_ai/_display/core/display.py +2 -0
  3. inspect_ai/_display/core/footer.py +13 -3
  4. inspect_ai/_display/plain/display.py +6 -2
  5. inspect_ai/_display/rich/display.py +19 -6
  6. inspect_ai/_display/textual/app.py +6 -1
  7. inspect_ai/_display/textual/display.py +4 -0
  8. inspect_ai/_display/textual/widgets/transcript.py +10 -6
  9. inspect_ai/_eval/task/run.py +5 -8
  10. inspect_ai/_util/content.py +20 -1
  11. inspect_ai/_util/transcript.py +10 -4
  12. inspect_ai/_util/working.py +4 -0
  13. inspect_ai/_view/www/App.css +6 -0
  14. inspect_ai/_view/www/dist/assets/index.css +115 -87
  15. inspect_ai/_view/www/dist/assets/index.js +5324 -2276
  16. inspect_ai/_view/www/eslint.config.mjs +24 -1
  17. inspect_ai/_view/www/log-schema.json +283 -20
  18. inspect_ai/_view/www/package.json +8 -3
  19. inspect_ai/_view/www/src/App.tsx +2 -2
  20. inspect_ai/_view/www/src/components/AnsiDisplay.tsx +4 -3
  21. inspect_ai/_view/www/src/components/Card.tsx +9 -8
  22. inspect_ai/_view/www/src/components/DownloadButton.tsx +2 -1
  23. inspect_ai/_view/www/src/components/EmptyPanel.tsx +2 -2
  24. inspect_ai/_view/www/src/components/ErrorPanel.tsx +4 -3
  25. inspect_ai/_view/www/src/components/ExpandablePanel.tsx +13 -5
  26. inspect_ai/_view/www/src/components/FindBand.tsx +3 -3
  27. inspect_ai/_view/www/src/components/HumanBaselineView.tsx +3 -3
  28. inspect_ai/_view/www/src/components/LabeledValue.tsx +5 -4
  29. inspect_ai/_view/www/src/components/LargeModal.tsx +18 -13
  30. inspect_ai/_view/www/src/components/{LightboxCarousel.css → LightboxCarousel.module.css} +22 -18
  31. inspect_ai/_view/www/src/components/LightboxCarousel.tsx +36 -27
  32. inspect_ai/_view/www/src/components/MessageBand.tsx +2 -1
  33. inspect_ai/_view/www/src/components/NavPills.tsx +9 -8
  34. inspect_ai/_view/www/src/components/ProgressBar.tsx +2 -1
  35. inspect_ai/_view/www/src/components/TabSet.tsx +21 -15
  36. inspect_ai/_view/www/src/index.tsx +2 -2
  37. inspect_ai/_view/www/src/metadata/MetaDataGrid.tsx +11 -9
  38. inspect_ai/_view/www/src/metadata/MetaDataView.tsx +3 -2
  39. inspect_ai/_view/www/src/metadata/MetadataGrid.module.css +1 -0
  40. inspect_ai/_view/www/src/metadata/RenderedContent.tsx +16 -0
  41. inspect_ai/_view/www/src/plan/DatasetDetailView.tsx +3 -2
  42. inspect_ai/_view/www/src/plan/DetailStep.tsx +2 -1
  43. inspect_ai/_view/www/src/plan/PlanCard.tsx +2 -5
  44. inspect_ai/_view/www/src/plan/PlanDetailView.tsx +6 -9
  45. inspect_ai/_view/www/src/plan/ScorerDetailView.tsx +2 -1
  46. inspect_ai/_view/www/src/plan/SolverDetailView.tsx +3 -3
  47. inspect_ai/_view/www/src/samples/InlineSampleDisplay.tsx +2 -2
  48. inspect_ai/_view/www/src/samples/SampleDialog.tsx +3 -3
  49. inspect_ai/_view/www/src/samples/SampleDisplay.tsx +2 -2
  50. inspect_ai/_view/www/src/samples/SampleSummaryView.tsx +2 -2
  51. inspect_ai/_view/www/src/samples/SamplesTools.tsx +2 -1
  52. inspect_ai/_view/www/src/samples/chat/ChatMessage.tsx +3 -19
  53. inspect_ai/_view/www/src/samples/chat/ChatMessageRenderer.tsx +2 -1
  54. inspect_ai/_view/www/src/samples/chat/ChatMessageRow.tsx +2 -1
  55. inspect_ai/_view/www/src/samples/chat/ChatView.tsx +2 -1
  56. inspect_ai/_view/www/src/samples/chat/ChatViewVirtualList.tsx +22 -7
  57. inspect_ai/_view/www/src/samples/chat/MessageContent.tsx +35 -6
  58. inspect_ai/_view/www/src/samples/chat/MessageContents.tsx +2 -2
  59. inspect_ai/_view/www/src/samples/chat/messages.ts +15 -2
  60. inspect_ai/_view/www/src/samples/chat/tools/ToolCallView.tsx +13 -4
  61. inspect_ai/_view/www/src/samples/chat/tools/ToolInput.module.css +2 -2
  62. inspect_ai/_view/www/src/samples/chat/tools/ToolInput.tsx +18 -19
  63. inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.module.css +1 -1
  64. inspect_ai/_view/www/src/samples/chat/tools/ToolOutput.tsx +4 -3
  65. inspect_ai/_view/www/src/samples/chat/tools/ToolTitle.tsx +2 -2
  66. inspect_ai/_view/www/src/samples/error/FlatSampleErrorView.tsx +2 -3
  67. inspect_ai/_view/www/src/samples/error/SampleErrorView.tsx +3 -2
  68. inspect_ai/_view/www/src/samples/list/SampleFooter.tsx +2 -1
  69. inspect_ai/_view/www/src/samples/list/SampleHeader.tsx +2 -1
  70. inspect_ai/_view/www/src/samples/list/SampleList.tsx +57 -45
  71. inspect_ai/_view/www/src/samples/list/SampleRow.tsx +2 -1
  72. inspect_ai/_view/www/src/samples/list/SampleSeparator.tsx +2 -1
  73. inspect_ai/_view/www/src/samples/sample-tools/EpochFilter.tsx +2 -2
  74. inspect_ai/_view/www/src/samples/sample-tools/SelectScorer.tsx +4 -3
  75. inspect_ai/_view/www/src/samples/sample-tools/SortFilter.tsx +2 -5
  76. inspect_ai/_view/www/src/samples/sample-tools/sample-filter/SampleFilter.tsx +2 -2
  77. inspect_ai/_view/www/src/samples/scores/SampleScoreView.tsx +2 -1
  78. inspect_ai/_view/www/src/samples/scores/SampleScores.tsx +2 -2
  79. inspect_ai/_view/www/src/samples/transcript/ApprovalEventView.tsx +2 -1
  80. inspect_ai/_view/www/src/samples/transcript/ErrorEventView.tsx +2 -1
  81. inspect_ai/_view/www/src/samples/transcript/InfoEventView.tsx +2 -1
  82. inspect_ai/_view/www/src/samples/transcript/InputEventView.tsx +2 -1
  83. inspect_ai/_view/www/src/samples/transcript/LoggerEventView.module.css +4 -0
  84. inspect_ai/_view/www/src/samples/transcript/LoggerEventView.tsx +12 -2
  85. inspect_ai/_view/www/src/samples/transcript/ModelEventView.module.css +1 -1
  86. inspect_ai/_view/www/src/samples/transcript/ModelEventView.tsx +25 -28
  87. inspect_ai/_view/www/src/samples/transcript/SampleInitEventView.tsx +2 -1
  88. inspect_ai/_view/www/src/samples/transcript/SampleLimitEventView.tsx +5 -4
  89. inspect_ai/_view/www/src/samples/transcript/SampleTranscript.tsx +2 -2
  90. inspect_ai/_view/www/src/samples/transcript/SandboxEventView.tsx +8 -7
  91. inspect_ai/_view/www/src/samples/transcript/ScoreEventView.tsx +2 -2
  92. inspect_ai/_view/www/src/samples/transcript/StepEventView.tsx +3 -3
  93. inspect_ai/_view/www/src/samples/transcript/SubtaskEventView.tsx +18 -14
  94. inspect_ai/_view/www/src/samples/transcript/ToolEventView.tsx +5 -5
  95. inspect_ai/_view/www/src/samples/transcript/TranscriptView.tsx +34 -15
  96. inspect_ai/_view/www/src/samples/transcript/event/EventNav.tsx +2 -1
  97. inspect_ai/_view/www/src/samples/transcript/event/EventNavs.tsx +2 -1
  98. inspect_ai/_view/www/src/samples/transcript/event/EventRow.tsx +3 -2
  99. inspect_ai/_view/www/src/samples/transcript/event/EventSection.tsx +2 -2
  100. inspect_ai/_view/www/src/samples/transcript/event/EventTimingPanel.module.css +28 -0
  101. inspect_ai/_view/www/src/samples/transcript/event/EventTimingPanel.tsx +115 -0
  102. inspect_ai/_view/www/src/samples/transcript/event/utils.ts +29 -0
  103. inspect_ai/_view/www/src/samples/transcript/state/StateDiffView.tsx +2 -1
  104. inspect_ai/_view/www/src/samples/transcript/state/StateEventRenderers.tsx +3 -3
  105. inspect_ai/_view/www/src/samples/transcript/state/StateEventView.tsx +11 -8
  106. inspect_ai/_view/www/src/types/log.d.ts +129 -34
  107. inspect_ai/_view/www/src/usage/ModelTokenTable.tsx +6 -10
  108. inspect_ai/_view/www/src/usage/ModelUsagePanel.module.css +4 -0
  109. inspect_ai/_view/www/src/usage/ModelUsagePanel.tsx +32 -9
  110. inspect_ai/_view/www/src/usage/TokenTable.tsx +4 -6
  111. inspect_ai/_view/www/src/usage/UsageCard.tsx +2 -1
  112. inspect_ai/_view/www/src/utils/format.ts +1 -1
  113. inspect_ai/_view/www/src/utils/json.ts +24 -0
  114. inspect_ai/_view/www/src/workspace/WorkSpace.tsx +6 -5
  115. inspect_ai/_view/www/src/workspace/WorkSpaceView.tsx +9 -2
  116. inspect_ai/_view/www/src/workspace/error/TaskErrorPanel.tsx +2 -1
  117. inspect_ai/_view/www/src/workspace/navbar/Navbar.tsx +2 -1
  118. inspect_ai/_view/www/src/workspace/navbar/PrimaryBar.tsx +3 -3
  119. inspect_ai/_view/www/src/workspace/navbar/ResultsPanel.tsx +4 -3
  120. inspect_ai/_view/www/src/workspace/navbar/SecondaryBar.tsx +5 -4
  121. inspect_ai/_view/www/src/workspace/navbar/StatusPanel.tsx +5 -8
  122. inspect_ai/_view/www/src/workspace/sidebar/EvalStatus.tsx +5 -4
  123. inspect_ai/_view/www/src/workspace/sidebar/LogDirectoryTitleView.tsx +2 -1
  124. inspect_ai/_view/www/src/workspace/sidebar/Sidebar.tsx +2 -1
  125. inspect_ai/_view/www/src/workspace/sidebar/SidebarLogEntry.tsx +2 -2
  126. inspect_ai/_view/www/src/workspace/sidebar/SidebarScoreView.tsx +2 -1
  127. inspect_ai/_view/www/src/workspace/sidebar/SidebarScoresView.tsx +2 -2
  128. inspect_ai/_view/www/src/workspace/tabs/InfoTab.tsx +2 -2
  129. inspect_ai/_view/www/src/workspace/tabs/JsonTab.tsx +2 -5
  130. inspect_ai/_view/www/src/workspace/tabs/SamplesTab.tsx +12 -11
  131. inspect_ai/_view/www/yarn.lock +241 -5
  132. inspect_ai/log/_condense.py +3 -0
  133. inspect_ai/log/_recorders/eval.py +6 -1
  134. inspect_ai/log/_transcript.py +58 -1
  135. inspect_ai/model/__init__.py +2 -0
  136. inspect_ai/model/_call_tools.py +7 -0
  137. inspect_ai/model/_chat_message.py +22 -7
  138. inspect_ai/model/_conversation.py +10 -8
  139. inspect_ai/model/_generate_config.py +25 -4
  140. inspect_ai/model/_model.py +133 -57
  141. inspect_ai/model/_model_output.py +3 -0
  142. inspect_ai/model/_openai.py +106 -40
  143. inspect_ai/model/_providers/anthropic.py +281 -153
  144. inspect_ai/model/_providers/google.py +27 -8
  145. inspect_ai/model/_providers/groq.py +9 -4
  146. inspect_ai/model/_providers/openai.py +57 -4
  147. inspect_ai/model/_providers/openai_o1.py +10 -0
  148. inspect_ai/model/_providers/providers.py +1 -1
  149. inspect_ai/model/_reasoning.py +15 -2
  150. inspect_ai/scorer/_model.py +23 -19
  151. inspect_ai/solver/_human_agent/agent.py +14 -10
  152. inspect_ai/solver/_human_agent/commands/__init__.py +7 -3
  153. inspect_ai/solver/_human_agent/commands/submit.py +76 -30
  154. inspect_ai/tool/__init__.py +2 -0
  155. inspect_ai/tool/_tool.py +3 -1
  156. inspect_ai/tool/_tools/_computer/_common.py +117 -58
  157. inspect_ai/tool/_tools/_computer/_computer.py +80 -57
  158. inspect_ai/tool/_tools/_computer/_resources/image_home_dir/.config/Code/User/settings.json +7 -1
  159. inspect_ai/tool/_tools/_computer/_resources/image_home_dir/.config/xfce4/xfconf/xfce-perchannel-xml/xfwm4.xml +91 -0
  160. inspect_ai/tool/_tools/_computer/_resources/tool/.pylintrc +8 -0
  161. inspect_ai/tool/_tools/_computer/_resources/tool/.vscode/settings.json +12 -0
  162. inspect_ai/tool/_tools/_computer/_resources/tool/_args.py +78 -0
  163. inspect_ai/tool/_tools/_computer/_resources/tool/_constants.py +20 -0
  164. inspect_ai/tool/_tools/_computer/_resources/tool/_run.py +1 -1
  165. inspect_ai/tool/_tools/_computer/_resources/tool/_x11_client.py +175 -113
  166. inspect_ai/tool/_tools/_computer/_resources/tool/computer_tool.py +76 -20
  167. inspect_ai/tool/_tools/_computer/_resources/tool/pyproject.toml +65 -0
  168. inspect_ai/tool/_tools/_computer/test_args.py +151 -0
  169. inspect_ai/tool/_tools/_web_browser/_resources/.pylintrc +8 -0
  170. inspect_ai/tool/_tools/_web_browser/_resources/.vscode/launch.json +24 -0
  171. inspect_ai/tool/_tools/_web_browser/_resources/.vscode/settings.json +25 -0
  172. inspect_ai/tool/_tools/_web_browser/_resources/Dockerfile +5 -6
  173. inspect_ai/tool/_tools/_web_browser/_resources/README.md +10 -11
  174. inspect_ai/tool/_tools/_web_browser/_resources/accessibility_tree.py +71 -0
  175. inspect_ai/tool/_tools/_web_browser/_resources/accessibility_tree_node.py +323 -0
  176. inspect_ai/tool/_tools/_web_browser/_resources/cdp/__init__.py +5 -0
  177. inspect_ai/tool/_tools/_web_browser/_resources/cdp/a11y.py +279 -0
  178. inspect_ai/tool/_tools/_web_browser/_resources/cdp/dom.py +9 -0
  179. inspect_ai/tool/_tools/_web_browser/_resources/cdp/dom_snapshot.py +293 -0
  180. inspect_ai/tool/_tools/_web_browser/_resources/cdp/page.py +94 -0
  181. inspect_ai/tool/_tools/_web_browser/_resources/constants.py +2 -0
  182. inspect_ai/tool/_tools/_web_browser/_resources/images/usage_diagram.svg +2 -0
  183. inspect_ai/tool/_tools/_web_browser/_resources/playwright_browser.py +50 -0
  184. inspect_ai/tool/_tools/_web_browser/_resources/playwright_crawler.py +31 -359
  185. inspect_ai/tool/_tools/_web_browser/_resources/playwright_page_crawler.py +280 -0
  186. inspect_ai/tool/_tools/_web_browser/_resources/pyproject.toml +65 -0
  187. inspect_ai/tool/_tools/_web_browser/_resources/rectangle.py +64 -0
  188. inspect_ai/tool/_tools/_web_browser/_resources/rpc_client_helpers.py +146 -0
  189. inspect_ai/tool/_tools/_web_browser/_resources/scale_factor.py +64 -0
  190. inspect_ai/tool/_tools/_web_browser/_resources/test_accessibility_tree_node.py +180 -0
  191. inspect_ai/tool/_tools/_web_browser/_resources/test_playwright_crawler.py +15 -9
  192. inspect_ai/tool/_tools/_web_browser/_resources/test_rectangle.py +15 -0
  193. inspect_ai/tool/_tools/_web_browser/_resources/test_web_client.py +44 -0
  194. inspect_ai/tool/_tools/_web_browser/_resources/web_browser_rpc_types.py +39 -0
  195. inspect_ai/tool/_tools/_web_browser/_resources/web_client.py +198 -48
  196. inspect_ai/tool/_tools/_web_browser/_resources/web_client_new_session.py +26 -25
  197. inspect_ai/tool/_tools/_web_browser/_resources/web_server.py +178 -39
  198. inspect_ai/tool/_tools/_web_browser/_web_browser.py +38 -19
  199. inspect_ai/util/__init__.py +2 -1
  200. inspect_ai/util/_display.py +12 -0
  201. inspect_ai/util/_sandbox/events.py +55 -21
  202. inspect_ai/util/_sandbox/self_check.py +131 -43
  203. inspect_ai/util/_subtask.py +11 -0
  204. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/METADATA +1 -1
  205. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/RECORD +209 -186
  206. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/WHEEL +1 -1
  207. inspect_ai/_view/www/src/components/VirtualList.module.css +0 -19
  208. inspect_ai/_view/www/src/components/VirtualList.tsx +0 -292
  209. inspect_ai/tool/_tools/_computer/_computer_split.py +0 -198
  210. inspect_ai/tool/_tools/_web_browser/_resources/accessibility_node.py +0 -312
  211. inspect_ai/tool/_tools/_web_browser/_resources/dm_env_servicer.py +0 -275
  212. inspect_ai/tool/_tools/_web_browser/_resources/images/usage_diagram.png +0 -0
  213. inspect_ai/tool/_tools/_web_browser/_resources/test_accessibility_node.py +0 -176
  214. inspect_ai/tool/_tools/_web_browser/_resources/test_dm_env_servicer.py +0 -135
  215. inspect_ai/tool/_tools/_web_browser/_resources/test_web_environment.py +0 -71
  216. inspect_ai/tool/_tools/_web_browser/_resources/web_environment.py +0 -184
  217. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/LICENSE +0 -0
  218. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/entry_points.txt +0 -0
  219. {inspect_ai-0.3.70.dist-info → inspect_ai-0.3.72.dist-info}/top_level.txt +0 -0
@@ -12,7 +12,9 @@
12
12
  "dev": "vite",
13
13
  "prettier:check": "prettier --check src",
14
14
  "prettier:write": "prettier --write src",
15
- "test": "echo \"Error: no test specified\" && exit 1"
15
+ "test": "echo \"Error: no test specified\" && exit 1",
16
+ "lint": "eslint 'src/**/*.{js,jsx,mjs,ts,tsx}'",
17
+ "lint:fix": "eslint 'src/**/*.{js,jsx,mjs,ts,tsx}' --fix"
16
18
  },
17
19
  "exports": {
18
20
  ".": "./src/App.mjs"
@@ -29,9 +31,11 @@
29
31
  "@types/react-dom": "^19.0.3",
30
32
  "@vitejs/plugin-react": "^4.3.4",
31
33
  "eslint": "9.x",
34
+ "eslint-plugin-react-hooks": "^5.1.0",
32
35
  "globals": "^15.6.0",
33
36
  "prettier": "^3.3.3",
34
37
  "typescript": "^5.7.3",
38
+ "typescript-eslint": "^8.25.0",
35
39
  "vite": "^5.3.2"
36
40
  },
37
41
  "dependencies": {
@@ -41,8 +45,8 @@
41
45
  "@codemirror/state": "^6.5.1",
42
46
  "@lezer/highlight": "^1.2.1",
43
47
  "@popperjs/core": "^2.11.8",
44
- "asciinema-player": "^3.8.2",
45
48
  "ansi-output": "^0.0.9",
49
+ "asciinema-player": "^3.8.2",
46
50
  "bootstrap": "^5.3.3",
47
51
  "bootstrap-icons": "^1.11.3",
48
52
  "clipboard": "^2.0.11",
@@ -60,6 +64,7 @@
60
64
  "postcss-url": "^10.1.3",
61
65
  "prismjs": "^1.29.0",
62
66
  "react": "^19.0.0",
63
- "react-dom": "^19.0.0"
67
+ "react-dom": "^19.0.0",
68
+ "react-virtuoso": "^4.12.5"
64
69
  }
65
70
  }
@@ -36,7 +36,7 @@ import { WorkSpace } from "./workspace/WorkSpace";
36
36
 
37
37
  import ClipboardJS from "clipboard";
38
38
  import clsx from "clsx";
39
- import { useCallback, useEffect, useMemo, useRef, useState } from "react";
39
+ import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
40
40
  import {
41
41
  ClientAPI,
42
42
  EvalLogHeader,
@@ -72,7 +72,7 @@ interface AppProps {
72
72
  /**
73
73
  * Renders the Main Application
74
74
  */
75
- export const App: React.FC<AppProps> = ({
75
+ export const App: FC<AppProps> = ({
76
76
  api,
77
77
  applicationState,
78
78
  saveApplicationState,
@@ -1,14 +1,15 @@
1
1
  import { ANSIColor, ANSIOutput, ANSIOutputRun, ANSIStyle } from "ansi-output";
2
2
  import clsx from "clsx";
3
+ import { CSSProperties, FC } from "react";
3
4
  import "./AnsiDisplay.css";
4
5
 
5
6
  interface ANSIDisplayProps {
6
7
  output: string;
7
- style?: React.CSSProperties;
8
+ style?: CSSProperties;
8
9
  className?: string[] | string;
9
10
  }
10
11
 
11
- export const ANSIDisplay: React.FC<ANSIDisplayProps> = ({
12
+ export const ANSIDisplay: FC<ANSIDisplayProps> = ({
12
13
  output,
13
14
  style,
14
15
  className,
@@ -46,7 +47,7 @@ interface OutputRunProps {
46
47
  run: ANSIOutputRun;
47
48
  }
48
49
 
49
- const OutputRun: React.FC<OutputRunProps> = ({ run }) => {
50
+ const OutputRun: FC<OutputRunProps> = ({ run }) => {
50
51
  // Render.
51
52
  return <span style={computeCSSProperties(run)}>{run.text}</span>;
52
53
  };
@@ -1,4 +1,5 @@
1
1
  import clsx from "clsx";
2
+ import { FC, ReactNode } from "react";
2
3
  import { ApplicationIcons } from "../appearance/icons";
3
4
  import "./Card.css";
4
5
 
@@ -7,17 +8,17 @@ interface CardHeaderProps {
7
8
  icon?: string;
8
9
  label?: string;
9
10
  className?: string;
10
- children?: React.ReactNode;
11
+ children?: ReactNode;
11
12
  }
12
13
 
13
14
  interface CardBodyProps {
14
15
  id?: string;
15
- children?: React.ReactNode;
16
+ children?: ReactNode;
16
17
  }
17
18
 
18
19
  interface CardProps {
19
20
  id?: string;
20
- children?: React.ReactNode;
21
+ children?: ReactNode;
21
22
  }
22
23
 
23
24
  interface CardCollapsingHeaderProps {
@@ -25,10 +26,10 @@ interface CardCollapsingHeaderProps {
25
26
  icon: string;
26
27
  label: string;
27
28
  cardBodyId: string;
28
- children?: React.ReactNode;
29
+ children?: ReactNode;
29
30
  }
30
31
 
31
- export const CardHeader: React.FC<CardHeaderProps> = ({
32
+ export const CardHeader: FC<CardHeaderProps> = ({
32
33
  id,
33
34
  icon,
34
35
  label,
@@ -50,7 +51,7 @@ export const CardHeader: React.FC<CardHeaderProps> = ({
50
51
  );
51
52
  };
52
53
 
53
- export const CardBody: React.FC<CardBodyProps> = ({ id, children }) => {
54
+ export const CardBody: FC<CardBodyProps> = ({ id, children }) => {
54
55
  return (
55
56
  <div className={"card-body"} id={id || ""}>
56
57
  {children}
@@ -58,7 +59,7 @@ export const CardBody: React.FC<CardBodyProps> = ({ id, children }) => {
58
59
  );
59
60
  };
60
61
 
61
- export const Card: React.FC<CardProps> = ({ id, children }) => {
62
+ export const Card: FC<CardProps> = ({ id, children }) => {
62
63
  return (
63
64
  <div className={"card"} id={id}>
64
65
  {children}
@@ -66,7 +67,7 @@ export const Card: React.FC<CardProps> = ({ id, children }) => {
66
67
  );
67
68
  };
68
69
 
69
- export const CardCollapsingHeader: React.FC<CardCollapsingHeaderProps> = ({
70
+ export const CardCollapsingHeader: FC<CardCollapsingHeaderProps> = ({
70
71
  id,
71
72
  icon,
72
73
  label,
@@ -1,3 +1,4 @@
1
+ import { FC } from "react";
1
2
  import api from "../api/index";
2
3
  import "./DownloadButton.css";
3
4
 
@@ -7,7 +8,7 @@ interface DownloadButtonProps {
7
8
  fileContents: string | Blob | ArrayBuffer | ArrayBufferView;
8
9
  }
9
10
 
10
- export const DownloadButton: React.FC<DownloadButtonProps> = ({
11
+ export const DownloadButton: FC<DownloadButtonProps> = ({
11
12
  label,
12
13
  fileName,
13
14
  fileContents,
@@ -1,10 +1,10 @@
1
- import { ReactNode } from "react";
1
+ import { FC, ReactNode } from "react";
2
2
 
3
3
  interface EmptyPanelProps {
4
4
  children?: ReactNode;
5
5
  }
6
6
 
7
- export const EmptyPanel: React.FC<EmptyPanelProps> = ({ children }) => {
7
+ export const EmptyPanel: FC<EmptyPanelProps> = ({ children }) => {
8
8
  return (
9
9
  <div className={"empty-panel"}>
10
10
  <div className={"container"}>
@@ -1,3 +1,4 @@
1
+ import { FC } from "react";
1
2
  import { ApplicationIcons } from "../appearance/icons";
2
3
  import "./ErrorPanel.css";
3
4
 
@@ -12,7 +13,7 @@ interface ErrorPanelProps {
12
13
  error: DisplayError;
13
14
  }
14
15
 
15
- export const ErrorPanel: React.FC<ErrorPanelProps> = ({ title, error }) => {
16
+ export const ErrorPanel: FC<ErrorPanelProps> = ({ title, error }) => {
16
17
  const message = error.message;
17
18
  const stack = error.stack;
18
19
 
@@ -26,10 +27,10 @@ export const ErrorPanel: React.FC<ErrorPanelProps> = ({ title, error }) => {
26
27
  </div>
27
28
  <div className={"error-panel-body"}>
28
29
  <div>
29
- Error: {message || ""}$
30
+ Error: {message || ""}
30
31
  {stack && error.displayStack !== false && (
31
32
  <pre className={"error-panel-stack"}>
32
- <code>at ${stack}</code>
33
+ <code>at {stack}</code>
33
34
  </pre>
34
35
  )}
35
36
  </div>
@@ -1,5 +1,13 @@
1
1
  import clsx from "clsx";
2
- import { useCallback, useEffect, useRef, useState } from "react";
2
+ import {
3
+ CSSProperties,
4
+ FC,
5
+ ReactNode,
6
+ useCallback,
7
+ useEffect,
8
+ useRef,
9
+ useState,
10
+ } from "react";
3
11
  import { ApplicationIcons } from "../appearance/icons";
4
12
  import { useResizeObserver } from "../utils/dom";
5
13
  import "./ExpandablePanel.css";
@@ -8,11 +16,11 @@ interface ExpandablePanelProps {
8
16
  collapse: boolean;
9
17
  border?: boolean;
10
18
  lines?: number;
11
- children?: React.ReactNode;
19
+ children?: ReactNode;
12
20
  className?: string | string[];
13
21
  }
14
22
 
15
- export const ExpandablePanel: React.FC<ExpandablePanelProps> = ({
23
+ export const ExpandablePanel: FC<ExpandablePanelProps> = ({
16
24
  collapse,
17
25
  border,
18
26
  lines = 15,
@@ -83,10 +91,10 @@ interface MoreToggleProps {
83
91
  collapsed: boolean;
84
92
  border: boolean;
85
93
  setCollapsed: (collapsed: boolean) => void;
86
- style?: React.CSSProperties;
94
+ style?: CSSProperties;
87
95
  }
88
96
 
89
- const MoreToggle: React.FC<MoreToggleProps> = ({
97
+ const MoreToggle: FC<MoreToggleProps> = ({
90
98
  collapsed,
91
99
  border,
92
100
  setCollapsed,
@@ -1,4 +1,4 @@
1
- import { useCallback, useEffect, useRef } from "react";
1
+ import { FC, KeyboardEvent, useCallback, useEffect, useRef } from "react";
2
2
  import { ApplicationIcons } from "../appearance/icons";
3
3
  import "./FindBand.css";
4
4
 
@@ -6,7 +6,7 @@ interface FindBandProps {
6
6
  hideBand: () => void;
7
7
  }
8
8
 
9
- export const FindBand: React.FC<FindBandProps> = ({ hideBand }) => {
9
+ export const FindBand: FC<FindBandProps> = ({ hideBand }) => {
10
10
  const searchBoxRef = useRef<HTMLInputElement>(null);
11
11
 
12
12
  useEffect(() => {
@@ -82,7 +82,7 @@ export const FindBand: React.FC<FindBandProps> = ({ hideBand }) => {
82
82
  );
83
83
 
84
84
  const handleKeyDown = useCallback(
85
- (e: React.KeyboardEvent<HTMLInputElement>) => {
85
+ (e: KeyboardEvent<HTMLInputElement>) => {
86
86
  if (e.key === "Escape") {
87
87
  hideBand();
88
88
  } else if (e.key === "Enter") {
@@ -1,4 +1,4 @@
1
- import { useEffect } from "react";
1
+ import { FC, useEffect } from "react";
2
2
  import { formatDateTime, formatTime } from "../utils/format";
3
3
  import { AsciinemaPlayer } from "./AsciinemaPlayer";
4
4
  import "./HumanBaselineView.css";
@@ -24,7 +24,7 @@ interface HumanBaselineViewProps {
24
24
  /**
25
25
  * Renders the HumanBaselineView component.
26
26
  */
27
- export const HumanBaselineView: React.FC<HumanBaselineViewProps> = ({
27
+ export const HumanBaselineView: FC<HumanBaselineViewProps> = ({
28
28
  started,
29
29
  runtime,
30
30
  answer,
@@ -92,7 +92,7 @@ export const HumanBaselineView: React.FC<HumanBaselineViewProps> = ({
92
92
  answer?: string;
93
93
  }
94
94
 
95
- const StatusMessage: React.FC<StatusMessageProps> = ({
95
+ const StatusMessage: FC<StatusMessageProps> = ({
96
96
  completed,
97
97
  running,
98
98
  answer,
@@ -1,15 +1,16 @@
1
1
  import clsx from "clsx";
2
+ import { CSSProperties, FC, ReactNode } from "react";
2
3
 
3
4
  interface LabeledValueProps {
4
5
  label: string;
5
- style?: React.CSSProperties;
6
- valueStyle?: React.CSSProperties;
6
+ style?: CSSProperties;
7
+ valueStyle?: CSSProperties;
7
8
  layout?: "column" | "row";
8
- children: React.ReactNode;
9
+ children: ReactNode;
9
10
  className?: string | string[];
10
11
  }
11
12
 
12
- export const LabeledValue: React.FC<LabeledValueProps> = ({
13
+ export const LabeledValue: FC<LabeledValueProps> = ({
13
14
  layout = "column",
14
15
  style,
15
16
  label,
@@ -1,7 +1,15 @@
1
1
  import clsx from "clsx";
2
2
  import { ProgressBar } from "./ProgressBar";
3
3
 
4
- import { ReactNode, UIEvent, useCallback, useEffect, useRef } from "react";
4
+ import {
5
+ FC,
6
+ ReactNode,
7
+ RefObject,
8
+ UIEvent,
9
+ useCallback,
10
+ useEffect,
11
+ useRef,
12
+ } from "react";
5
13
  import styles from "./LargeModal.module.css";
6
14
 
7
15
  export interface ModalTool {
@@ -22,17 +30,17 @@ interface LargeModalProps {
22
30
  detail: string;
23
31
  detailTools?: ModalTools;
24
32
  showProgress: boolean;
25
- footer?: React.ReactNode;
33
+ footer?: ReactNode;
26
34
  visible: boolean;
27
35
  onkeyup: (e: any) => void;
28
36
  onHide: () => void;
29
- scrollRef: React.RefObject<HTMLDivElement | null>;
30
- initialScrollPositionRef: React.RefObject<number>;
37
+ scrollRef: RefObject<HTMLDivElement | null>;
38
+ initialScrollPositionRef: RefObject<number>;
31
39
  setInitialScrollPosition: (position: number) => void;
32
40
  children: ReactNode;
33
41
  }
34
42
 
35
- export const LargeModal: React.FC<LargeModalProps> = ({
43
+ export const LargeModal: FC<LargeModalProps> = ({
36
44
  id,
37
45
  title,
38
46
  detail,
@@ -56,7 +64,9 @@ export const LargeModal: React.FC<LargeModalProps> = ({
56
64
 
57
65
  // Support restoring the scroll position
58
66
  // but only do this for the first time that the children are set
59
- scrollRef = scrollRef || useRef(null);
67
+ const modalRef = useRef(null);
68
+ scrollRef = scrollRef || modalRef;
69
+
60
70
  useEffect(() => {
61
71
  if (scrollRef.current) {
62
72
  setTimeout(() => {
@@ -153,7 +163,7 @@ interface HtmlEntityProps {
153
163
  html: string;
154
164
  }
155
165
 
156
- const HtmlEntity: React.FC<HtmlEntityProps> = ({ html }) => (
166
+ const HtmlEntity: FC<HtmlEntityProps> = ({ html }) => (
157
167
  <span dangerouslySetInnerHTML={{ __html: html }} />
158
168
  );
159
169
 
@@ -164,12 +174,7 @@ interface TitleToolProps {
164
174
  onClick: () => void;
165
175
  }
166
176
 
167
- const TitleTool: React.FC<TitleToolProps> = ({
168
- label,
169
- icon,
170
- enabled,
171
- onClick,
172
- }) => {
177
+ const TitleTool: FC<TitleToolProps> = ({ label, icon, enabled, onClick }) => {
173
178
  return (
174
179
  <button
175
180
  type="button"
@@ -1,9 +1,9 @@
1
- .carousel-thumbs {
1
+ .carouselThumbs {
2
2
  display: grid;
3
3
  grid-template-columns: auto auto auto auto;
4
4
  }
5
5
 
6
- .carousel-thumb {
6
+ .carouselThumb {
7
7
  background: black;
8
8
  color: white;
9
9
  padding: 4em 0;
@@ -13,11 +13,11 @@
13
13
  text-align: center;
14
14
  }
15
15
 
16
- .carousel-play-icon {
16
+ .carouselPlayIcon {
17
17
  font-size: 4em;
18
18
  }
19
19
 
20
- .lightbox-overlay {
20
+ .lightboxOverlay {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,25 +30,25 @@
30
30
  z-index: 9998;
31
31
  }
32
32
 
33
- .lightbox-content.open,
34
- .lightbox-overlay.open {
33
+ .lightboxContent.open,
34
+ .lightboxOverlay.open {
35
35
  opacity: 1;
36
36
  visibility: visible;
37
37
  }
38
38
 
39
- .lightbox-content.closed,
40
- .lightbox-overlay.closed {
39
+ .lightboxContent.closed,
40
+ .lightboxOverlay.closed {
41
41
  opacity: 0;
42
42
  visibility: hidden;
43
43
  }
44
44
 
45
- .lightbox-button-close-wrapper {
45
+ .lightboxButtonCloseWrapper {
46
46
  position: absolute;
47
47
  top: 10px;
48
48
  right: 10px;
49
49
  }
50
50
 
51
- .lightbox-button-close {
51
+ .lightboxButtonClose {
52
52
  border: none;
53
53
  background: none;
54
54
  color: #fff;
@@ -60,7 +60,7 @@
60
60
  z-index: 10000;
61
61
  }
62
62
 
63
- .lightbox-preview-button {
63
+ .lightboxPreviewButton {
64
64
  position: absolute;
65
65
  top: 50%;
66
66
  transform: translateY(-50%);
@@ -73,23 +73,27 @@
73
73
  z-index: 9999;
74
74
  }
75
75
 
76
- .lightbox-preview-button.next {
76
+ .lightboxPreviewButton.next {
77
77
  left: 10px;
78
78
  }
79
79
 
80
- .lightbox-preview-button.prev {
80
+ .lightboxPreviewButton.prev {
81
81
  right: 10px;
82
82
  }
83
83
 
84
- .lightbox-content {
85
- max-width: 90%;
86
- max-height: 90%;
84
+ .lightboxContent {
85
+ max-width: 90vw !important;
86
+ max-height: 90vh !important;
87
87
  display: flex;
88
- align-items: center;
89
- justify-content: center;
90
88
  position: relative;
91
89
  transition:
92
90
  opacity 0.3s ease,
93
91
  visibility 0.3s ease;
94
92
  z-index: 9999;
93
+ overflow: hidden;
94
+ }
95
+
96
+ .lightboxContent > * {
97
+ max-height: 90vh !important;
98
+ max-width: 90vw !important;
95
99
  }
@@ -1,11 +1,11 @@
1
1
  import clsx from "clsx";
2
- import { useCallback, useEffect, useState } from "react";
2
+ import { FC, ReactNode, useCallback, useEffect, useState } from "react";
3
3
  import { ApplicationIcons } from "../appearance/icons";
4
- import "./LightboxCarousel.css";
4
+ import styles from "./LightboxCarousel.module.css";
5
5
 
6
6
  interface Slide {
7
7
  label: string;
8
- render: () => React.ReactNode;
8
+ render: () => ReactNode;
9
9
  }
10
10
 
11
11
  interface LightboxCarouselProps {
@@ -15,24 +15,25 @@ interface LightboxCarouselProps {
15
15
  /**
16
16
  * LightboxCarousel component provides a carousel with lightbox functionality.
17
17
  */
18
- export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
19
- slides,
20
- }) => {
18
+ export const LightboxCarousel: FC<LightboxCarouselProps> = ({ slides }) => {
21
19
  const [isOpen, setIsOpen] = useState(false);
22
20
  const [showOverlay, setShowOverlay] = useState(false);
23
21
  const [currentIndex, setCurrentIndex] = useState(0);
24
22
 
25
- const openLightbox = (index: number) => {
26
- setCurrentIndex(index);
27
- setShowOverlay(true);
23
+ const openLightbox = useCallback(
24
+ (index: number) => {
25
+ setCurrentIndex(index);
26
+ setShowOverlay(true);
28
27
 
29
- // Slight delay before setting isOpen so the fade-in starts from opacity: 0
30
- setTimeout(() => setIsOpen(true), 10);
31
- };
28
+ // Slight delay before setting isOpen so the fade-in starts from opacity: 0
29
+ setTimeout(() => setIsOpen(true), 10);
30
+ },
31
+ [setCurrentIndex, setShowOverlay],
32
+ );
32
33
 
33
- const closeLightbox = () => {
34
+ const closeLightbox = useCallback(() => {
34
35
  setIsOpen(false);
35
- };
36
+ }, [setIsOpen]);
36
37
 
37
38
  // Remove the overlay from the DOM after fade-out completes
38
39
  useEffect(() => {
@@ -42,17 +43,17 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
42
43
  }, 300); // match your transition duration
43
44
  return () => clearTimeout(timer);
44
45
  }
45
- }, [isOpen, showOverlay]);
46
+ }, [isOpen, showOverlay, setShowOverlay]);
46
47
 
47
48
  const showNext = useCallback(() => {
48
49
  setCurrentIndex((prev) => {
49
50
  return (prev + 1) % slides.length;
50
51
  });
51
- }, [slides]);
52
+ }, [slides, setCurrentIndex]);
52
53
 
53
54
  const showPrev = useCallback(() => {
54
55
  setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
55
- }, [slides]);
56
+ }, [slides, setCurrentIndex]);
56
57
 
57
58
  // Keyboard Navigation
58
59
  useEffect(() => {
@@ -73,19 +74,22 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
73
74
  }, [isOpen, showNext, showPrev]);
74
75
 
75
76
  return (
76
- <div className="lightbox-carousel-container">
77
- <div className="carousel-thumbs">
77
+ <div className={clsx("lightbox-carousel-container")}>
78
+ <div className={clsx(styles.carouselThumbs)}>
78
79
  {slides.map((slide, index) => {
79
80
  return (
80
81
  <div
81
82
  key={index}
82
- className="carousel-thumb"
83
+ className={clsx(styles.carouselThumb)}
83
84
  onClick={() => openLightbox(index)}
84
85
  >
85
86
  <div>{slide.label}</div>
86
87
  <div>
87
88
  <i
88
- className={clsx(ApplicationIcons.play, "carousel-play-icon")}
89
+ className={clsx(
90
+ ApplicationIcons.play,
91
+ styles.carouselPlayIcon,
92
+ )}
89
93
  />
90
94
  </div>
91
95
  </div>
@@ -93,15 +97,20 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
93
97
  })}
94
98
  </div>
95
99
  {showOverlay && (
96
- <div className={clsx("lightbox-overlay", isOpen ? "open" : "closed")}>
97
- <div className={"lightbox-button-close-wrapper"}>
98
- <button className={"lightbox-button-close"} onClick={closeLightbox}>
100
+ <div
101
+ className={clsx(styles.lightboxOverlay, isOpen ? "open" : "closed")}
102
+ >
103
+ <div className={clsx(styles.lightboxButtonCloseWrapper)}>
104
+ <button
105
+ className={styles.lightboxButtonClose}
106
+ onClick={closeLightbox}
107
+ >
99
108
  <i className={ApplicationIcons.close}></i>
100
109
  </button>
101
110
  </div>
102
111
  {slides.length > 1 ? (
103
112
  <button
104
- className={"lightbox-preview-button prev"}
113
+ className={clsx(styles.lightboxPreviewButton, "prev")}
105
114
  onClick={showPrev}
106
115
  >
107
116
  <i className={ApplicationIcons.previous}></i>
@@ -111,7 +120,7 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
111
120
  )}
112
121
  {slides.length > 1 ? (
113
122
  <button
114
- className={"lightbox-preview-button next"}
123
+ className={clsx(styles.lightboxPreviewButton, "next")}
115
124
  onClick={showNext}
116
125
  >
117
126
  <i className={ApplicationIcons.next} />
@@ -121,7 +130,7 @@ export const LightboxCarousel: React.FC<LightboxCarouselProps> = ({
121
130
  )}
122
131
  <div
123
132
  key={`carousel-slide-${currentIndex}`}
124
- className={clsx("lightbox-content", isOpen ? "open" : "closed")}
133
+ className={clsx(styles.lightboxContent, isOpen ? "open" : "closed")}
125
134
  >
126
135
  {slides[currentIndex].render()}
127
136
  </div>
@@ -1,5 +1,6 @@
1
1
  import { clsx } from "clsx";
2
2
 
3
+ import { FC } from "react";
3
4
  import { ApplicationIcons } from "../appearance/icons";
4
5
  import "./MessageBand.css";
5
6
 
@@ -10,7 +11,7 @@ interface MessageBandProps {
10
11
  type: "info" | "warning" | "error";
11
12
  }
12
13
 
13
- export const MessageBand: React.FC<MessageBandProps> = ({
14
+ export const MessageBand: FC<MessageBandProps> = ({
14
15
  message,
15
16
  hidden,
16
17
  setHidden,