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
@@ -1,5 +1,4 @@
1
1
  import React, { RefObject, useCallback, useState } from "react";
2
- import { VirtualList } from "../../components/VirtualList";
3
2
  import { Events } from "../../types/log";
4
3
  import { ApprovalEventView } from "./ApprovalEventView";
5
4
  import { ErrorEventView } from "./ErrorEventView";
@@ -17,6 +16,7 @@ import { ToolEventView } from "./ToolEventView";
17
16
  import { EventNode, EventType, TranscriptEventState } from "./types";
18
17
 
19
18
  import clsx from "clsx";
19
+ import { Virtuoso } from "react-virtuoso";
20
20
  import { SandboxEventView } from "./SandboxEventView";
21
21
  import styles from "./TranscriptView.module.css";
22
22
 
@@ -84,7 +84,7 @@ export const TranscriptVirtualList: React.FC<TranscriptVirtualListProps> = (
84
84
  (state: TranscriptEventState) => {
85
85
  setTranscriptState(state);
86
86
  },
87
- [transcriptState, setTranscriptState],
87
+ [setTranscriptState],
88
88
  );
89
89
 
90
90
  return (
@@ -116,9 +116,11 @@ export const TranscriptVirtualListComponent: React.FC<
116
116
  (eventId: string, state: TranscriptEventState) => {
117
117
  setTranscriptState({ ...transcriptState, [eventId]: state });
118
118
  },
119
- [setTranscriptState],
119
+ [transcriptState, setTranscriptState],
120
120
  );
121
121
 
122
+ const [followOutput, setFollowOutput] = useState(false);
123
+
122
124
  const renderRow = (item: EventNode, index: number) => {
123
125
  const bgClass = item.depth % 2 == 0 ? styles.darkenedBg : styles.normalBg;
124
126
  const paddingClass = index === 0 ? styles.first : undefined;
@@ -140,12 +142,24 @@ export const TranscriptVirtualListComponent: React.FC<
140
142
  };
141
143
 
142
144
  return (
143
- <VirtualList
145
+ <Virtuoso
146
+ customScrollParent={scrollRef?.current ? scrollRef.current : undefined}
147
+ style={{ height: "100%", width: "100%" }}
144
148
  data={eventNodes}
145
- tabIndex={0}
146
- renderRow={renderRow}
147
- scrollRef={scrollRef}
148
- className={styles.nodes}
149
+ itemContent={(index: number, data: EventNode) => {
150
+ return renderRow(data, index);
151
+ }}
152
+ increaseViewportBy={{ top: 1000, bottom: 1000 }}
153
+ overscan={{
154
+ main: 10,
155
+ reverse: 10,
156
+ }}
157
+ followOutput={followOutput}
158
+ atBottomStateChange={(atBottom: boolean) => {
159
+ setFollowOutput(atBottom);
160
+ }}
161
+ skipAnimationFrameInResizeObserver={true}
162
+ className={clsx("transcript")}
149
163
  />
150
164
  );
151
165
  };
@@ -165,6 +179,13 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
165
179
  setTranscriptState,
166
180
  eventNodes,
167
181
  }) => {
182
+ const setEventState = useCallback(
183
+ (state: TranscriptEventState, eventId: string) => {
184
+ setTranscriptState({ ...transcriptState, [eventId]: state });
185
+ },
186
+ [setTranscriptState, transcriptState],
187
+ );
188
+
168
189
  const rows = eventNodes.map((eventNode, index) => {
169
190
  const clz = [styles.eventNode];
170
191
  if (eventNode.depth % 2 == 0) {
@@ -175,12 +196,6 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
175
196
  }
176
197
 
177
198
  const eventId = `${id}-event${index}`;
178
- const setEventState = useCallback(
179
- (state: TranscriptEventState) => {
180
- setTranscriptState({ ...transcriptState, [eventId]: state });
181
- },
182
- [setTranscriptState, transcriptState],
183
- );
184
199
 
185
200
  const row = (
186
201
  <div
@@ -195,7 +210,9 @@ export const TranscriptComponent: React.FC<TranscriptComponentProps> = ({
195
210
  node={eventNode}
196
211
  className={clsx(clz)}
197
212
  eventState={transcriptState[eventId] || {}}
198
- setEventState={setEventState}
213
+ setEventState={(state: TranscriptEventState) => {
214
+ setEventState(state, eventId);
215
+ }}
199
216
  />
200
217
  </div>
201
218
  );
@@ -417,6 +434,7 @@ const fixupEventStream = (events: Events) => {
417
434
  type: null,
418
435
  name: "sample_init",
419
436
  pending: false,
437
+ working_start: 0,
420
438
  });
421
439
 
422
440
  fixedUp.splice(initEventIndex + 2, 0, {
@@ -426,6 +444,7 @@ const fixupEventStream = (events: Events) => {
426
444
  type: null,
427
445
  name: "sample_init",
428
446
  pending: false,
447
+ working_start: 0,
429
448
  });
430
449
  }
431
450
 
@@ -1,5 +1,6 @@
1
1
  import clsx from "clsx";
2
2
 
3
+ import { FC } from "react";
3
4
  import styles from "./EventNav.module.css";
4
5
 
5
6
  interface EventNavProps {
@@ -11,7 +12,7 @@ interface EventNavProps {
11
12
  /**
12
13
  * Component to render a single navigation item.
13
14
  */
14
- export const EventNav: React.FC<EventNavProps> = ({
15
+ export const EventNav: FC<EventNavProps> = ({
15
16
  target,
16
17
  title,
17
18
  selectedNav,
@@ -1,6 +1,7 @@
1
1
  import clsx from "clsx";
2
2
  import { EventNav } from "./EventNav";
3
3
 
4
+ import { FC } from "react";
4
5
  import styles from "./EventNavs.module.css";
5
6
 
6
7
  interface EventNavsProps {
@@ -12,7 +13,7 @@ interface EventNavsProps {
12
13
  /**
13
14
  * Component to render navigation items.
14
15
  */
15
- export const EventNavs: React.FC<EventNavsProps> = ({
16
+ export const EventNavs: FC<EventNavsProps> = ({
16
17
  navs,
17
18
  selectedNav,
18
19
  setSelectedNav,
@@ -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 styles from "./EventRow.module.css";
4
5
 
@@ -6,12 +7,12 @@ interface EventRowProps {
6
7
  title: string;
7
8
  icon: string;
8
9
  className?: string | string[];
9
- children?: React.ReactNode | React.ReactNode[];
10
+ children?: ReactNode | ReactNode[];
10
11
  }
11
12
  /**
12
13
  * Renders the EventRow component.
13
14
  */
14
- export const EventRow: React.FC<EventRowProps> = ({
15
+ export const EventRow: FC<EventRowProps> = ({
15
16
  title,
16
17
  icon,
17
18
  className,
@@ -1,5 +1,5 @@
1
1
  import clsx from "clsx";
2
- import { ReactNode } from "react";
2
+ import { FC, ReactNode } from "react";
3
3
  import styles from "./EventSection.module.css";
4
4
 
5
5
  interface EventSectionProps {
@@ -11,7 +11,7 @@ interface EventSectionProps {
11
11
  /**
12
12
  * Renders the Event Section component.
13
13
  */
14
- export const EventSection: React.FC<EventSectionProps> = ({
14
+ export const EventSection: FC<EventSectionProps> = ({
15
15
  title,
16
16
  children,
17
17
  className,
@@ -0,0 +1,28 @@
1
+ .wrapper {
2
+ display: grid;
3
+ grid-template-columns: 0 auto auto;
4
+ column-gap: 1.5em;
5
+ row-gap: 0.2em;
6
+ }
7
+
8
+ .col2 {
9
+ grid-column: 2;
10
+ }
11
+
12
+ .col1_3 {
13
+ grid-column: 1/3;
14
+ }
15
+
16
+ .col3 {
17
+ grid-column: 3;
18
+ }
19
+
20
+ .separator {
21
+ grid-column: -1/1;
22
+ height: 1px;
23
+ background-color: var(--bs-light-border-subtle);
24
+ }
25
+
26
+ .topMargin {
27
+ margin-top: 1em;
28
+ }
@@ -0,0 +1,115 @@
1
+ import clsx from "clsx";
2
+ import { FC, Fragment } from "react";
3
+ import { formatDateTime, formatTime } from "../../../utils/format";
4
+ import styles from "./EventTimingPanel.module.css";
5
+
6
+ interface EventTimingPanelProps {
7
+ timestamp: string;
8
+ completed?: string | null;
9
+ working_start?: number | null;
10
+ working_time?: number | null;
11
+ }
12
+
13
+ interface EventTimingPanelRow {
14
+ label: string | "---";
15
+ value?: string;
16
+ secondary?: boolean;
17
+ bordered?: boolean;
18
+ topMargin?: boolean;
19
+ }
20
+
21
+ /**
22
+ * Renders the ModelUsagePanel component.
23
+ */
24
+ export const EventTimingPanel: FC<EventTimingPanelProps> = ({
25
+ timestamp,
26
+ completed,
27
+ working_start,
28
+ working_time,
29
+ }) => {
30
+ const rows: EventTimingPanelRow[] = [
31
+ {
32
+ label: "Clock Time",
33
+ value: undefined,
34
+ secondary: false,
35
+ },
36
+ {
37
+ label: "---",
38
+ value: undefined,
39
+ secondary: false,
40
+ },
41
+ ];
42
+
43
+ if (!completed) {
44
+ rows.push({
45
+ label: "Timestamp",
46
+ value: formatDateTime(new Date(timestamp)),
47
+ });
48
+ } else {
49
+ rows.push({ label: "Start", value: formatDateTime(new Date(timestamp)) });
50
+ rows.push({ label: "End", value: formatDateTime(new Date(completed)) });
51
+ }
52
+
53
+ if (working_start || working_time) {
54
+ rows.push({
55
+ label: "Working Time",
56
+ value: undefined,
57
+ secondary: false,
58
+ topMargin: true,
59
+ });
60
+ rows.push({
61
+ label: "---",
62
+ value: undefined,
63
+ secondary: false,
64
+ });
65
+ if (working_start) {
66
+ rows.push({
67
+ label: "Start",
68
+ value: formatTime(working_start),
69
+ });
70
+ }
71
+ if (working_time) {
72
+ rows.push({
73
+ label: "Duration",
74
+ value: formatTime(working_time),
75
+ });
76
+ }
77
+ if (working_start && working_time) {
78
+ rows.push({
79
+ label: "End",
80
+ value: formatTime(
81
+ Math.round(working_start * 10) / 10 +
82
+ Math.round(working_time * 10) / 10,
83
+ ),
84
+ });
85
+ }
86
+ }
87
+
88
+ return (
89
+ <div className={clsx("text-size-small", styles.wrapper)}>
90
+ {rows.map((row, idx) => {
91
+ if (row.label === "---") {
92
+ return (
93
+ <div key={`$usage-sep-${idx}`} className={styles.separator}></div>
94
+ );
95
+ } else {
96
+ return (
97
+ <Fragment key={`$usage-row-${idx}`}>
98
+ <div
99
+ className={clsx(
100
+ "text-style-label",
101
+ "text-style-secondary",
102
+ row.secondary ? styles.col2 : styles.col1_3,
103
+ row.topMargin ? styles.topMargin : undefined,
104
+ )}
105
+ >
106
+ {row.label}
107
+ </div>
108
+ <div className={styles.col3}>{row.value ? row.value : ""}</div>
109
+ </Fragment>
110
+ );
111
+ }
112
+ })}
113
+ </div>
114
+ );
115
+ };
@@ -0,0 +1,29 @@
1
+ import {
2
+ formatDateTime,
3
+ formatNumber,
4
+ formatTime,
5
+ } from "../../../utils/format";
6
+
7
+ export const formatTiming = (timestamp: string, working_start?: number) => {
8
+ if (working_start) {
9
+ return `${formatDateTime(new Date(timestamp))}\n@ working time: ${formatTime(working_start)}`;
10
+ } else {
11
+ return formatDateTime(new Date(timestamp));
12
+ }
13
+ };
14
+
15
+ export const formatTitle = (
16
+ title: string,
17
+ total_tokens?: number,
18
+ working_start?: number | null,
19
+ ) => {
20
+ const subItems = [];
21
+ if (total_tokens) {
22
+ subItems.push(`${formatNumber(total_tokens)} tokens`);
23
+ }
24
+ if (working_start) {
25
+ subItems.push(`${formatTime(working_start)}`);
26
+ }
27
+ const subtitle = subItems.length > 0 ? ` (${subItems.join(", ")})` : "";
28
+ return `${title}${subtitle}`;
29
+ };
@@ -1,6 +1,7 @@
1
1
  import clsx from "clsx";
2
2
  import { diff } from "jsondiffpatch";
3
3
  import { format } from "jsondiffpatch/formatters/html";
4
+ import { FC } from "react";
4
5
 
5
6
  interface StateDiffViewProps {
6
7
  before: Object;
@@ -11,7 +12,7 @@ interface StateDiffViewProps {
11
12
  /**
12
13
  * Renders a view displaying a list of state changes.
13
14
  */
14
- export const StateDiffView: React.FC<StateDiffViewProps> = ({
15
+ export const StateDiffView: FC<StateDiffViewProps> = ({
15
16
  before,
16
17
  after,
17
18
  className,
@@ -1,5 +1,5 @@
1
1
  import clsx from "clsx";
2
- import { Fragment, JSX, ReactNode } from "react";
2
+ import { FC, Fragment, JSX, ReactNode } from "react";
3
3
  import {
4
4
  HumanBaselineView,
5
5
  SessionLog,
@@ -246,7 +246,7 @@ interface ToolsProps {
246
246
  /**
247
247
  * Renders a list of tool components based on the provided tool definitions.
248
248
  */
249
- export const Tools: React.FC<ToolsProps> = ({ toolDefinitions }) => {
249
+ export const Tools: FC<ToolsProps> = ({ toolDefinitions }) => {
250
250
  return toolDefinitions.map((toolDefinition, idx) => {
251
251
  const toolName = toolDefinition.name;
252
252
  const toolArgs = toolDefinition.parameters?.properties
@@ -270,7 +270,7 @@ interface ToolProps {
270
270
  /**
271
271
  * Renders a single tool component.
272
272
  */
273
- export const Tool: React.FC<ToolProps> = ({ toolName, toolArgs }) => {
273
+ export const Tool: FC<ToolProps> = ({ toolName, toolArgs }) => {
274
274
  const functionCall =
275
275
  toolArgs && toolArgs.length > 0
276
276
  ? `${toolName}(${toolArgs.join(", ")})`
@@ -17,6 +17,7 @@ import {
17
17
  StoreSpecificRenderableTypes,
18
18
  } from "./StateEventRenderers";
19
19
 
20
+ import { useMemo, FC } from "react";
20
21
  import styles from "./StateEventView.module.css";
21
22
 
22
23
  interface StateEventViewProps {
@@ -31,7 +32,7 @@ interface StateEventViewProps {
31
32
  /**
32
33
  * Renders the StateEventView component.
33
34
  */
34
- export const StateEventView: React.FC<StateEventViewProps> = ({
35
+ export const StateEventView: FC<StateEventViewProps> = ({
35
36
  id,
36
37
  event,
37
38
  eventState,
@@ -39,19 +40,21 @@ export const StateEventView: React.FC<StateEventViewProps> = ({
39
40
  isStore = false,
40
41
  className,
41
42
  }) => {
42
- const summary = summarizeChanges(event.changes);
43
+ const summary = useMemo(() => {
44
+ return summarizeChanges(event.changes);
45
+ }, [event.changes]);
43
46
 
44
47
  // Synthesize objects for comparison
45
- const [before, after] = synthesizeComparable(event.changes);
48
+ const [before, after] = useMemo(() => {
49
+ return synthesizeComparable(event.changes);
50
+ }, [event.changes]);
46
51
 
47
52
  // This clone is important since the state is used by react as potential values that are rendered
48
53
  // and as a result may be decorated with additional properties, etc..., resulting in DOM elements
49
54
  // appearing attached to state.
50
- const changePreview = generatePreview(
51
- event.changes,
52
- structuredClone(after),
53
- isStore,
54
- );
55
+ const changePreview = useMemo(() => {
56
+ return generatePreview(event.changes, structuredClone(after), isStore);
57
+ }, [event.changes, after, isStore]);
55
58
  // Compute the title
56
59
  const title = event.event === "state" ? "State Updated" : "Store Updated";
57
60