elasticdash-sdk 0.2.0

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 (349) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +775 -0
  3. package/dist/browser-ui.d.ts +43 -0
  4. package/dist/browser-ui.d.ts.map +1 -0
  5. package/dist/browser-ui.js +246 -0
  6. package/dist/browser-ui.js.map +1 -0
  7. package/dist/capture/event.d.ts +33 -0
  8. package/dist/capture/event.d.ts.map +1 -0
  9. package/dist/capture/event.js +2 -0
  10. package/dist/capture/event.js.map +1 -0
  11. package/dist/capture/index.d.ts +4 -0
  12. package/dist/capture/index.d.ts.map +1 -0
  13. package/dist/capture/index.js +4 -0
  14. package/dist/capture/index.js.map +1 -0
  15. package/dist/capture/recorder.d.ts +24 -0
  16. package/dist/capture/recorder.d.ts.map +1 -0
  17. package/dist/capture/recorder.js +46 -0
  18. package/dist/capture/recorder.js.map +1 -0
  19. package/dist/capture/replay.d.ts +20 -0
  20. package/dist/capture/replay.d.ts.map +1 -0
  21. package/dist/capture/replay.js +47 -0
  22. package/dist/capture/replay.js.map +1 -0
  23. package/dist/ci/api-client.d.ts +38 -0
  24. package/dist/ci/api-client.d.ts.map +1 -0
  25. package/dist/ci/api-client.js +96 -0
  26. package/dist/ci/api-client.js.map +1 -0
  27. package/dist/ci/benchmark.d.ts +33 -0
  28. package/dist/ci/benchmark.d.ts.map +1 -0
  29. package/dist/ci/benchmark.js +213 -0
  30. package/dist/ci/benchmark.js.map +1 -0
  31. package/dist/ci/ed-runner.d.ts +48 -0
  32. package/dist/ci/ed-runner.d.ts.map +1 -0
  33. package/dist/ci/ed-runner.js +260 -0
  34. package/dist/ci/ed-runner.js.map +1 -0
  35. package/dist/ci/executor.d.ts +13 -0
  36. package/dist/ci/executor.d.ts.map +1 -0
  37. package/dist/ci/executor.js +542 -0
  38. package/dist/ci/executor.js.map +1 -0
  39. package/dist/ci/git-info.d.ts +17 -0
  40. package/dist/ci/git-info.d.ts.map +1 -0
  41. package/dist/ci/git-info.js +102 -0
  42. package/dist/ci/git-info.js.map +1 -0
  43. package/dist/ci/index.d.ts +6 -0
  44. package/dist/ci/index.d.ts.map +1 -0
  45. package/dist/ci/index.js +4 -0
  46. package/dist/ci/index.js.map +1 -0
  47. package/dist/ci/measurement.d.ts +9 -0
  48. package/dist/ci/measurement.d.ts.map +1 -0
  49. package/dist/ci/measurement.js +15 -0
  50. package/dist/ci/measurement.js.map +1 -0
  51. package/dist/ci/replay.d.ts +31 -0
  52. package/dist/ci/replay.d.ts.map +1 -0
  53. package/dist/ci/replay.js +96 -0
  54. package/dist/ci/replay.js.map +1 -0
  55. package/dist/ci/reporters/default.d.ts +8 -0
  56. package/dist/ci/reporters/default.d.ts.map +1 -0
  57. package/dist/ci/reporters/default.js +46 -0
  58. package/dist/ci/reporters/default.js.map +1 -0
  59. package/dist/ci/reporters/index.d.ts +8 -0
  60. package/dist/ci/reporters/index.d.ts.map +1 -0
  61. package/dist/ci/reporters/index.js +14 -0
  62. package/dist/ci/reporters/index.js.map +1 -0
  63. package/dist/ci/reporters/json.d.ts +8 -0
  64. package/dist/ci/reporters/json.d.ts.map +1 -0
  65. package/dist/ci/reporters/json.js +14 -0
  66. package/dist/ci/reporters/json.js.map +1 -0
  67. package/dist/ci/reporters/junit.d.ts +8 -0
  68. package/dist/ci/reporters/junit.d.ts.map +1 -0
  69. package/dist/ci/reporters/junit.js +48 -0
  70. package/dist/ci/reporters/junit.js.map +1 -0
  71. package/dist/ci/runner.d.ts +3 -0
  72. package/dist/ci/runner.d.ts.map +1 -0
  73. package/dist/ci/runner.js +187 -0
  74. package/dist/ci/runner.js.map +1 -0
  75. package/dist/ci/test-discovery.d.ts +5 -0
  76. package/dist/ci/test-discovery.d.ts.map +1 -0
  77. package/dist/ci/test-discovery.js +11 -0
  78. package/dist/ci/test-discovery.js.map +1 -0
  79. package/dist/ci/test-loader.d.ts +19 -0
  80. package/dist/ci/test-loader.d.ts.map +1 -0
  81. package/dist/ci/test-loader.js +149 -0
  82. package/dist/ci/test-loader.js.map +1 -0
  83. package/dist/ci/test-registry.d.ts +42 -0
  84. package/dist/ci/test-registry.d.ts.map +1 -0
  85. package/dist/ci/test-registry.js +18 -0
  86. package/dist/ci/test-registry.js.map +1 -0
  87. package/dist/ci/trace-schema.d.ts +30 -0
  88. package/dist/ci/trace-schema.d.ts.map +1 -0
  89. package/dist/ci/trace-schema.js +66 -0
  90. package/dist/ci/trace-schema.js.map +1 -0
  91. package/dist/ci/trace-writer.d.ts +16 -0
  92. package/dist/ci/trace-writer.d.ts.map +1 -0
  93. package/dist/ci/trace-writer.js +108 -0
  94. package/dist/ci/trace-writer.js.map +1 -0
  95. package/dist/ci/types.d.ts +108 -0
  96. package/dist/ci/types.d.ts.map +1 -0
  97. package/dist/ci/types.js +3 -0
  98. package/dist/ci/types.js.map +1 -0
  99. package/dist/ci/upload-client.d.ts +74 -0
  100. package/dist/ci/upload-client.d.ts.map +1 -0
  101. package/dist/ci/upload-client.js +195 -0
  102. package/dist/ci/upload-client.js.map +1 -0
  103. package/dist/cli.d.ts +3 -0
  104. package/dist/cli.d.ts.map +1 -0
  105. package/dist/cli.js +716 -0
  106. package/dist/cli.js.map +1 -0
  107. package/dist/core/agent-state.d.ts +47 -0
  108. package/dist/core/agent-state.d.ts.map +1 -0
  109. package/dist/core/agent-state.js +137 -0
  110. package/dist/core/agent-state.js.map +1 -0
  111. package/dist/core/judge-utils.d.ts +22 -0
  112. package/dist/core/judge-utils.d.ts.map +1 -0
  113. package/dist/core/judge-utils.js +211 -0
  114. package/dist/core/judge-utils.js.map +1 -0
  115. package/dist/core/registry.d.ts +28 -0
  116. package/dist/core/registry.d.ts.map +1 -0
  117. package/dist/core/registry.js +52 -0
  118. package/dist/core/registry.js.map +1 -0
  119. package/dist/dashboard-server.d.ts +65 -0
  120. package/dist/dashboard-server.d.ts.map +1 -0
  121. package/dist/dashboard-server.js +3940 -0
  122. package/dist/dashboard-server.js.map +1 -0
  123. package/dist/execution/tool-runner.d.ts +26 -0
  124. package/dist/execution/tool-runner.d.ts.map +1 -0
  125. package/dist/execution/tool-runner.js +316 -0
  126. package/dist/execution/tool-runner.js.map +1 -0
  127. package/dist/html/dashboard.html +2218 -0
  128. package/dist/http.d.ts +14 -0
  129. package/dist/http.d.ts.map +1 -0
  130. package/dist/http.js +13 -0
  131. package/dist/http.js.map +1 -0
  132. package/dist/index.cjs +8102 -0
  133. package/dist/index.d.ts +61 -0
  134. package/dist/index.d.ts.map +1 -0
  135. package/dist/index.js +67 -0
  136. package/dist/index.js.map +1 -0
  137. package/dist/interceptors/ai-interceptor.d.ts +26 -0
  138. package/dist/interceptors/ai-interceptor.d.ts.map +1 -0
  139. package/dist/interceptors/ai-interceptor.js +756 -0
  140. package/dist/interceptors/ai-interceptor.js.map +1 -0
  141. package/dist/interceptors/db-auto.d.ts +8 -0
  142. package/dist/interceptors/db-auto.d.ts.map +1 -0
  143. package/dist/interceptors/db-auto.js +217 -0
  144. package/dist/interceptors/db-auto.js.map +1 -0
  145. package/dist/interceptors/db.d.ts +23 -0
  146. package/dist/interceptors/db.d.ts.map +1 -0
  147. package/dist/interceptors/db.js +137 -0
  148. package/dist/interceptors/db.js.map +1 -0
  149. package/dist/interceptors/http.d.ts +28 -0
  150. package/dist/interceptors/http.d.ts.map +1 -0
  151. package/dist/interceptors/http.js +356 -0
  152. package/dist/interceptors/http.js.map +1 -0
  153. package/dist/interceptors/side-effects.d.ts +7 -0
  154. package/dist/interceptors/side-effects.d.ts.map +1 -0
  155. package/dist/interceptors/side-effects.js +72 -0
  156. package/dist/interceptors/side-effects.js.map +1 -0
  157. package/dist/interceptors/telemetry-push.d.ts +142 -0
  158. package/dist/interceptors/telemetry-push.d.ts.map +1 -0
  159. package/dist/interceptors/telemetry-push.js +463 -0
  160. package/dist/interceptors/telemetry-push.js.map +1 -0
  161. package/dist/interceptors/tool.d.ts +2 -0
  162. package/dist/interceptors/tool.d.ts.map +1 -0
  163. package/dist/interceptors/tool.js +274 -0
  164. package/dist/interceptors/tool.js.map +1 -0
  165. package/dist/interceptors/workflow-ai.d.ts +5 -0
  166. package/dist/interceptors/workflow-ai.d.ts.map +1 -0
  167. package/dist/interceptors/workflow-ai.js +382 -0
  168. package/dist/interceptors/workflow-ai.js.map +1 -0
  169. package/dist/internals/conditional-recorder.d.ts +21 -0
  170. package/dist/internals/conditional-recorder.d.ts.map +1 -0
  171. package/dist/internals/conditional-recorder.js +54 -0
  172. package/dist/internals/conditional-recorder.js.map +1 -0
  173. package/dist/internals/mock-resolver.d.ts +146 -0
  174. package/dist/internals/mock-resolver.d.ts.map +1 -0
  175. package/dist/internals/mock-resolver.js +427 -0
  176. package/dist/internals/mock-resolver.js.map +1 -0
  177. package/dist/matchers/index.d.ts +96 -0
  178. package/dist/matchers/index.d.ts.map +1 -0
  179. package/dist/matchers/index.js +668 -0
  180. package/dist/matchers/index.js.map +1 -0
  181. package/dist/observability.d.ts +82 -0
  182. package/dist/observability.d.ts.map +1 -0
  183. package/dist/observability.js +471 -0
  184. package/dist/observability.js.map +1 -0
  185. package/dist/portal-executor.d.ts +30 -0
  186. package/dist/portal-executor.d.ts.map +1 -0
  187. package/dist/portal-executor.js +324 -0
  188. package/dist/portal-executor.js.map +1 -0
  189. package/dist/portal-server.d.ts +3 -0
  190. package/dist/portal-server.d.ts.map +1 -0
  191. package/dist/portal-server.js +279 -0
  192. package/dist/portal-server.js.map +1 -0
  193. package/dist/proxy/llm-capture.d.ts +14 -0
  194. package/dist/proxy/llm-capture.d.ts.map +1 -0
  195. package/dist/proxy/llm-capture.js +264 -0
  196. package/dist/proxy/llm-capture.js.map +1 -0
  197. package/dist/reporter.d.ts +3 -0
  198. package/dist/reporter.d.ts.map +1 -0
  199. package/dist/reporter.js +72 -0
  200. package/dist/reporter.js.map +1 -0
  201. package/dist/runWorkflowSubprocess.d.ts +14 -0
  202. package/dist/runWorkflowSubprocess.d.ts.map +1 -0
  203. package/dist/runWorkflowSubprocess.js +66 -0
  204. package/dist/runWorkflowSubprocess.js.map +1 -0
  205. package/dist/runner.d.ts +16 -0
  206. package/dist/runner.d.ts.map +1 -0
  207. package/dist/runner.js +138 -0
  208. package/dist/runner.js.map +1 -0
  209. package/dist/socket-connector.d.ts +22 -0
  210. package/dist/socket-connector.d.ts.map +1 -0
  211. package/dist/socket-connector.js +104 -0
  212. package/dist/socket-connector.js.map +1 -0
  213. package/dist/telemetry-batcher.d.ts +56 -0
  214. package/dist/telemetry-batcher.d.ts.map +1 -0
  215. package/dist/telemetry-batcher.js +143 -0
  216. package/dist/telemetry-batcher.js.map +1 -0
  217. package/dist/test-setup.d.ts +12 -0
  218. package/dist/test-setup.d.ts.map +1 -0
  219. package/dist/test-setup.js +13 -0
  220. package/dist/test-setup.js.map +1 -0
  221. package/dist/tool-registry.d.ts +31 -0
  222. package/dist/tool-registry.d.ts.map +1 -0
  223. package/dist/tool-registry.js +73 -0
  224. package/dist/tool-registry.js.map +1 -0
  225. package/dist/tool-runner-worker.d.ts +2 -0
  226. package/dist/tool-runner-worker.d.ts.map +1 -0
  227. package/dist/tool-runner-worker.js +215 -0
  228. package/dist/tool-runner-worker.js.map +1 -0
  229. package/dist/trace-adapter/context.d.ts +72 -0
  230. package/dist/trace-adapter/context.d.ts.map +1 -0
  231. package/dist/trace-adapter/context.js +80 -0
  232. package/dist/trace-adapter/context.js.map +1 -0
  233. package/dist/tracing.d.ts +2 -0
  234. package/dist/tracing.d.ts.map +1 -0
  235. package/dist/tracing.js +59 -0
  236. package/dist/tracing.js.map +1 -0
  237. package/dist/trigger-executor.d.ts +12 -0
  238. package/dist/trigger-executor.d.ts.map +1 -0
  239. package/dist/trigger-executor.js +130 -0
  240. package/dist/trigger-executor.js.map +1 -0
  241. package/dist/types/portal.d.ts +76 -0
  242. package/dist/types/portal.d.ts.map +1 -0
  243. package/dist/types/portal.js +2 -0
  244. package/dist/types/portal.js.map +1 -0
  245. package/dist/utils/debug.d.ts +3 -0
  246. package/dist/utils/debug.d.ts.map +1 -0
  247. package/dist/utils/debug.js +8 -0
  248. package/dist/utils/debug.js.map +1 -0
  249. package/dist/utils/license-error.d.ts +23 -0
  250. package/dist/utils/license-error.d.ts.map +1 -0
  251. package/dist/utils/license-error.js +42 -0
  252. package/dist/utils/license-error.js.map +1 -0
  253. package/dist/utils/redact.d.ts +7 -0
  254. package/dist/utils/redact.d.ts.map +1 -0
  255. package/dist/utils/redact.js +26 -0
  256. package/dist/utils/redact.js.map +1 -0
  257. package/dist/workflow-runner-worker.d.ts +2 -0
  258. package/dist/workflow-runner-worker.d.ts.map +1 -0
  259. package/dist/workflow-runner-worker.js +329 -0
  260. package/dist/workflow-runner-worker.js.map +1 -0
  261. package/dist/workflow-runner.d.ts +14 -0
  262. package/dist/workflow-runner.d.ts.map +1 -0
  263. package/dist/workflow-runner.js +34 -0
  264. package/dist/workflow-runner.js.map +1 -0
  265. package/docs/agent-coding-instructions.md +138 -0
  266. package/docs/agent-integration-guide.md +564 -0
  267. package/docs/agents.md +140 -0
  268. package/docs/dashboard.md +394 -0
  269. package/docs/deno.md +69 -0
  270. package/docs/instrumentation.md +424 -0
  271. package/docs/langfuse-trace-structure.md +145 -0
  272. package/docs/matchers.md +173 -0
  273. package/docs/observability_contract.md +192 -0
  274. package/docs/observability_mode.md +195 -0
  275. package/docs/quickstart.md +621 -0
  276. package/docs/security-compliance.md +566 -0
  277. package/docs/test-writing-guidelines.md +444 -0
  278. package/docs/tools.md +165 -0
  279. package/docs/workflow-modes.md +253 -0
  280. package/package.json +76 -0
  281. package/src/browser-ui.ts +281 -0
  282. package/src/capture/event.ts +30 -0
  283. package/src/capture/index.ts +3 -0
  284. package/src/capture/recorder.ts +62 -0
  285. package/src/capture/replay.ts +55 -0
  286. package/src/ci/api-client.ts +136 -0
  287. package/src/ci/benchmark.ts +257 -0
  288. package/src/ci/ed-runner.ts +351 -0
  289. package/src/ci/executor.ts +671 -0
  290. package/src/ci/git-info.ts +127 -0
  291. package/src/ci/index.ts +5 -0
  292. package/src/ci/measurement.ts +25 -0
  293. package/src/ci/replay.ts +127 -0
  294. package/src/ci/reporters/default.ts +50 -0
  295. package/src/ci/reporters/index.ts +21 -0
  296. package/src/ci/reporters/json.ts +18 -0
  297. package/src/ci/reporters/junit.ts +61 -0
  298. package/src/ci/runner.ts +208 -0
  299. package/src/ci/test-discovery.ts +16 -0
  300. package/src/ci/test-loader.ts +187 -0
  301. package/src/ci/test-registry.ts +62 -0
  302. package/src/ci/trace-schema.ts +96 -0
  303. package/src/ci/trace-writer.ts +107 -0
  304. package/src/ci/types.ts +115 -0
  305. package/src/ci/upload-client.ts +300 -0
  306. package/src/cli.ts +811 -0
  307. package/src/core/agent-state.ts +162 -0
  308. package/src/core/judge-utils.ts +232 -0
  309. package/src/core/registry.ts +92 -0
  310. package/src/dashboard-server.ts +2047 -0
  311. package/src/execution/tool-runner.ts +352 -0
  312. package/src/html/dashboard.html +2218 -0
  313. package/src/http.ts +13 -0
  314. package/src/index.ts +138 -0
  315. package/src/interceptors/ai-interceptor.ts +798 -0
  316. package/src/interceptors/db-auto.ts +243 -0
  317. package/src/interceptors/db.ts +156 -0
  318. package/src/interceptors/http.ts +393 -0
  319. package/src/interceptors/side-effects.ts +83 -0
  320. package/src/interceptors/telemetry-push.ts +537 -0
  321. package/src/interceptors/tool.ts +287 -0
  322. package/src/interceptors/workflow-ai.ts +419 -0
  323. package/src/internals/conditional-recorder.ts +63 -0
  324. package/src/internals/mock-resolver.ts +492 -0
  325. package/src/matchers/index.ts +824 -0
  326. package/src/observability.ts +501 -0
  327. package/src/portal-executor.ts +355 -0
  328. package/src/portal-server.ts +304 -0
  329. package/src/proxy/llm-capture.ts +301 -0
  330. package/src/reporter.ts +81 -0
  331. package/src/runWorkflowSubprocess.ts +74 -0
  332. package/src/runner.ts +178 -0
  333. package/src/socket-connector.ts +117 -0
  334. package/src/telemetry-batcher.ts +191 -0
  335. package/src/test-setup.ts +16 -0
  336. package/src/tool-registry.ts +94 -0
  337. package/src/tool-runner-worker.ts +244 -0
  338. package/src/trace-adapter/context.ts +156 -0
  339. package/src/tracing.ts +62 -0
  340. package/src/trigger-executor.ts +171 -0
  341. package/src/types/agent.d.ts +63 -0
  342. package/src/types/expect.d.ts +81 -0
  343. package/src/types/modules.d.ts +2 -0
  344. package/src/types/portal.ts +69 -0
  345. package/src/utils/debug.ts +8 -0
  346. package/src/utils/license-error.ts +43 -0
  347. package/src/utils/redact.ts +25 -0
  348. package/src/workflow-runner-worker.ts +386 -0
  349. package/src/workflow-runner.ts +58 -0
package/dist/html/dashboard.html ADDED
@@ -0,0 +1,2218 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>ElasticDash Dashboard</title>
7
+ <style>
8
+ /* Help icon tooltip */
9
+ .help-icon-wrap { position: relative; display: inline-flex; align-items: center; }
10
+ .help-icon {
11
+ display: inline-flex; align-items: center; justify-content: center;
12
+ width: 16px; height: 16px; border-radius: 50%;
13
+ background: #e0e0e0; color: #666; font-size: 11px; font-weight: bold;
14
+ cursor: help; vertical-align: middle; margin-left: 4px;
15
+ user-select: none;
16
+ }
17
+ .help-tooltip {
18
+ display: none; position: absolute; left: 50%; bottom: calc(100% + 8px);
19
+ transform: translateX(-50%);
20
+ background: #333; color: #fff; font-size: 12px; font-weight: 400;
21
+ line-height: 1.4; padding: 8px 12px; border-radius: 6px;
22
+ width: 280px; white-space: normal; z-index: 10000;
23
+ box-shadow: 0 2px 8px rgba(0,0,0,0.18);
24
+ pointer-events: auto;
25
+ }
26
+ .help-tooltip::after {
27
+ content: ''; position: absolute; top: 100%; left: 50%;
28
+ transform: translateX(-50%);
29
+ border: 6px solid transparent; border-top-color: #333;
30
+ }
31
+ .help-icon-wrap:hover .help-tooltip { display: block; }
32
+ /* Ensure first cell in observation-table never overflows parent */
33
+ .observation-table td:first-child {
34
+ max-width: 120px;
35
+ overflow: auto;
36
+ white-space: nowrap;
37
+ }
38
+ * { margin: 0; padding: 0; box-sizing: border-box; }
39
+ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
40
+ .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
41
+ header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
42
+ h1 { font-size: 28px; margin-bottom: 8px; color: #1a1a1a; }
43
+ .subtitle { font-size: 14px; color: #666; margin-bottom: 16px; }
44
+ .search-box { display: flex; gap: 10px; }
45
+ input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
46
+ input[type="text"]:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }
47
+ .result-count { padding: 10px 12px; background: #f0f0f0; border-radius: 6px; font-size: 14px; color: #666; }
48
+ .workflows-list { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); overflow: hidden; max-height: 65vh; display: flex; flex-direction: column; }
49
+ .workflows-table { width: 100%; border-collapse: collapse; }
50
+ .workflows-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 10; }
51
+ .workflows-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: #333; border-bottom: 2px solid #ddd; }
52
+ .workflows-table td { padding: 12px 16px; border-bottom: 1px solid #eee; }
53
+ .workflows-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
54
+ .workflows-table tbody tr:hover { background-color: #f9f9f9; }
55
+ .workflow-name-cell { font-family: Monaco, monospace; font-weight: 600; color: #0066cc; }
56
+ .workflow-path-cell { font-family: Monaco, monospace; font-size: 12px; color: #666; }
57
+ .async-badge { display: inline-block; background: #e8f3ff; color: #0066cc; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 8px; }
58
+ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; }
59
+ .modal.open { display: flex; }
60
+ .modal-content { background: white; border-radius: 12px; width: 92%; max-width: 1100px; max-height: 90vh; overflow-y: auto; padding: 30px; }
61
+ .modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
62
+ .modal-title { font-size: 20px; font-weight: 600; }
63
+ .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
64
+ .upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; background: #fafafa; overflow: hidden; height: 520px; position: relative; }
65
+ .upload-area:hover { border-color: #0066cc; background: #f0f7ff; }
66
+ .upload-area > div {
67
+ position: absolute;
68
+ top: 50%;
69
+ left: 50%;
70
+ transform: translate(-50%, -50%);
71
+ }
72
+ .upload-icon { font-size: 32px; margin-bottom: 12px; }
73
+ input[type="file"] { display: none; }
74
+ .upload-status { margin-top: 20px; padding: 12px; border-radius: 6px; display: none; }
75
+ .upload-status.success { display: block; background: #e8f5e9; color: #2e7d32; }
76
+ .upload-status.error { display: block; background: #ffebee; color: #c62828; }
77
+ .hidden { display: none !important; }
78
+ .trace-viewer { display: none; margin-top: 20px; }
79
+ .trace-viewer.visible { display: block; }
80
+ .trace-layout { display: grid; grid-template-columns: 40% calc(60% - 16px); gap: 16px; overflow: auto; height: 520px; }
81
+ .trace-layout.step-5 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
82
+ .trace-layout.step-4 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
83
+ .trace-left, .trace-right { background: #f9f9f9; border-radius: 8px; padding: 14px; border: 1px solid #eee; }
84
+ .trace-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
85
+ .observation-table-wrap { max-height: 460px; overflow: auto; background: white; border-radius: 6px; border: 1px solid #eee; }
86
+ .observation-table { width: 100%; border-collapse: collapse; }
87
+ .observation-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 1; }
88
+ .observation-table th { text-align: left; font-size: 12px; font-weight: 600; color: #555; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; }
89
+ .observation-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
90
+ .observation-table tbody tr { cursor: pointer; }
91
+ .observation-table tbody tr:hover { background: #f7fbff; }
92
+ .observation-table tbody tr.selected { background: #e8f3ff; }
93
+ .obs-type { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #e6e6e6; color: #333; }
94
+ .obs-type.tool { background: #e8f7ef; color: #1f7a44; }
95
+ .obs-type.ai { background: #e8f1ff; color: #1f5fbf; }
96
+ .run-from-bp-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #bbb; border-radius: 4px; background: #f5f5f5; color: #333; cursor: pointer; white-space: nowrap; }
97
+ .run-from-bp-btn:hover { background: #e0edff; border-color: #5a8fd8; color: #1f5fbf; }
98
+ .run-from-bp-btn:disabled { opacity: 0.6; cursor: default; }
99
+ .resume-agent-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #b8a0d8; border-radius: 4px; background: #f3eeff; color: #5a2d9c; cursor: pointer; white-space: nowrap; margin-left: 6px; }
100
+ .resume-agent-btn:hover { background: #e6d8ff; border-color: #7c52b8; color: #3d1f7a; }
101
+ .resume-agent-btn:disabled { opacity: 0.6; cursor: default; }
102
+ .agent-task-badge { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #f0e8ff; color: #6a2fb0; border: 1px solid #d4b8f0; margin-left: 6px; font-weight: 600; }
103
+ .agent-task-row { background: #f7f0ff; border-left: 3px solid #8560c6; }
104
+ .frozen-row { background: #eef7ff; border-left: 3px solid #8cbcf5; }
105
+ .observation-table tbody tr.selected.frozen-row { background: #dcebff; }
106
+ .frozen-tag { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; background: #dcecff; color: #1f5fbf; border: 1px solid #a9c8f3; margin-left: 6px; font-weight: 600; }
107
+ .detail-sections { display: flex; flex-direction: column; gap: 12px; height: 486.5px; overflow-y: auto; }
108
+ .detail-section { background: white; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
109
+ .detail-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #555; text-transform: uppercase; letter-spacing: 0.02em; }
110
+ .detail-pre { margin: 0; font-family: Monaco, monospace; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: #fafafa; border-radius: 4px; padding: 10px; border: 1px solid #f0f0f0; min-height: 56px; max-height: 340px; overflow-y: auto; }
111
+ .modal-footer { display: flex; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; gap: 12px; justify-content: space-between; }
112
+ .btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
113
+ .btn-secondary { background: #f0f0f0; color: #333; }
114
+ .btn-secondary:hover { background: #e0e0e0; }
115
+ .btn-primary { background: #0066cc; color: white; }
116
+ .btn-primary:hover { background: #0052a3; }
117
+ .btn:disabled { opacity: 0.6; cursor: not-allowed; }
118
+ .btn-primary:disabled:hover { background: #0066cc; }
119
+ .btn-secondary:disabled:hover { background: #f0f0f0; }
120
+ .obs-checkbox { width: 18px; height: 18px; cursor: pointer; }
121
+ .rerun-status { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; }
122
+ .rerun-status.running { color: #666; }
123
+ .rerun-status.success { color: #1f7a44; }
124
+ .rerun-status.error { color: #c62828; }
125
+ @media (max-width: 900px) {
126
+ .trace-layout { grid-template-columns: 1fr; }
127
+ }
128
+ </style>
129
+ <script>
130
+ const updatedInputs = new Map();
131
+ </script>
132
+ </head>
133
+ <body>
134
+ <div class="container">
135
+ <header>
136
+ <h1>Workflow Functions</h1>
137
+ <div class="subtitle">Select a workflow to debug with trace analysis</div>
138
+ <div class="search-box">
139
+ <input type="text" id="searchInput" placeholder="Search by name or path..." autocomplete="off">
140
+ <div class="result-count"><span id="resultCount">0</span> workflows</div>
141
+ </div>
142
+ </header>
143
+ <div class="workflows-list">
144
+ <table class="workflows-table">
145
+ <thead><tr><th style="width: 35%">Function Name</th><th>File Path</th></tr></thead>
146
+ <tbody id="workflowsTableBody"><tr><td colspan="2" style="text-align: center; padding: 40px;">Loading...</td></tr></tbody>
147
+ </table>
148
+ </div>
149
+ </div>
150
+ <div id="traceModal" class="modal">
151
+ <div class="modal-content">
152
+ <div class="modal-header">
153
+ <h2 class="modal-title">Import Trace for Analysis</h2>
154
+ <button class="modal-close" id="closeModal">&times;</button>
155
+ </div>
156
+ <div id="uploadArea" class="upload-area">
157
+ <div>Drag and Drop <br />or <br />Click to Upload</div>
158
+ <input type="file" id="traceFile" accept=".json" />
159
+ </div>
160
+ <div id="uploadStatus" class="upload-status"></div>
161
+ <div id="traceViewer" class="trace-viewer">
162
+ <div class="trace-layout">
163
+ <div class="trace-left">
164
+ <div class="trace-section-title">Observations</div>
165
+ <div class="observation-table-wrap">
166
+ <table class="observation-table">
167
+ <thead id="observationTableHead"><tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
168
+ <tbody id="observationTableBody"></tbody>
169
+ </table>
170
+ </div>
171
+ </div>
172
+ <div class="trace-right">
173
+ <div id="observationDetail"></div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div id="modalFooter" class="modal-footer">
178
+ <button class="btn btn-secondary" id="changeTraceBtn">Change Trace File</button>
179
+ <button class="btn btn-primary" id="nextBtn">Next</button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ <script>
184
+ console.log("[Dashboard] Script starting...");
185
+ let allWorkflows = [], codeIndex = {workflows: [], tools: []}, selectedWorkflow = null;
186
+ let currentObservations = [], selectedObservationIndex = -1;
187
+ let rerunHistory = new Map();
188
+ let rerunInFlight = new Set();
189
+ let step4SelectedRun = -1;
190
+ let step5RunTraces = [];
191
+ let repoRoot = ''; // Will be fetched from API
192
+ try {
193
+ const _saved = localStorage.getItem('ed_step5RunTraces');
194
+ if (_saved) step5RunTraces = JSON.parse(_saved);
195
+ } catch {}
196
+ let step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
197
+ let step5RerunInFlight = false;
198
+
199
+ function computeDurationMs(obs) {
200
+ if (obs.durationMs != null) return obs.durationMs;
201
+ if (obs.latency != null && obs.latency > 0) return Math.round(obs.latency * 1000);
202
+ if (obs.startTime && obs.endTime) {
203
+ const diff = new Date(obs.endTime).getTime() - new Date(obs.startTime).getTime();
204
+ if (Number.isFinite(diff) && diff >= 0) return diff;
205
+ }
206
+ if (obs.latency != null) return 0;
207
+ return null;
208
+ }
209
+
210
+ function formatDuration(ms) {
211
+ if (ms == null) return '—';
212
+ if (ms < 1000) return ms + ' ms';
213
+ return (ms / 1000).toFixed(2) + ' s';
214
+ }
215
+
216
+ function extractUsage(obs) {
217
+ if (obs && (obs.usage && (obs.usage.inputTokens != null || obs.usage.outputTokens != null))) {
218
+ return obs.usage;
219
+ }
220
+ if (obs && (obs.usageDetails && (obs.usageDetails.input != null || obs.usageDetails.output != null))) {
221
+ return { inputTokens: obs.usageDetails.input, outputTokens: obs.usageDetails.output, totalTokens: obs.usageDetails.total };
222
+ }
223
+ if (obs && (obs.inputUsage != null || obs.outputUsage != null)) {
224
+ return { inputTokens: obs.inputUsage, outputTokens: obs.outputUsage, totalTokens: obs.totalUsage };
225
+ }
226
+ return null;
227
+ }
228
+
229
+ function renderUsage(obs) {
230
+ const u = extractUsage(obs);
231
+ if (!u || !(u.inputTokens > 0 || u.outputTokens > 0 || u.totalTokens > 0)) return '';
232
+ const lines = [];
233
+ if (u.inputTokens != null) lines.push('Input tokens: ' + u.inputTokens);
234
+ if (u.outputTokens != null) lines.push('Output tokens: ' + u.outputTokens);
235
+ if (u.totalTokens != null) lines.push('Total tokens: ' + u.totalTokens);
236
+ if (!lines.length) return '';
237
+ return `<div class="detail-section"><div class="detail-title">Usage</div><pre class="detail-pre">${lines.join('\n')}</pre></div>`;
238
+ }
239
+
240
+ function persistTraces() {
241
+ try {
242
+ // Store compact version — strip bulky workflowTrace.events (snapshot is on server)
243
+ const compact = step5RunTraces.map(function(t) {
244
+ const { workflowTrace, ...rest } = t;
245
+ return rest;
246
+ });
247
+ localStorage.setItem('ed_step5RunTraces', JSON.stringify(compact));
248
+ } catch {}
249
+ }
250
+ const tbody = document.getElementById("workflowsTableBody");
251
+ const countEl = document.getElementById("resultCount");
252
+ const modal = document.getElementById("traceModal");
253
+ const uploadArea = document.getElementById("uploadArea");
254
+ const fileInput = document.getElementById("traceFile");
255
+ const modalFooter = document.getElementById("modalFooter");
256
+ const uploadStatus = document.getElementById("uploadStatus");
257
+ const traceViewer = document.getElementById("traceViewer");
258
+ let observationTableBody = document.getElementById("observationTableBody");
259
+ let observationDetail = document.getElementById("observationDetail");
260
+ const modalTitle = document.querySelector(".modal-title");
261
+ console.log("[Dashboard] DOM elements loaded, tbody:", tbody);
262
+
263
+ let currentStep = 0; // 0=upload, 3=mark, 4=verify, 5=validate
264
+ let checkedObservations = new Set();
265
+
266
+ document.getElementById("closeModal").onclick = () => {
267
+ modal.classList.remove("open");
268
+ resetTraceModal();
269
+ };
270
+ modal.onclick = (e) => {
271
+ if (e.target === modal) {
272
+ modal.classList.remove("open");
273
+ resetTraceModal();
274
+ }
275
+ };
276
+
277
+ document.getElementById("changeTraceBtn").onclick = () => {
278
+ if (currentStep === 3) {
279
+ resetTraceModal();
280
+ } else if (currentStep === 4) {
281
+ // Go back to Step 3
282
+ currentStep = 3;
283
+ checkedObservations.clear(); // Clear to allow reselecting different steps
284
+ updateModalTitle();
285
+ updateFooterButtons();
286
+ renderObservationTable();
287
+ // Auto-select first observation
288
+ if (currentObservations.length > 0) {
289
+ selectObservation(0);
290
+ }
291
+ } else if (currentStep === 5) {
292
+ // Go back to Step 3 (Still Failing)
293
+ currentStep = 3;
294
+ checkedObservations.clear(); // Clear to allow reselecting different steps
295
+ updateModalTitle();
296
+ updateFooterButtons();
297
+ renderObservationTable();
298
+ // Auto-select first observation
299
+ if (currentObservations.length > 0) {
300
+ selectObservation(0);
301
+ }
302
+ }
303
+ };
304
+
305
+ document.getElementById("nextBtn").onclick = () => {
306
+ if (currentStep < 3) {
307
+ alert("Please upload a trace file to continue");
308
+ return;
309
+ }
310
+ if (currentStep === 3) {
311
+ // Validate that at least one checkbox is checked
312
+ if (checkedObservations.size === 0) {
313
+ alert("Please select at least one step to mark as broken");
314
+ return;
315
+ }
316
+ // Move to Step 4
317
+ currentStep = 4;
318
+ updateModalTitle();
319
+ updateFooterButtons();
320
+ renderObservationTable();
321
+ // Auto-select first checked observation
322
+ const checkedArray = Array.from(checkedObservations);
323
+ if (checkedArray.length > 0) {
324
+ window.step4SelectObservation(checkedArray[0]);
325
+ }
326
+ } else if (currentStep === 4) {
327
+ // Show prompt-update confirmation (if needed), then live validation dialog
328
+ window.openPromptConfirmation(() => window.openLiveValidationDialog());
329
+ return;
330
+ } else if (currentStep === 5) {
331
+ modal.classList.remove("open");
332
+ resetTraceModal();
333
+ customFooter.remove();
334
+ }
335
+ };
336
+
337
+ // ---- Tool Mock Config State ----
338
+ window._toolMockConfig = {}; // { toolName: { mode: 'live'|'mock-all'|'mock-specific', callIndices: [], mockData: {} } }
339
+
340
+ // ---- Prompt Mock Config State ----
341
+ // { [originalSystemPrompt]: { mode, replacement, callIndices? } }
342
+ window._promptMockConfig = {};
343
+
344
+ function getToolsFromTrace() {
345
+ // Extract unique tool names and their call details from the uploaded trace observations
346
+ const toolCalls = {};
347
+ currentObservations.forEach(function(obs, i) {
348
+ const isToolByType = obs.type === 'TOOL';
349
+ const isToolByName = typeof obs.name === 'string' && (obs.name.startsWith('tool-') || obs.name.startsWith('tool:'));
350
+ if (!isToolByType && !isToolByName) return;
351
+ const name = isToolByName && obs.type !== 'TOOL'
352
+ ? obs.name.slice(5)
353
+ : (obs.name || '(unknown)');
354
+ if (!toolCalls[name]) toolCalls[name] = [];
355
+ toolCalls[name].push({ index: toolCalls[name].length + 1, obsIndex: i, input: obs.input, output: obs.output });
356
+ });
357
+ return toolCalls;
358
+ }
359
+
360
+ function getAllRegisteredTools() {
361
+ // From codeIndex.tools (fetched at page load from /api/code-index)
362
+ return (codeIndex.tools || []).map(function(t) { return t.name; });
363
+ }
364
+
365
+ function buildToolMockConfigFromUI() {
366
+ const config = {};
367
+ const rows = document.querySelectorAll('.tool-mock-row');
368
+ rows.forEach(function(row) {
369
+ const toolName = row.dataset.toolName;
370
+ const modeSelect = row.querySelector('.tool-mock-mode');
371
+ const mode = modeSelect ? modeSelect.value : 'live';
372
+ if (mode === 'live') return;
373
+ const entry = { mode: mode };
374
+ if (mode === 'mock-specific') {
375
+ const checkboxes = row.querySelectorAll('.tool-call-checkbox:checked');
376
+ entry.callIndices = Array.from(checkboxes).map(function(cb) { return parseInt(cb.value, 10); });
377
+ if (entry.callIndices.length === 0) return; // No calls selected, treat as live
378
+ }
379
+ // Collect mock data
380
+ entry.mockData = {};
381
+ const dataInputs = row.querySelectorAll('.tool-mock-data-input');
382
+ dataInputs.forEach(function(inp) {
383
+ const callIdx = parseInt(inp.dataset.callIdx, 10);
384
+ if (!inp.value.trim()) return;
385
+ try { entry.mockData[callIdx] = JSON.parse(inp.value); }
386
+ catch(e) { entry.mockData[callIdx] = inp.value; }
387
+ });
388
+ config[toolName] = entry;
389
+ });
390
+ return config;
391
+ }
392
+
393
+ function cleanValue(value) {
394
+ if (typeof value === "string") {
395
+ value = value.replaceAll('\\"', '');
396
+ // remove surrounding quotes if they exist
397
+ if (value.startsWith('"') && value.endsWith('"')) {
398
+ return value.slice(1, -1);
399
+ }
400
+ return value;
401
+ }
402
+
403
+ if (Array.isArray(value)) {
404
+ return value.map(cleanValue);
405
+ }
406
+
407
+ if (typeof value === "object" && value !== null) {
408
+ const result = {};
409
+ for (const key in value) {
410
+ result[key] = cleanValue(value[key]);
411
+ }
412
+ return result;
413
+ }
414
+
415
+ return value;
416
+ }
417
+
418
+ function convert(input) {
419
+ const parsed = JSON.parse(input);
420
+ return cleanValue(parsed);
421
+ }
422
+
423
+ function renderToolMockSection(showAll) {
424
+ const traceTools = getToolsFromTrace();
425
+ const allToolNames = getAllRegisteredTools();
426
+ const traceToolNames = Object.keys(traceTools);
427
+ const toolNames = showAll
428
+ ? Array.from(new Set([...traceToolNames, ...allToolNames]))
429
+ : traceToolNames;
430
+
431
+ if (toolNames.length === 0) {
432
+ return '<div style="color:#999;font-size:13px;padding:6px 0;">No tools detected.</div>';
433
+ }
434
+
435
+ let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
436
+ html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
437
+ html += '<thead><tr style="background:#f5f5f5;">';
438
+ html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Tool</th>';
439
+ html += '<th style="width:15%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
440
+ html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
441
+ html += '<th style="width:35%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Details</th>';
442
+ html += '</tr></thead></table>';
443
+ html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
444
+
445
+ toolNames.forEach(function(name) {
446
+ const calls = traceTools[name] || [];
447
+ const inTrace = traceToolNames.includes(name);
448
+ const existing = window._toolMockConfig[name] || { mode: 'live' };
449
+ const nameStyle = inTrace ? '' : 'color:#999;';
450
+
451
+ html += '<tr class="tool-mock-row" data-tool-name="' + esc(name) + '" style="border-bottom:1px solid #f0f0f0;">';
452
+ html += '<td style="width:30%;padding:6px 10px;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;' + nameStyle + '">' + esc(name) + (inTrace ? '' : ' <span style="font-size:10px;color:#aaa;">(not in trace)</span>') + '</td>';
453
+ html += '<td style="width:15%;padding:6px 10px;">' + calls.length + '</td>';
454
+ html += '<td style="width:20%;padding:6px 10px;">';
455
+ html += '<select class="tool-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onToolMockModeChange(\'' + esc(name) + '\', this.value)">';
456
+ html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
457
+ html += '<option value="mock-all"' + (existing.mode === 'mock-all' ? ' selected' : '') + '>Mock All Calls</option>';
458
+ if (calls.length > 0) {
459
+ html += '<option value="mock-specific"' + (existing.mode === 'mock-specific' ? ' selected' : '') + '>Mock Specific Calls</option>';
460
+ }
461
+ html += '</select>';
462
+ html += '</td>';
463
+
464
+ // Details column: per-call checkboxes + mock data inputs
465
+ html += '<td style="width:35%;padding:6px 10px;">';
466
+ if (existing.mode === 'mock-all') {
467
+ let defaultData = (existing.mockData && existing.mockData[0] !== undefined) ? JSON.stringify(existing.mockData[0]) : (calls.length > 0 ? JSON.stringify(calls[0].output) : '');
468
+ defaultData = convert(defaultData);
469
+ html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Mock data (JSON):</div>';
470
+ html += '<textarea class="tool-mock-data-input" data-call-idx="0" style="width:100%;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:32px;resize:vertical;" placeholder="Return value for all calls">' + esc(defaultData) + '</textarea>';
471
+ } else if (existing.mode === 'mock-specific' && calls.length > 0) {
472
+ html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to mock:</div>';
473
+ calls.forEach(function(call) {
474
+ const isChecked = existing.callIndices && existing.callIndices.includes(call.index);
475
+ const inputPreview = typeof call.input === 'string' ? call.input.slice(0, 40) : JSON.stringify(call.input || '').slice(0, 40);
476
+ let mockVal = (existing.mockData && existing.mockData[call.index] !== undefined) ? JSON.stringify(existing.mockData[call.index]) : JSON.stringify(call.output);
477
+ mockVal = convert(mockVal);
478
+ html += '<div style="margin-bottom:6px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
479
+ html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
480
+ html += '<input type="checkbox" class="tool-call-checkbox" value="' + call.index + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onToolCallCheckChange(\'' + esc(name) + '\',' + call.index + ',this.checked)">';
481
+ html += '<span>Call #' + call.index + '</span>';
482
+ html += '<span style="color:#888;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(inputPreview) + '</span>';
483
+ html += '</label>';
484
+ if (isChecked) {
485
+ html += '<textarea class="tool-mock-data-input" data-call-idx="' + call.index + '" style="width:100%;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:28px;resize:vertical;margin-top:4px;" placeholder="Mock return value (JSON)">' + esc(mockVal) + '</textarea>';
486
+ }
487
+ html += '</div>';
488
+ });
489
+ } else {
490
+ html += '<span style="color:#aaa;font-size:11px;">—</span>';
491
+ }
492
+ html += '</td>';
493
+ html += '</tr>';
494
+ });
495
+
496
+ html += '</tbody></table></div></div>';
497
+ return html;
498
+ }
499
+
500
+ // ---- Prompt Mock Helpers ----
501
+
502
+ /** Extract the system prompt string from an LLM call input object or JSON string. */
503
+ function extractSystemPromptFromInput(input) {
504
+ // Input may arrive as a JSON-encoded string (e.g. from Langfuse traces).
505
+ // Unwrap until we get a non-string value.
506
+ while (typeof input === 'string') {
507
+ try { input = JSON.parse(input); } catch(e) { break; }
508
+ }
509
+ if (!input || typeof input !== 'object') return null;
510
+ // Anthropic style: { system: "...", messages: [...] }
511
+ if (typeof input.system === 'string') return input.system;
512
+ // Custom wrapAI callers: { systemPrompt: "...", messages: [...] }
513
+ if (typeof input.systemPrompt === 'string' && input.systemPrompt.length > 0) return input.systemPrompt;
514
+ // OpenAI / plain array: messages with role === "system"
515
+ var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
516
+ if (msgs) {
517
+ for (var i = 0; i < msgs.length; i++) {
518
+ var m = msgs[i];
519
+ if (m && typeof m === 'object' && m.role === 'system' && typeof m.content === 'string') {
520
+ return m.content;
521
+ }
522
+ }
523
+ }
524
+ return null;
525
+ }
526
+
527
+ /**
528
+ * Returns an array of unique system prompts observed across all GENERATION observations.
529
+ * Each entry: { systemPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
530
+ * callNumber is the 1-indexed occurrence of this prompt across GENERATION observations.
531
+ */
532
+ function getSystemPromptsFromTrace() {
533
+ var seen = []; // [{ systemPrompt, modelName, calls, count }]
534
+ var seenMap = {}; // systemPrompt -> index in seen
535
+ var callCounters = {}; // systemPrompt -> running count
536
+ currentObservations.forEach(function(obs, obsIndex) {
537
+ if (obs.type !== 'GENERATION') return;
538
+ var sp = extractSystemPromptFromInput(obs.input);
539
+ if (!sp) return;
540
+ callCounters[sp] = (callCounters[sp] || 0) + 1;
541
+ var callNumber = callCounters[sp];
542
+ if (seenMap[sp] === undefined) {
543
+ seenMap[sp] = seen.length;
544
+ seen.push({ systemPrompt: sp, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
545
+ }
546
+ seen[seenMap[sp]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
547
+ seen[seenMap[sp]].count++;
548
+ });
549
+ return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
550
+ }
551
+
552
+ function renderPromptMockSection() {
553
+ const prompts = getSystemPromptsFromTrace();
554
+ if (prompts.length === 0) {
555
+ return '<div style="color:#999;font-size:13px;padding:6px 0;">No system prompts detected in trace. Only AI calls with a system prompt can be mocked here.</div>';
556
+ }
557
+
558
+ let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
559
+ html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
560
+ html += '<thead><tr style="background:#f5f5f5;">';
561
+ html += '<th style="width:25%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">System Prompt</th>';
562
+ html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
563
+ html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
564
+ html += '<th style="width:45%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
565
+ html += '</tr></thead></table>';
566
+ html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
567
+
568
+ prompts.forEach(function(row) {
569
+ const key = row.systemPrompt;
570
+ const existing = window._promptMockConfig[key] || { mode: 'live', replacement: '' };
571
+ const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
572
+
573
+ html += '<tr class="prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
574
+
575
+ // System prompt preview column
576
+ html += '<td style="width:25%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
577
+
578
+ // Calls count column
579
+ html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
580
+
581
+ // Mode column
582
+ html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
583
+ html += '<select class="prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onSystemPromptMockModeChange(' + row.rowIndex + ', this.value)">';
584
+ html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
585
+ html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
586
+ if (row.count > 1) {
587
+ html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
588
+ }
589
+ html += '</select>';
590
+ html += '</td>';
591
+
592
+ // Replacement column
593
+ html += '<td style="width:45%;padding:6px 10px;">';
594
+ if (existing.mode === 'replace-all') {
595
+ html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
596
+ } else if (existing.mode === 'replace-specific') {
597
+ html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
598
+ row.calls.forEach(function(call) {
599
+ const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
600
+ html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
601
+ html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
602
+ html += '<input type="checkbox" class="prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onSystemPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
603
+ html += '<span>Call #' + call.callNumber + '</span>';
604
+ html += '</label>';
605
+ html += '</div>';
606
+ });
607
+ html += '<textarea class="prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
608
+ } else {
609
+ html += '<span style="color:#aaa;font-size:11px;">—</span>';
610
+ }
611
+ html += '</td>';
612
+
613
+ html += '</tr>';
614
+ });
615
+
616
+ html += '</tbody></table></div></div>';
617
+ return html;
618
+ }
619
+
620
+ function buildPromptMockConfigFromUI() {
621
+ const config = {};
622
+ Object.keys(window._promptMockConfig).forEach(function(key) {
623
+ const entry = window._promptMockConfig[key];
624
+ if (!entry || entry.mode === 'live') return;
625
+ config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
626
+ if (entry.mode === 'replace-specific' && entry.callIndices) {
627
+ config[key].callIndices = entry.callIndices;
628
+ }
629
+ });
630
+ return config;
631
+ }
632
+
633
+ window.onSystemPromptMockModeChange = function(rowIndex, mode) {
634
+ const prompts = getSystemPromptsFromTrace();
635
+ const row = prompts[rowIndex];
636
+ if (!row) return;
637
+ const key = row.systemPrompt;
638
+ if (mode === 'live') {
639
+ delete window._promptMockConfig[key];
640
+ } else {
641
+ if (!window._promptMockConfig[key]) {
642
+ window._promptMockConfig[key] = { mode: mode, replacement: row.systemPrompt };
643
+ } else {
644
+ window._promptMockConfig[key].mode = mode;
645
+ }
646
+ if (mode === 'replace-specific' && !window._promptMockConfig[key].callIndices) {
647
+ window._promptMockConfig[key].callIndices = [];
648
+ }
649
+ }
650
+ const container = document.getElementById('promptMockContainer');
651
+ if (container) container.innerHTML = renderPromptMockSection();
652
+ };
653
+
654
+ window.onSystemPromptCallCheckChange = function(rowIndex, callNumber, checked) {
655
+ const prompts = getSystemPromptsFromTrace();
656
+ const row = prompts[rowIndex];
657
+ if (!row) return;
658
+ const key = row.systemPrompt;
659
+ if (!window._promptMockConfig[key]) return;
660
+ var indices = window._promptMockConfig[key].callIndices || [];
661
+ if (checked) {
662
+ if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
663
+ } else {
664
+ var pos = indices.indexOf(callNumber);
665
+ if (pos >= 0) indices.splice(pos, 1);
666
+ }
667
+ window._promptMockConfig[key].callIndices = indices;
668
+ };
669
+
670
+ window.switchMockTab = function(tabName) {
671
+ const tabs = {
672
+ tool: document.getElementById('mockTabTool'),
673
+ prompt: document.getElementById('mockTabPrompt'),
674
+ userPrompt: document.getElementById('mockTabUserPrompt'),
675
+ };
676
+ const contents = {
677
+ tool: document.getElementById('mockTabToolContent'),
678
+ prompt: document.getElementById('mockTabPromptContent'),
679
+ userPrompt: document.getElementById('mockTabUserPromptContent'),
680
+ };
681
+ const toolExtra = document.getElementById('mockTabToolExtra');
682
+ Object.keys(tabs).forEach(function(key) {
683
+ const isActive = key === tabName;
684
+ if (tabs[key]) { tabs[key].style.borderBottomColor = isActive ? '#4f46e5' : 'transparent'; tabs[key].style.color = isActive ? '#4f46e5' : '#888'; }
685
+ if (contents[key]) contents[key].style.display = isActive ? '' : 'none';
686
+ });
687
+ if (toolExtra) toolExtra.style.display = tabName === 'tool' ? 'flex' : 'none';
688
+ };
689
+
690
+ window.onPromptMockInput = function(rowIndex, value) {
691
+ const prompts = getSystemPromptsFromTrace();
692
+ const row = prompts[rowIndex];
693
+ if (!row) return;
694
+ if (window._promptMockConfig[row.systemPrompt]) {
695
+ window._promptMockConfig[row.systemPrompt].replacement = value;
696
+ }
697
+ };
698
+
699
+ window.onToolMockModeChange = function(toolName, mode) {
700
+ if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'live' };
701
+ // Save current mock data before switching
702
+ window._toolMockConfig[toolName] = { ...window._toolMockConfig[toolName], mode: mode };
703
+ if (mode === 'mock-specific' && !window._toolMockConfig[toolName].callIndices) {
704
+ window._toolMockConfig[toolName].callIndices = [];
705
+ }
706
+ // Re-render tool mock section
707
+ const showAll = document.getElementById('showAllToolsToggle');
708
+ const container = document.getElementById('toolMockContainer');
709
+ if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
710
+ };
711
+
712
+ window.onToolCallCheckChange = function(toolName, callIdx, checked) {
713
+ if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'mock-specific', callIndices: [] };
714
+ const indices = window._toolMockConfig[toolName].callIndices || [];
715
+ if (checked && !indices.includes(callIdx)) {
716
+ indices.push(callIdx);
717
+ } else if (!checked) {
718
+ const pos = indices.indexOf(callIdx);
719
+ if (pos >= 0) indices.splice(pos, 1);
720
+ }
721
+ window._toolMockConfig[toolName].callIndices = indices;
722
+ const showAll = document.getElementById('showAllToolsToggle');
723
+ const container = document.getElementById('toolMockContainer');
724
+ if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
725
+ };
726
+
727
+ // ---- User Prompt Mock Helpers ----
728
+
729
+ /** Extract all user-role message content strings from an LLM call input. */
730
+ function extractUserPromptsFromInput(input) {
731
+ // Unwrap JSON-encoded strings until we get a non-string value.
732
+ while (typeof input === 'string') {
733
+ try { input = JSON.parse(input); } catch(e) { break; }
734
+ }
735
+ if (!input || typeof input !== 'object') return [];
736
+ var msgs = Array.isArray(input.messages) ? input.messages : (Array.isArray(input) ? input : null);
737
+ if (!msgs) return [];
738
+ var results = [];
739
+ for (var i = 0; i < msgs.length; i++) {
740
+ var m = msgs[i];
741
+ if (m && typeof m === 'object' && m.role === 'user' && typeof m.content === 'string') {
742
+ results.push(m.content);
743
+ }
744
+ }
745
+ return results;
746
+ }
747
+
748
+ /**
749
+ * Returns an array of unique user prompt texts observed across all GENERATION observations.
750
+ * Each entry: { userPrompt, modelName, calls: [{obsIndex, callNumber}], count, rowIndex }
751
+ * callNumber is the 1-indexed occurrence of this text across GENERATION observations.
752
+ */
753
+ function getUserPromptsFromTrace() {
754
+ var seen = []; // [{ userPrompt, modelName, calls, count }]
755
+ var seenMap = {}; // userPrompt -> index in seen
756
+ var callCounters = {}; // userPrompt -> running count
757
+ currentObservations.forEach(function(obs, obsIndex) {
758
+ if (obs.type !== 'GENERATION') return;
759
+ var prompts = extractUserPromptsFromInput(obs.input);
760
+ var uniqueInCall = [];
761
+ prompts.forEach(function(p) { if (uniqueInCall.indexOf(p) === -1) uniqueInCall.push(p); });
762
+ uniqueInCall.forEach(function(p) {
763
+ callCounters[p] = (callCounters[p] || 0) + 1;
764
+ var callNumber = callCounters[p];
765
+ if (seenMap[p] === undefined) {
766
+ seenMap[p] = seen.length;
767
+ seen.push({ userPrompt: p, modelName: obs.model || obs.name || '(unknown)', calls: [], count: 0 });
768
+ }
769
+ seen[seenMap[p]].calls.push({ obsIndex: obsIndex, callNumber: callNumber });
770
+ seen[seenMap[p]].count++;
771
+ });
772
+ });
773
+ return seen.map(function(e, i) { return Object.assign({}, e, { rowIndex: i }); });
774
+ }
775
+
776
+ function renderUserPromptMockSection() {
777
+ const prompts = getUserPromptsFromTrace();
778
+ if (prompts.length === 0) {
779
+ return '<div style="color:#999;font-size:13px;padding:6px 0;">No user prompts detected in trace. Only AI calls with user-role messages can be mocked here.</div>';
780
+ }
781
+
782
+ let html = '<div style="border:1px solid #e0e0e0;border-radius:6px;height:100%;display:flex;flex-direction:column;overflow:hidden;">';
783
+ html += '<table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;">';
784
+ html += '<thead><tr style="background:#f5f5f5;">';
785
+ html += '<th style="width:30%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">User Prompt</th>';
786
+ html += '<th style="width:10%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls</th>';
787
+ html += '<th style="width:20%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mode</th>';
788
+ html += '<th style="width:40%;padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Replacement</th>';
789
+ html += '</tr></thead></table>';
790
+ html += '<div style="flex:1;overflow-y:auto;"><table style="width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;"><tbody>';
791
+
792
+ prompts.forEach(function(row) {
793
+ const key = row.userPrompt;
794
+ const existing = window._userPromptMockConfig[key] || { mode: 'live', replacement: '' };
795
+ const preview = key.length > 60 ? key.slice(0, 60) + '…' : key;
796
+
797
+ html += '<tr class="user-prompt-mock-row" data-row-index="' + row.rowIndex + '" style="border-bottom:1px solid #f0f0f0;vertical-align:top;">';
798
+
799
+ // User prompt preview column
800
+ html += '<td style="width:30%;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;"><div style="font-size:11px;color:#555;font-family:Monaco,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + esc(key) + '">' + esc(preview) + '</div></td>';
801
+
802
+ // Calls count column
803
+ html += '<td style="width:10%;padding:6px 10px;color:#555;white-space:nowrap;">' + row.count + 'x</td>';
804
+
805
+ // Mode column
806
+ html += '<td style="width:20%;padding:6px 10px;white-space:nowrap;">';
807
+ html += '<select class="user-prompt-mock-mode" style="font-size:12px;padding:2px 4px;width: 100%;" onchange="window.onUserPromptMockModeChange(' + row.rowIndex + ', this.value)">';
808
+ html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
809
+ html += '<option value="replace-all"' + (existing.mode === 'replace-all' ? ' selected' : '') + '>Replace All</option>';
810
+ if (row.count > 1) {
811
+ html += '<option value="replace-specific"' + (existing.mode === 'replace-specific' ? ' selected' : '') + '>Replace Specific</option>';
812
+ }
813
+ html += '</select>';
814
+ html += '</td>';
815
+
816
+ // Replacement column
817
+ html += '<td style="width:40%;padding:6px 10px;">';
818
+ if (existing.mode === 'replace-all') {
819
+ html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
820
+ } else if (existing.mode === 'replace-specific') {
821
+ html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to replace:</div>';
822
+ row.calls.forEach(function(call) {
823
+ const isChecked = existing.callIndices && existing.callIndices.indexOf(call.callNumber) !== -1;
824
+ html += '<div style="margin-bottom:4px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
825
+ html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
826
+ html += '<input type="checkbox" class="user-prompt-call-checkbox" value="' + call.callNumber + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onUserPromptCallCheckChange(' + row.rowIndex + ',' + call.callNumber + ',this.checked)">';
827
+ html += '<span>Call #' + call.callNumber + '</span>';
828
+ html += '</label>';
829
+ html += '</div>';
830
+ });
831
+ html += '<textarea class="user-prompt-mock-input" data-row-index="' + row.rowIndex + '" style="width:100%;box-sizing:border-box;font-size:11px;font-family:Monaco,monospace;padding:4px;border:1px solid #ddd;border-radius:4px;min-height:48px;resize:vertical;margin-top:4px;" oninput="window.onUserPromptMockInput(' + row.rowIndex + ', this.value)">' + esc(existing.replacement || key) + '</textarea>';
832
+ } else {
833
+ html += '<span style="color:#aaa;font-size:11px;">—</span>';
834
+ }
835
+ html += '</td>';
836
+
837
+ html += '</tr>';
838
+ });
839
+
840
+ html += '</tbody></table></div></div>';
841
+ return html;
842
+ }
843
+
844
+ function buildUserPromptMockConfigFromUI() {
845
+ const config = {};
846
+ Object.keys(window._userPromptMockConfig).forEach(function(key) {
847
+ const entry = window._userPromptMockConfig[key];
848
+ if (!entry || entry.mode === 'live') return;
849
+ config[key] = { mode: entry.mode, replacement: entry.replacement || '' };
850
+ if (entry.mode === 'replace-specific' && entry.callIndices) {
851
+ config[key].callIndices = entry.callIndices;
852
+ }
853
+ });
854
+ return config;
855
+ }
856
+
857
+ window.onUserPromptMockModeChange = function(rowIndex, mode) {
858
+ const prompts = getUserPromptsFromTrace();
859
+ const row = prompts[rowIndex];
860
+ if (!row) return;
861
+ const key = row.userPrompt;
862
+ if (mode === 'live') {
863
+ delete window._userPromptMockConfig[key];
864
+ } else {
865
+ if (!window._userPromptMockConfig[key]) {
866
+ window._userPromptMockConfig[key] = { mode: mode, replacement: row.userPrompt };
867
+ } else {
868
+ window._userPromptMockConfig[key].mode = mode;
869
+ }
870
+ if (mode === 'replace-specific' && !window._userPromptMockConfig[key].callIndices) {
871
+ window._userPromptMockConfig[key].callIndices = [];
872
+ }
873
+ }
874
+ const container = document.getElementById('userPromptMockContainer');
875
+ if (container) container.innerHTML = renderUserPromptMockSection();
876
+ };
877
+
878
+ window.onUserPromptMockInput = function(rowIndex, value) {
879
+ const prompts = getUserPromptsFromTrace();
880
+ const row = prompts[rowIndex];
881
+ if (!row) return;
882
+ if (window._userPromptMockConfig[row.userPrompt]) {
883
+ window._userPromptMockConfig[row.userPrompt].replacement = value;
884
+ }
885
+ };
886
+
887
+ window.onUserPromptCallCheckChange = function(rowIndex, callNumber, checked) {
888
+ const prompts = getUserPromptsFromTrace();
889
+ const row = prompts[rowIndex];
890
+ if (!row) return;
891
+ const key = row.userPrompt;
892
+ if (!window._userPromptMockConfig[key]) return;
893
+ var indices = window._userPromptMockConfig[key].callIndices || [];
894
+ if (checked) {
895
+ if (indices.indexOf(callNumber) === -1) indices.push(callNumber);
896
+ } else {
897
+ var pos = indices.indexOf(callNumber);
898
+ if (pos >= 0) indices.splice(pos, 1);
899
+ }
900
+ window._userPromptMockConfig[key].callIndices = indices;
901
+ };
902
+
903
+ window.openLiveValidationDialog = function() {
904
+ if (window.liveValidationDialog) return;
905
+ window._toolMockConfig = {}; // Reset mock configs each time dialog opens
906
+ window._promptMockConfig = {};
907
+ window._userPromptMockConfig = {};
908
+
909
+ const hasTraceTools = currentObservations.some(function(o) { return o.type === 'TOOL'; });
910
+ const hasRegisteredTools = codeIndex.tools && codeIndex.tools.length > 0;
911
+
912
+ window.liveValidationDialog = document.createElement('div');
913
+ window.liveValidationDialog.id = 'liveValidationDialog';
914
+ window.liveValidationDialog.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;z-index:9999;';
915
+ window.liveValidationDialog.innerHTML = `
916
+ <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0002;width:680px;max-width:90vw;max-height:90vh;overflow-y:auto;">
917
+ <h3 style="margin-top:0;margin-bottom:18px;font-size:20px;">Validate Updated Flow with Live Data</h3>
918
+ <label style="font-size:15px;display:block;margin-bottom:8px;">How many times do you want to run the flow with live data?</label>
919
+ <input id="liveValidationCount" type="number" min="1" value="1" style="width:100%;font-size:16px;padding:6px 10px;margin-bottom:18px;" />
920
+ <label style="display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:18px;">
921
+ <input id="liveValidationSequential" type="checkbox" />
922
+ Run in sequence instead of parallel
923
+ </label>
924
+ <div style="border-top:1px solid #eee;padding-top:16px;margin-bottom:16px;">
925
+ <div style="display:flex;align-items:center;gap:0;border-bottom:2px solid #e0e0e0;margin-bottom:0;">
926
+ ${(hasTraceTools || hasRegisteredTools) ? `<button id="mockTabTool" class="mock-tab-btn" onclick="window.switchMockTab('tool')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid #4f46e5;color:#4f46e5;margin-bottom:-2px;">Tool Mocking <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Control which tools use real calls vs mock data. &lsquo;Live&rsquo; runs the real tool, &lsquo;Mock All Calls&rsquo; returns mock data for every call, and &lsquo;Mock Specific Calls&rsquo; lets you pick which call indices to mock.</span></span></button>` : ''}
927
+ <button id="mockTabPrompt" class="mock-tab-btn" onclick="window.switchMockTab('prompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid ${(hasTraceTools || hasRegisteredTools) ? 'transparent' : '#4f46e5'};color:${(hasTraceTools || hasRegisteredTools) ? '#888' : '#4f46e5'};margin-bottom:-2px;">System Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override the system prompt for LLM calls. Check a row to enable editing &mdash; the replacement applies to all LLM calls that use that exact system prompt text.</span></span></button>
928
+ <button id="mockTabUserPrompt" class="mock-tab-btn" onclick="window.switchMockTab('userPrompt')" style="padding:8px 18px;font-size:14px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#888;margin-bottom:-2px;">User Prompt <span class="help-icon-wrap"><span class="help-icon">?</span><span class="help-tooltip">Override user-role messages in LLM calls. Each unique user message text is listed. Choose &lsquo;Replace All&rsquo; to replace it in every LLM call where it appears, or &lsquo;Replace Specific&rsquo; to only replace it in selected call occurrences.</span></span></button>
929
+ <div id="mockTabToolExtra" style="margin-left:auto;display:flex;align-items:center;">
930
+ ${(hasTraceTools || hasRegisteredTools) ? `<label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
931
+ <input id="showAllToolsToggle" type="checkbox" onchange="document.getElementById('toolMockContainer').innerHTML = renderToolMockSection(this.checked);" />
932
+ Show all tools
933
+ </label>` : ''}
934
+ </div>
935
+ </div>
936
+ <div style="height:300px;position:relative;">
937
+ <div id="mockTabToolContent" style="height:100%;overflow:hidden;${(hasTraceTools || hasRegisteredTools) ? '' : 'display:none;'}">
938
+ <div id="toolMockContainer" style="height:100%;"></div>
939
+ </div>
940
+ <div id="mockTabPromptContent" style="height:100%;overflow:hidden;${(hasTraceTools || hasRegisteredTools) ? 'display:none;' : ''}">
941
+ <div id="promptMockContainer" style="height:100%;"></div>
942
+ </div>
943
+ <div id="mockTabUserPromptContent" style="height:100%;overflow:hidden;display:none;">
944
+ <div id="userPromptMockContainer" style="height:100%;"></div>
945
+ </div>
946
+ </div>
947
+ </div>
948
+ <div style="display:flex;gap:12px;justify-content:space-between;align-items:center;">
949
+ <span id="liveValidationProgress" style="font-size:14px;color:#555;"></span>
950
+ <div style="display:flex;gap:12px;">
951
+ <button id="cancelLiveValidation" class="btn btn-secondary">Cancel</button>
952
+ <button id="submitLiveValidation" class="btn btn-primary">Validate</button>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ `;
957
+ document.body.appendChild(window.liveValidationDialog);
958
+ // Render mock sections after DOM insertion
959
+ const toolMockContainer = document.getElementById('toolMockContainer');
960
+ if (toolMockContainer) {
961
+ toolMockContainer.innerHTML = renderToolMockSection(false);
962
+ }
963
+ const promptMockContainer = document.getElementById('promptMockContainer');
964
+ if (promptMockContainer) {
965
+ promptMockContainer.innerHTML = renderPromptMockSection();
966
+ }
967
+ const userPromptMockContainer = document.getElementById('userPromptMockContainer');
968
+ if (userPromptMockContainer) {
969
+ userPromptMockContainer.innerHTML = renderUserPromptMockSection();
970
+ }
971
+ document.getElementById('cancelLiveValidation').onclick = function() {
972
+ window.liveValidationDialog.remove();
973
+ window.liveValidationDialog = null;
974
+ };
975
+ document.getElementById('submitLiveValidation').onclick = async function() {
976
+ const count = parseInt(document.getElementById('liveValidationCount').value, 10);
977
+ const sequential = document.getElementById('liveValidationSequential').checked;
978
+ if (count >= 1) {
979
+ // Build mock configs from UI state and persist for "Run from here"
980
+ const toolMockConfig = buildToolMockConfigFromUI();
981
+ window._toolMockConfig = toolMockConfig;
982
+ const promptMockConfig = buildPromptMockConfigFromUI();
983
+ window._promptMockConfig = promptMockConfig;
984
+ const userPromptMockConfig = buildUserPromptMockConfigFromUI();
985
+ window._userPromptMockConfig = userPromptMockConfig;
986
+ const submitBtn = document.getElementById('submitLiveValidation');
987
+ submitBtn.disabled = true;
988
+ submitBtn.textContent = 'Validating...';
989
+ const progressEl = document.getElementById('liveValidationProgress');
990
+
991
+ function finishValidation(collectedTraces, errorMsg, usedSequential) {
992
+ if (progressEl) progressEl.textContent = '';
993
+ window.liveValidationDialog.remove();
994
+ window.liveValidationDialog = null;
995
+ window.liveValidationCount = count;
996
+ window.liveValidationSequential = usedSequential;
997
+ window.step5SelectedTrace = 0;
998
+ window.step5SelectedObservation = 0;
999
+ currentStep = 5;
1000
+ updateModalTitle();
1001
+ updateFooterButtons();
1002
+ if (errorMsg && collectedTraces.length === 0) {
1003
+ step5RunTraces = [];
1004
+ localStorage.removeItem('ed_step5RunTraces');
1005
+ step5RunMeta = { loading: false, error: errorMsg, runCount: count, sequential: usedSequential };
1006
+ } else {
1007
+ step5RunTraces = collectedTraces;
1008
+ persistTraces();
1009
+ step5RunMeta = { loading: false, error: '', runCount: collectedTraces.length, sequential: usedSequential };
1010
+ }
1011
+ if (window.step5SelectedTrace > step5RunTraces.length) window.step5SelectedTrace = 0;
1012
+ window.step5SelectedObservation = 0;
1013
+ renderObservationTable();
1014
+ }
1015
+
1016
+ if (sequential) {
1017
+ // Sequential mode: fire one request per run so progress reflects real completion
1018
+ if (progressEl) progressEl.textContent = `0 of ${count} workflow runs completed`;
1019
+ const collectedTraces = [];
1020
+ let fatalError = null;
1021
+ for (let i = 0; i < count; i++) {
1022
+ const singlePayload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
1023
+ try {
1024
+ const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(singlePayload) });
1025
+ const data = await response.json();
1026
+ if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
1027
+ collectedTraces.push({ ...data.traces[0], runNumber: i + 1 });
1028
+ } else {
1029
+ // Push an error trace so the run is still visible in Step 5
1030
+ collectedTraces.push({ runNumber: i + 1, ok: false, error: data.error || 'Workflow validation failed.', observations: [], workflowTrace: null });
1031
+ }
1032
+ } catch (err) {
1033
+ collectedTraces.push({ runNumber: i + 1, ok: false, error: err && err.message ? err.message : String(err), observations: [], workflowTrace: null });
1034
+ }
1035
+ if (progressEl) progressEl.textContent = `${i + 1} of ${count} workflow runs completed`;
1036
+ }
1037
+ finishValidation(collectedTraces, fatalError, true);
1038
+ } else {
1039
+ // Parallel mode: single bulk request
1040
+ if (progressEl) progressEl.textContent = `Running ${count} workflow run${count !== 1 ? 's' : ''} in parallel…`;
1041
+ const payload = { workflowName: selectedWorkflow?.name, runCount: count, sequential: false, observations: currentObservations, toolMockConfig, promptMockConfig, userPromptMockConfig };
1042
+ try {
1043
+ const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
1044
+ const data = await response.json();
1045
+ if (response.ok && data.ok) {
1046
+ finishValidation(Array.isArray(data.traces) ? data.traces : [], null, false);
1047
+ } else {
1048
+ finishValidation([], data.error || 'Workflow validation failed.', false);
1049
+ }
1050
+ } catch (err) {
1051
+ finishValidation([], err && err.message ? err.message : String(err), false);
1052
+ }
1053
+ }
1054
+ } else {
1055
+ document.getElementById('liveValidationCount').style.borderColor = 'red';
1056
+ }
1057
+ };
1058
+ };
1059
+
1060
+ window.openPromptConfirmation = function(onConfirm) {
1061
+ const genObs = currentObservations
1062
+ .map((o, i) => ({ obs: o, idx: i }))
1063
+ .filter(({ obs, idx }) => obs.type === 'GENERATION' && checkedObservations.has(idx));
1064
+ if (genObs.length === 0) { onConfirm(); return; }
1065
+
1066
+ const tableRows = genObs.map(({ obs, idx }) => {
1067
+ const preview = toDisplayText(obs.input, obs.type).replace(/\s+/g, ' ').trim().slice(0, 50);
1068
+ const model = obs.model || '—';
1069
+ return `<tr>
1070
+ <td style="padding:8px 10px;font-size:13px;color:#555;">${idx + 1}</td>
1071
+ <td style="padding:8px 10px;font-size:13px;font-family:Monaco,monospace;">${esc(obs.name || 'AI call')}</td>
1072
+ <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#444;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${esc(preview)}${preview.length === 50 ? '…' : ''}</td>
1073
+ <td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#555;">${esc(model)}</td>
1074
+ </tr>`;
1075
+ }).join('');
1076
+
1077
+ const dlg = document.createElement('div');
1078
+ dlg.style = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:9998;';
1079
+ dlg.innerHTML = `
1080
+ <div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0003;min-width:640px;max-width:92vw;">
1081
+ <h3 style="margin-top:0;margin-bottom:8px;font-size:20px;">Have you updated your AI prompts?</h3>
1082
+ <p style="margin:0 0 18px;font-size:14px;color:#555;">The following AI generation steps were found in your trace. Make sure you have edited the prompts in Step 4 before validating with live data.</p>
1083
+ <div style="border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;margin-bottom:24px;">
1084
+ <table style="width:100%;border-collapse:collapse;">
1085
+ <thead>
1086
+ <tr style="background:#f5f5f5;">
1087
+ <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">#</th>
1088
+ <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Name</th>
1089
+ <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Input preview</th>
1090
+ <th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Model</th>
1091
+ </tr>
1092
+ </thead>
1093
+ <tbody>${tableRows}</tbody>
1094
+ </table>
1095
+ </div>
1096
+ <div style="display:flex;gap:12px;justify-content:flex-end;">
1097
+ <button id="cancelPromptConfirm" class="btn btn-secondary">Cancel</button>
1098
+ <button id="proceedPromptConfirm" class="btn btn-primary">Yes, Proceed</button>
1099
+ </div>
1100
+ </div>
1101
+ `;
1102
+ document.body.appendChild(dlg);
1103
+ dlg.querySelector('#cancelPromptConfirm').onclick = () => dlg.remove();
1104
+ dlg.querySelector('#proceedPromptConfirm').onclick = () => { dlg.remove(); onConfirm(); };
1105
+ };
1106
+
1107
+ uploadArea.onclick = () => fileInput.click();
1108
+
1109
+ // Drag and drop handlers
1110
+ uploadArea.ondragover = (e) => {
1111
+ e.preventDefault();
1112
+ e.stopPropagation();
1113
+ uploadArea.style.borderColor = '#0066cc';
1114
+ uploadArea.style.background = '#f0f7ff';
1115
+ };
1116
+
1117
+ uploadArea.ondragleave = (e) => {
1118
+ e.preventDefault();
1119
+ e.stopPropagation();
1120
+ uploadArea.style.borderColor = '#ddd';
1121
+ uploadArea.style.background = '#fafafa';
1122
+ };
1123
+
1124
+ uploadArea.ondrop = (e) => {
1125
+ e.preventDefault();
1126
+ e.stopPropagation();
1127
+ uploadArea.style.borderColor = '#ddd';
1128
+ uploadArea.style.background = '#fafafa';
1129
+
1130
+ const files = e.dataTransfer.files;
1131
+ if (files.length === 0) return;
1132
+
1133
+ const file = files[0];
1134
+ // Check if it's a JSON file
1135
+ if (!file.name.toLowerCase().endsWith('.json')) {
1136
+ uploadStatus.className = "upload-status error";
1137
+ uploadStatus.textContent = "Please drop a JSON file";
1138
+ return;
1139
+ }
1140
+
1141
+ handleFileUpload(file);
1142
+ };
1143
+
1144
+ fileInput.onchange = (e) => {
1145
+ if (!e.target.files[0]) return;
1146
+ const file = e.target.files[0];
1147
+ // Always clear file input so same file can be uploaded again
1148
+ fileInput.value = "";
1149
+ handleFileUpload(file);
1150
+ };
1151
+
1152
+ function handleFileUpload(file) {
1153
+ // Clear observations before loading new trace
1154
+ resetTraceModal();
1155
+ const reader = new FileReader();
1156
+ reader.onload = (e) => {
1157
+ try {
1158
+ const data = JSON.parse(e.target.result);
1159
+ uploadStatus.className = "upload-status";
1160
+ uploadStatus.textContent = "";
1161
+ displayTrace(data);
1162
+ } catch (err) {
1163
+ uploadArea.classList.remove("hidden");
1164
+ traceViewer.classList.remove("visible");
1165
+ uploadStatus.className = "upload-status error";
1166
+ uploadStatus.textContent = "Invalid JSON";
1167
+ }
1168
+ };
1169
+ reader.readAsText(file);
1170
+ }
1171
+
1172
+ function displayTrace(data) {
1173
+ let obs = [];
1174
+ if (Array.isArray(data)) {
1175
+ obs = data.filter(o =>
1176
+ (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
1177
+ (o.input !== null && o.input !== undefined) &&
1178
+ (o.output !== null && o.output !== undefined)
1179
+ );
1180
+ } else {
1181
+ const trace = data.trace || data;
1182
+ // Handle multiple formats: data.data, data.observations, trace.observations
1183
+ const rawObs = data.data || data.observations || trace.observations || [];
1184
+ obs = rawObs.filter(o =>
1185
+ (o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
1186
+ (o.input !== null && o.input !== undefined) &&
1187
+ (o.output !== null && o.output !== undefined)
1188
+ );
1189
+ }
1190
+ // Sort by startTime ascending
1191
+ obs = obs.sort((a, b) => {
1192
+ const timeA = new Date(a.startTime || 0).getTime();
1193
+ const timeB = new Date(b.startTime || 0).getTime();
1194
+ return timeA - timeB;
1195
+ });
1196
+ // Aggregate token usage onto the workflow container SPAN if it has none
1197
+ if (selectedWorkflow?.name) {
1198
+ const containerIdx = obs.findIndex(
1199
+ o => o.type === 'SPAN' && o.name === selectedWorkflow.name
1200
+ );
1201
+ const _existingUsage = extractUsage(obs[containerIdx]);
1202
+ if (containerIdx >= 0 && (!_existingUsage || !(_existingUsage.totalTokens > 0))) {
1203
+ let inputTokens = 0, outputTokens = 0, totalTokens = 0;
1204
+ for (const o of obs) {
1205
+ if (o.type !== 'GENERATION') continue;
1206
+ const u = extractUsage(o);
1207
+ if (!u) continue;
1208
+ inputTokens += u.inputTokens ?? 0;
1209
+ outputTokens += u.outputTokens ?? 0;
1210
+ totalTokens += u.totalTokens ?? 0;
1211
+ }
1212
+ if (totalTokens > 0) {
1213
+ obs[containerIdx].usage = { inputTokens, outputTokens, totalTokens };
1214
+ }
1215
+ }
1216
+ }
1217
+ currentObservations = obs;
1218
+ selectedObservationIndex = -1;
1219
+ checkedObservations.clear();
1220
+ observationDetail.innerHTML = "";
1221
+ uploadArea.classList.add("hidden");
1222
+ traceViewer.classList.add("visible");
1223
+ currentStep = 3;
1224
+ updateModalTitle();
1225
+ updateFooterButtons();
1226
+ renderObservationTable();
1227
+ // Auto-select first observation
1228
+ if (currentObservations.length > 0) {
1229
+ selectObservation(0);
1230
+ }
1231
+ }
1232
+
1233
+
1234
+ function renderObservationTable() {
1235
+ // Capture scroll positions for step 5 columns before rebuilding DOM
1236
+ let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
1237
+ if (currentStep === 5) {
1238
+ const tls = document.querySelectorAll('.trace-left');
1239
+ _step5Col1Scroll = tls[0]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
1240
+ _step5Col2Scroll = tls[1]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
1241
+ }
1242
+ // For other steps, preserve scroll position of the first .observation-table-wrap
1243
+ let obsTableWrap = document.querySelector('.observation-table-wrap');
1244
+ let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
1245
+ if (currentStep === 5) {
1246
+ // Initialize selections if not set
1247
+ if (window.step5SelectedTrace === undefined || window.step5SelectedTrace === null) {
1248
+ window.step5SelectedTrace = 0;
1249
+ }
1250
+ if (window.step5SelectedObservation === undefined || window.step5SelectedObservation === null) {
1251
+ window.step5SelectedObservation = 0;
1252
+ }
1253
+ // Step 5: Validate Updated Flow with Live Data
1254
+ // Render traceTable before observationsTable
1255
+ const traces = Array.isArray(step5RunTraces) ? step5RunTraces : [];
1256
+ const traceCount = traces.length + 1;
1257
+ document.getElementsByClassName("trace-layout")[0].classList.add("step-5");
1258
+ let traceTable = `<div class="trace-section-title">Traces</div>
1259
+ <div class="observation-table-wrap">
1260
+ <table class="observation-table">
1261
+ <tbody>`;
1262
+ for (let i = 0; i < traceCount; i++) {
1263
+ const isSelected = i === window.step5SelectedTrace;
1264
+ const run = i === 0 ? null : traces[i - 1];
1265
+ const status = run ? (run.ok ? ' ✓' : ' ✗') : '';
1266
+ const label = i === 0 ? "Original Trace" : `${run?.traceName ?? `Trace-${run?.runNumber ?? i}`}${status}`;
1267
+ traceTable += `<tr class="${isSelected ? "selected" : ""}" onclick="window.step5SelectedTrace=${i};window.step5SelectedObservation=0;renderObservationTable();"><td>${label}</td></tr>`;
1268
+ }
1269
+ traceTable += `</tbody></table></div>`;
1270
+
1271
+ // Observations table for selected trace
1272
+ let observationsTable = "";
1273
+ let detailsSection = "";
1274
+
1275
+ if (window.step5SelectedTrace > traces.length) {
1276
+ window.step5SelectedTrace = 0;
1277
+ }
1278
+
1279
+ if (window.step5SelectedTrace === 0) {
1280
+ // Original Trace: show all currentObservations (same as step 3)
1281
+ const _rerunDisabled = step5RunMeta.loading || step5RerunInFlight;
1282
+ observationsTable += `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
1283
+ <div class="trace-section-title" style="margin-bottom:0">Observations</div>
1284
+ <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" ${_rerunDisabled ? 'disabled' : ''}>&#9654; Rerun</button>
1285
+ </div>
1286
+ <div class="observation-table-wrap">
1287
+ <table class="observation-table">
1288
+ <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
1289
+ <tbody>`;
1290
+ observationsTable += currentObservations.map((obs, j) => {
1291
+ const isSelected = j === window.step5SelectedObservation;
1292
+ const name = obs.name || obs.id || ("Observation " + (j + 1));
1293
+ const type = obs.type || "UNKNOWN";
1294
+ const typeClass = type === "TOOL" ? "tool" : "ai";
1295
+ const agentBadge = obs.agentTaskIndex != null ? `<span class="agent-task-badge">T${obs.agentTaskIndex + 1}</span>` : '';
1296
+ const rowClass = obs.agentTaskIndex != null ? 'agent-task-row' : '';
1297
+ return `<tr class="${isSelected ? "selected" : ""} ${rowClass}" onclick="window.step5SelectedObservation=${j};renderObservationTable();"><td>${esc(name)}${agentBadge}</td><td><span class="obs-type ${typeClass}">${esc(type)}</span></td><td style="color:#888;font-size:12px;">${formatDuration(computeDurationMs(obs))}</td></tr>`;
1298
+ }).join("");
1299
+ observationsTable += `</tbody></table></div>`;
1300
+ // Details for selected observation
1301
+ const selObs = currentObservations[window.step5SelectedObservation];
1302
+ if (selObs) {
1303
+ const inputText = toDisplayText(selObs.input, selObs.type);
1304
+ const outputText = toDisplayText(selObs.output, selObs.type);
1305
+ const detailId = 'step5-orig-' + window.step5SelectedObservation;
1306
+ const filePathHtml = selObs.type === "GENERATION"
1307
+ ? '<div class="file-path-placeholder"></div>'
1308
+ : renderFilePath(getObsFilePath(selObs));
1309
+ const _dur5orig = computeDurationMs(selObs);
1310
+ detailsSection = `<div class="detail-sections" id="${detailId}">
1311
+ ${filePathHtml}
1312
+ ${renderModel(selObs)}
1313
+ ${_dur5orig != null ? `<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">${formatDuration(_dur5orig)}</pre></div>` : ''}
1314
+ ${renderUsage(selObs)}
1315
+ <div class="detail-section">
1316
+ <div class="detail-title">Input</div>
1317
+ <pre class="detail-pre">${esc(inputText)}</pre>
1318
+ </div>
1319
+ <div class="detail-section">
1320
+ <div class="detail-title">Output</div>
1321
+ <pre class="detail-pre">${esc(outputText)}</pre>
1322
+ </div>
1323
+ </div>`;
1324
+ if (selObs.type === "GENERATION") setTimeout(() => resolveGenFilePath(selObs, detailId), 0);
1325
+ }
1326
+ } else {
1327
+ // Live traces: index 1 → traces[0], index 2 → traces[1], …
1328
+ const liveTrace = traces[window.step5SelectedTrace - 1];
1329
+ if (liveTrace) {
1330
+ const actions = Array.isArray(liveTrace.observations) ? liveTrace.observations : [];
1331
+ const traceIdx = window.step5SelectedTrace - 1;
1332
+ const _rerunDisabled2 = step5RunMeta.loading || step5RerunInFlight;
1333
+ observationsTable += `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
1334
+ <div class="trace-section-title" style="margin-bottom:0">Observations</div>
1335
+ <button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" ${_rerunDisabled2 ? 'disabled' : ''}>&#9654; Rerun</button>
1336
+ </div>
1337
+ <div class="observation-table-wrap">
1338
+ <table class="observation-table">
1339
+ <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
1340
+ <tbody>`;
1341
+ observationsTable += actions.map((action, j) => {
1342
+ const isSelected = j === window.step5SelectedObservation;
1343
+ const name = action.name || action.id || ("Observation " + (j + 1));
1344
+ const type = action.type || "UNKNOWN";
1345
+ const typeClass = type === "TOOL" ? "tool" : "ai";
1346
+ const agentBadge = action.agentTaskIndex != null ? `<span class="agent-task-badge">T${action.agentTaskIndex + 1}</span>` : '';
1347
+ const frozenBadge = action.isFrozen ? '<span class="frozen-tag">Frozen</span>' : '';
1348
+ const rowClasses = [
1349
+ isSelected ? 'selected' : '',
1350
+ action.agentTaskIndex != null ? 'agent-task-row' : '',
1351
+ action.isFrozen ? 'frozen-row' : '',
1352
+ ].filter(Boolean).join(' ');
1353
+ return `<tr class="${rowClasses}" onclick="window.step5SelectedObservation=${j};renderObservationTable();"><td>${esc(name)}${agentBadge}${frozenBadge}</td><td><span class="obs-type ${typeClass}">${esc(type)}</span></td><td style="color:#888;font-size:12px;">${formatDuration(computeDurationMs(action))}</td></tr>`;
1354
+ }).join("");
1355
+ observationsTable += `</tbody></table></div>`;
1356
+ // Details for selected observation
1357
+ if (actions[window.step5SelectedObservation]) {
1358
+ const obs = actions[window.step5SelectedObservation];
1359
+ const inputText = toDisplayText(obs.input, obs.type);
1360
+ const outputText = toDisplayText(obs.output, obs.type);
1361
+ const detailId = 'step5-live-' + (window.step5SelectedTrace - 1) + '-' + window.step5SelectedObservation;
1362
+ const filePathHtml = obs.type === "GENERATION"
1363
+ ? '<div class="file-path-placeholder"></div>'
1364
+ : renderFilePath(getObsFilePath(obs));
1365
+
1366
+ // For the first observation (workflow output), show Original Output for comparison
1367
+ let originalOutputSection = '';
1368
+ if (window.step5SelectedObservation === 0 && currentObservations[0]) {
1369
+ const originalOutputText = toDisplayText(currentObservations[0].output, currentObservations[0].type);
1370
+ originalOutputSection = `<div class="detail-section">
1371
+ <div class="detail-title">Original Output</div>
1372
+ <pre class="detail-pre">${esc(originalOutputText)}</pre>
1373
+ </div>`;
1374
+ }
1375
+
1376
+ // Agent steps: always show "Resume from Task X" button
1377
+ // Non-agent steps: show "Run from here" only if they have workflowEventId (HTTP/DB events)
1378
+ // Steps without agentTaskIndex and without workflowEventId get no button
1379
+ let runFromBpHtml = '';
1380
+ if (obs.agentTaskIndex != null) {
1381
+ runFromBpHtml = `<div class="detail-section" style="padding:8px 12px;"><button class="resume-agent-btn" onclick="resumeAgentFromTask(${traceIdx},${window.step5SelectedObservation},${obs.agentTaskIndex},event)">&#9654; Resume from Task ${obs.agentTaskIndex + 1}</button></div>`;
1382
+ } else if (obs.workflowEventId != null) {
1383
+ runFromBpHtml = `<div class="detail-section" style="padding:8px 12px;"><button class="run-from-bp-btn" onclick="runFromBreakpoint(${traceIdx},${window.step5SelectedObservation},event)">&#9654; Run from here</button></div>`;
1384
+ }
1385
+ const _dur5live = computeDurationMs(obs);
1386
+ detailsSection = `<div class="detail-sections" id="${detailId}">
1387
+ ${filePathHtml}
1388
+ ${runFromBpHtml}
1389
+ ${renderModel(obs)}
1390
+ ${_dur5live != null ? `<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">${formatDuration(_dur5live)}</pre></div>` : ''}
1391
+ ${renderUsage(obs)}
1392
+ <div class="detail-section">
1393
+ <div class="detail-title">Input</div>
1394
+ <pre class="detail-pre">${esc(inputText)}</pre>
1395
+ </div>
1396
+ ${originalOutputSection}
1397
+ <div class="detail-section">
1398
+ <div class="detail-title">Output</div>
1399
+ <pre class="detail-pre">${esc(outputText)}</pre>
1400
+ </div>
1401
+ </div>`;
1402
+ if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
1403
+ }
1404
+ }
1405
+ }
1406
+
1407
+ if (step5RunMeta.loading) {
1408
+ detailsSection = `<div class="detail-sections">
1409
+ <div class="detail-section">
1410
+ <div class="detail-title">Validation</div>
1411
+ <pre class="detail-pre">Running ${step5RunMeta.runCount || 1} workflow run(s) in ${step5RunMeta.sequential ? 'sequence' : 'parallel'} mode...</pre>
1412
+ </div>
1413
+ </div>`;
1414
+ } else if (step5RunMeta.error && !detailsSection) {
1415
+ detailsSection = `<div class="detail-sections">
1416
+ <div class="detail-section">
1417
+ <div class="detail-title">Validation Error</div>
1418
+ <pre class="detail-pre">${esc(step5RunMeta.error)}</pre>
1419
+ </div>
1420
+ </div>`;
1421
+ }
1422
+
1423
+ // Render 3 sibling columns inside the CSS grid
1424
+ const traceLayout = document.getElementsByClassName("trace-layout")[0];
1425
+ traceLayout.innerHTML = `
1426
+ <div class="trace-left">${traceTable}</div>
1427
+ <div class="trace-left">${observationsTable || '<div class="trace-section-title">Observations</div>'}</div>
1428
+ <div class="trace-right">${detailsSection}</div>
1429
+ `;
1430
+ // Restore scroll positions after DOM rebuild
1431
+ const _newTls = traceLayout.querySelectorAll('.trace-left');
1432
+ const _w1 = _newTls[0]?.querySelector('.observation-table-wrap');
1433
+ const _w2 = _newTls[1]?.querySelector('.observation-table-wrap');
1434
+ if (_w1) _w1.scrollTop = _step5Col1Scroll;
1435
+ if (_w2) _w2.scrollTop = _step5Col2Scroll;
1436
+ return;
1437
+ }
1438
+
1439
+ if (currentStep === 4) {
1440
+ const traceLayout = document.getElementsByClassName("trace-layout")[0];
1441
+ traceLayout.classList.remove("step-5");
1442
+ traceLayout.classList.add("step-4");
1443
+ const obsIndices = Array.from(checkedObservations);
1444
+
1445
+ // Column 1: Steps (observation list)
1446
+ let col1 = `<div class="trace-section-title">Steps</div>
1447
+ <div class="observation-table-wrap">
1448
+ <table class="observation-table">
1449
+ <thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
1450
+ <tbody>`;
1451
+ col1 += obsIndices.map(idx => {
1452
+ const obs = currentObservations[idx];
1453
+ const isSelected = idx === selectedObservationIndex;
1454
+ const name = obs.name || obs.id || ('Observation ' + (idx + 1));
1455
+ const type = obs.type || 'UNKNOWN';
1456
+ const typeClass = type === 'TOOL' ? 'tool' : 'ai';
1457
+ const history = rerunHistory.get(idx) || [];
1458
+ const latest = history[history.length - 1];
1459
+ const badge = latest
1460
+ ? (latest.running ? ' <span class="rerun-status running">⟳</span>'
1461
+ : latest.ok ? ' <span class="rerun-status success">✓</span>'
1462
+ : ' <span class="rerun-status error">✗</span>')
1463
+ : '';
1464
+ return `<tr class="${isSelected ? 'selected' : ''}" onclick="window.step4SelectObservation(${idx})"><td>${esc(name)}${badge}</td><td><span class="obs-type ${typeClass}">${esc(type)}</span></td><td style="color:#888;font-size:12px;">${formatDuration(computeDurationMs(obs))}</td></tr>`;
1465
+ }).join('');
1466
+ col1 += `</tbody></table></div>`;
1467
+
1468
+ // Column 2: Runs for the selected observation
1469
+ const inFlight = selectedObservationIndex >= 0 && rerunInFlight.has(selectedObservationIndex);
1470
+ let col2 = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
1471
+ <div class="trace-section-title" style="margin-bottom:0">Runs</div>
1472
+ ${selectedObservationIndex >= 0 ? `<button class="btn btn-primary" style="padding:4px 12px;font-size:12px;" onclick="rerunObservation(${selectedObservationIndex})" ${inFlight ? 'disabled' : ''}>${inFlight ? 'Running...' : 'Rerun'}</button>` : ''}
1473
+ </div>`;
1474
+ if (selectedObservationIndex >= 0) {
1475
+ const history = rerunHistory.get(selectedObservationIndex) || [];
1476
+ if (history.length === 0) {
1477
+ col2 += `<div style="color:#999;font-size:13px;padding:8px;">No runs yet. Click Rerun to start.</div>`;
1478
+ } else {
1479
+ col2 += `<div class="observation-table-wrap"><table class="observation-table"><thead><tr><th>Run</th><th>Status</th></tr></thead><tbody>`;
1480
+ col2 += history.map((run, ri) => {
1481
+ const isSelRun = ri === step4SelectedRun;
1482
+ const status = run.running ? '⟳ Running' : (run.ok ? '✓ Complete' : '✗ Failed');
1483
+ return `<tr class="${isSelRun ? 'selected' : ''}" onclick="window.step4SelectRun(${ri})"><td>Run ${run.runNumber}</td><td>${status}</td></tr>`;
1484
+ }).join('');
1485
+ col2 += `</tbody></table></div>`;
1486
+ }
1487
+ } else {
1488
+ col2 += `<div style="color:#999;font-size:13px;padding:8px;">Select a step to view runs.</div>`;
1489
+ }
1490
+
1491
+ // Column 3: Details for the selected run
1492
+ let col3 = '';
1493
+ if (selectedObservationIndex >= 0) {
1494
+ const obs = currentObservations[selectedObservationIndex];
1495
+ const history = rerunHistory.get(selectedObservationIndex) || [];
1496
+ const run = step4SelectedRun >= 0 ? history[step4SelectedRun] : null;
1497
+ const inputText = toDisplayText(obs.input, obs.type);
1498
+ const outputText = toDisplayText(obs.output, obs.type);
1499
+ const detailId = 'step4-detail-' + selectedObservationIndex + '-' + step4SelectedRun;
1500
+ const filePathHtml = obs.type === "GENERATION"
1501
+ ? '<div class="file-path-placeholder"></div>'
1502
+ : renderFilePath(getObsFilePath(obs));
1503
+ let currentOutputSection = '';
1504
+ if (run) {
1505
+ if (run.running) {
1506
+ currentOutputSection = `<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Running...</pre></div>`;
1507
+ } else if (run.ok) {
1508
+ currentOutputSection = `<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">${esc(toDisplayText(run.output, obs.type))}</pre></div>`;
1509
+ } else {
1510
+ currentOutputSection = `<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Rerun failed: ${esc(run.error || 'Unknown error')}</pre></div>`;
1511
+ }
1512
+ }
1513
+ // Editable AI input UI
1514
+ let inputSection = '';
1515
+ if (obs.type === "GENERATION") {
1516
+ const hasUpdate = updatedInputs.has(selectedObservationIndex);
1517
+ inputSection += `<div class="detail-section">
1518
+ <div class="detail-title">Input</div>
1519
+ <pre class="detail-pre" style="position:relative;">${esc(toDisplayText(obs.input, obs.type))}
1520
+ <button class="btn btn-secondary edit-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;${hasUpdate ? 'display:none;' : ''}" onclick="window.enableInputEditing('${detailId}', ${selectedObservationIndex})">Edit</button>
1521
+ <button class="btn btn-secondary reset-btn" style="position:absolute;top:8px;right:8px;padding:2px 10px;font-size:12px;${hasUpdate ? '' : 'display:none;'}" onclick="window.resetInput('${detailId}', ${selectedObservationIndex})">Reset</button>
1522
+ </pre>
1523
+ </div>`;
1524
+ if (hasUpdate) {
1525
+ inputSection += `<div class="detail-section updated-input-section">
1526
+ <div class="detail-title">Update Input</div>
1527
+ <textarea id="editInputTextarea" class="detail-pre" style="width:100%;height:400px;">${esc(updatedInputs.get(selectedObservationIndex))}</textarea>
1528
+ <button class="btn btn-secondary save-btn" style="margin-top:8px;float:right;padding:2px 10px;font-size:12px;" onclick="window.saveUpdatedInput(${selectedObservationIndex})">Save</button>
1529
+ </div>`;
1530
+ }
1531
+ } else {
1532
+ inputSection += `<div class="detail-section"><div class="detail-title">Input</div><pre class="detail-pre">${esc(toDisplayText(obs.input, obs.type))}</pre></div>`;
1533
+ }
1534
+ const _dur4 = computeDurationMs(obs);
1535
+ const currentDurSection = (run && !run.running && run.ok && run.currentDurationMs != null)
1536
+ ? `<div class="detail-section"><div class="detail-title">Current Duration</div><pre class="detail-pre">${formatDuration(run.currentDurationMs)}</pre></div>`
1537
+ : '';
1538
+ const currentUsageSection = (run && !run.running && run.ok && run.currentUsage && run.currentUsage.totalTokens > 0)
1539
+ ? `<div class="detail-section"><div class="detail-title">Current Usage</div><pre class="detail-pre">${[
1540
+ run.currentUsage.inputTokens != null ? 'Input tokens: ' + run.currentUsage.inputTokens : null,
1541
+ run.currentUsage.outputTokens != null ? 'Output tokens: ' + run.currentUsage.outputTokens : null,
1542
+ run.currentUsage.totalTokens != null ? 'Total tokens: ' + run.currentUsage.totalTokens : null,
1543
+ ].filter(Boolean).join('\n')}</pre></div>`
1544
+ : '';
1545
+ col3 = `<div class="detail-sections" id="${detailId}">
1546
+ ${filePathHtml}
1547
+ ${renderModel(obs)}
1548
+ ${_dur4 != null ? `<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">${formatDuration(_dur4)}</pre></div>` : ''}
1549
+ ${currentDurSection}
1550
+ ${renderUsage(obs)}
1551
+ ${currentUsageSection}
1552
+ ${inputSection}
1553
+ <div class="detail-section"><div class="detail-title">Output</div><pre class="detail-pre">${esc(outputText)}</pre></div>
1554
+ ${currentOutputSection}
1555
+ </div>`;
1556
+ if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
1557
+ }
1558
+
1559
+ traceLayout.innerHTML = `
1560
+ <div class="trace-left">${col1}</div>
1561
+ <div class="trace-left">${col2}</div>
1562
+ <div class="trace-right">${col3}</div>
1563
+ `;
1564
+ // Auto-select first observation if none selected
1565
+ if (obsIndices.length > 0 && selectedObservationIndex === -1) {
1566
+ window.step4SelectObservation(obsIndices[0]);
1567
+ }
1568
+ return;
1569
+ }
1570
+
1571
+ const traceLayoutEl = document.getElementsByClassName("trace-layout")[0];
1572
+ if (traceLayoutEl.classList.contains("step-5") || traceLayoutEl.classList.contains("step-4")) {
1573
+ traceLayoutEl.classList.remove("step-5");
1574
+ traceLayoutEl.classList.remove("step-4");
1575
+ let headerHtml = '';
1576
+ if (currentStep === 3) {
1577
+ headerHtml = '<tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th>Duration</th></tr>';
1578
+ }
1579
+ traceLayoutEl.innerHTML = `
1580
+ <div class="trace-left">
1581
+ <div class="trace-section-title">Observations</div>
1582
+ <div class="observation-table-wrap">
1583
+ <table class="observation-table">
1584
+ <thead id="observationTableHead">${headerHtml}</thead>
1585
+ <tbody id="observationTableBody"></tbody>
1586
+ </table>
1587
+ </div>
1588
+ </div>
1589
+ <div class="trace-right">
1590
+ <div id="observationDetail"></div>
1591
+ </div>
1592
+ `;
1593
+ observationTableBody = document.getElementById("observationTableBody");
1594
+ observationDetail = document.getElementById("observationDetail");
1595
+ }
1596
+
1597
+ const obsToRender = currentObservations;
1598
+ const indices = currentObservations.map((_, i) => i);
1599
+
1600
+ if (!obsToRender.length) {
1601
+ observationTableBody.innerHTML = '<tr><td colspan="3" style="padding: 16px; color: #777;">No observations found.</td></tr>';
1602
+ return;
1603
+ }
1604
+
1605
+ observationTableBody.innerHTML = obsToRender.map((obs, displayIndex) => {
1606
+ const actualIndex = indices[displayIndex];
1607
+ const isSelected = actualIndex === selectedObservationIndex;
1608
+ const isChecked = checkedObservations.has(actualIndex);
1609
+ const name = obs.name || obs.id || ("Observation " + (displayIndex + 1));
1610
+ const type = obs.type || "UNKNOWN";
1611
+ const typeClass = type === "TOOL" ? "tool" : "ai";
1612
+ // Step 3: Mark broken - show checkboxes
1613
+ return `<tr class="${isSelected ? "selected" : ""}">
1614
+ <td style="width: 40px;"><input type="checkbox" class="obs-checkbox" value="${actualIndex}" ${isChecked ? "checked" : ""}></td>
1615
+ <td onclick="selectObservation(${actualIndex})">${esc(name)}</td>
1616
+ <td><span class="obs-type ${typeClass}">${esc(type)}</span></td>
1617
+ <td style="color:#888;font-size:12px;">${formatDuration(computeDurationMs(obs))}</td>
1618
+ </tr>`;
1619
+ }).join("");
1620
+
1621
+ document.querySelectorAll(".obs-checkbox").forEach(checkbox => {
1622
+ checkbox.onchange = (e) => {
1623
+ const idx = parseInt(e.target.value);
1624
+ if (e.target.checked) {
1625
+ checkedObservations.add(idx);
1626
+ } else {
1627
+ checkedObservations.delete(idx);
1628
+ }
1629
+ };
1630
+ });
1631
+ // Restore scroll position if previously saved
1632
+ if (currentStep === 5 && prevStep5ObsScrollTop !== null) {
1633
+ // After rendering, restore scroll for the observations table in the second .trace-left
1634
+ const traceLefts = document.querySelectorAll('.trace-left');
1635
+ if (traceLefts.length > 1) {
1636
+ const obsWrap = traceLefts[1].querySelector('.observation-table-wrap');
1637
+ if (obsWrap) obsWrap.scrollTop = prevStep5ObsScrollTop;
1638
+ }
1639
+ } else {
1640
+ obsTableWrap = document.querySelector('.observation-table-wrap');
1641
+ if (obsTableWrap && prevScrollTop !== null) {
1642
+ obsTableWrap.scrollTop = prevScrollTop;
1643
+ }
1644
+ }
1645
+ }
1646
+
1647
+ function selectObservation(index) {
1648
+ // Preserve scroll position of observation-table-wrap
1649
+ let obsTableWrap = document.querySelector('.observation-table-wrap');
1650
+ let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
1651
+ selectedObservationIndex = index;
1652
+ renderObservationTable();
1653
+ // Restore scroll position after rendering
1654
+ obsTableWrap = document.querySelector('.observation-table-wrap');
1655
+ if (obsTableWrap && prevScrollTop !== null) {
1656
+ obsTableWrap.scrollTop = prevScrollTop;
1657
+ }
1658
+ const obs = currentObservations[index];
1659
+ const inputText = toDisplayText(obs.input, obs.type);
1660
+ const outputText = toDisplayText(obs.output, obs.type);
1661
+ const detailId = 'obs-detail-' + index;
1662
+ const filePathHtml = obs.type === "GENERATION"
1663
+ ? '<div class="file-path-placeholder"></div>'
1664
+ : renderFilePath(getObsFilePath(obs));
1665
+
1666
+ const _dur3 = computeDurationMs(obs);
1667
+ observationDetail.innerHTML = `<div class="detail-sections" id="${detailId}">
1668
+ ${filePathHtml}
1669
+ ${renderModel(obs)}
1670
+ ${_dur3 != null ? `<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">${formatDuration(_dur3)}</pre></div>` : ''}
1671
+ ${renderUsage(obs)}
1672
+ <div class="detail-section">
1673
+ <div class="detail-title">Input</div>
1674
+ <pre class="detail-pre">${esc(inputText)}</pre>
1675
+ </div>
1676
+ <div class="detail-section">
1677
+ <div class="detail-title">Output</div>
1678
+ <pre class="detail-pre">${esc(outputText)}</pre>
1679
+ </div>
1680
+ </div>`;
1681
+ if (obs.type === "GENERATION") resolveGenFilePath(obs, detailId);
1682
+ }
1683
+
1684
+ async function rerunObservation(index) {
1685
+ const obs = currentObservations[index];
1686
+ let inputToUse = obs.input;
1687
+ if (obs.type === "GENERATION" && updatedInputs.has(index)) {
1688
+ inputToUse = updatedInputs.get(index);
1689
+ }
1690
+ // Proceed with rerun logic using inputToUse
1691
+ console.log('Rerunning observation with input:', inputToUse);
1692
+ const history = rerunHistory.get(index) || [];
1693
+ const newRun = { runNumber: history.length + 1, running: true, ok: null };
1694
+ history.push(newRun);
1695
+ rerunHistory.set(index, history);
1696
+ rerunInFlight.add(index);
1697
+ if (selectedObservationIndex === index) {
1698
+ step4SelectedRun = history.length - 1;
1699
+ }
1700
+ renderObservationTable();
1701
+ try {
1702
+ const payload = { observation: { ...obs, input: inputToUse } };
1703
+ const response = await fetch('/api/rerun-observation', {
1704
+ method: 'POST',
1705
+ headers: { 'Content-Type': 'application/json' },
1706
+ body: JSON.stringify(payload),
1707
+ });
1708
+ const data = await response.json();
1709
+ newRun.running = false;
1710
+ if (response.ok && data.ok) {
1711
+ newRun.ok = true;
1712
+ newRun.output = data.currentOutput;
1713
+ newRun.currentDurationMs = data.currentDurationMs ?? null;
1714
+ newRun.currentUsage = data.currentUsage ?? null;
1715
+ } else {
1716
+ newRun.ok = false;
1717
+ newRun.error = data.error || 'Rerun failed.';
1718
+ }
1719
+ } catch (err) {
1720
+ newRun.running = false;
1721
+ newRun.ok = false;
1722
+ newRun.error = err && err.message ? err.message : String(err);
1723
+ } finally {
1724
+ rerunInFlight.delete(index);
1725
+ renderObservationTable();
1726
+ }
1727
+ }
1728
+
1729
+ async function runFromBreakpoint(traceIdx, obsIdx, evt) {
1730
+ const btn = evt.target;
1731
+ const liveTrace = step5RunTraces[traceIdx];
1732
+ if (!liveTrace) return;
1733
+ const obs = liveTrace.observations[obsIdx];
1734
+ if (!obs || obs.workflowEventId == null) return;
1735
+
1736
+ btn.disabled = true;
1737
+ btn.textContent = 'Running…';
1738
+
1739
+ try {
1740
+ const payload = {
1741
+ workflowName: selectedWorkflow ? selectedWorkflow.name : '',
1742
+ checkpoint: obs.workflowEventId,
1743
+ snapshotId: liveTrace.snapshotId,
1744
+ observations: currentObservations,
1745
+ toolMockConfig: window._toolMockConfig || {},
1746
+ promptMockConfig: window._promptMockConfig || {},
1747
+ userPromptMockConfig: window._userPromptMockConfig || {},
1748
+ };
1749
+ const response = await fetch('/api/run-from-breakpoint', {
1750
+ method: 'POST',
1751
+ headers: { 'Content-Type': 'application/json' },
1752
+ body: JSON.stringify(payload),
1753
+ });
1754
+ const data = await response.json();
1755
+ if (response.ok) {
1756
+ // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
1757
+ const parentTraceName = liveTrace.traceName ?? `Trace-${traceIdx + 1}`;
1758
+ const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
1759
+ const traceName = `${parentTraceName}-${siblingCount + 1}`;
1760
+ const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
1761
+ step5RunTraces.push(newTrace);
1762
+ persistTraces();
1763
+ renderObservationTable();
1764
+ } else {
1765
+ btn.textContent = '✗ ' + (data.error || 'Failed');
1766
+ btn.disabled = false;
1767
+ }
1768
+ } catch (err) {
1769
+ btn.textContent = '✗ Error';
1770
+ btn.disabled = false;
1771
+ }
1772
+ }
1773
+
1774
+ async function rerunFullFlow(btn) {
1775
+ if (step5RerunInFlight || step5RunMeta.loading) return;
1776
+ step5RerunInFlight = true;
1777
+ renderObservationTable();
1778
+ try {
1779
+ const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig: window._toolMockConfig || {}, promptMockConfig: window._promptMockConfig || {}, userPromptMockConfig: window._userPromptMockConfig || {} };
1780
+ const response = await fetch('/api/validate-workflow', {
1781
+ method: 'POST',
1782
+ headers: { 'Content-Type': 'application/json' },
1783
+ body: JSON.stringify(payload),
1784
+ });
1785
+ const data = await response.json();
1786
+ if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
1787
+ const newTrace = { ...data.traces[0], runNumber: step5RunTraces.length + 1 };
1788
+ step5RunTraces.push(newTrace);
1789
+ persistTraces();
1790
+ window.step5SelectedTrace = step5RunTraces.length;
1791
+ window.step5SelectedObservation = 0;
1792
+ }
1793
+ } catch (err) {
1794
+ // silently ignore — dashboard may not be connected
1795
+ } finally {
1796
+ step5RerunInFlight = false;
1797
+ renderObservationTable();
1798
+ }
1799
+ }
1800
+
1801
+ async function resumeAgentFromTask(traceIdx, obsIdx, taskIndex, evt) {
1802
+ const btn = evt.target;
1803
+ const liveTrace = step5RunTraces[traceIdx];
1804
+ if (!liveTrace) return;
1805
+
1806
+ // Extract AgentPlan from the workflow's currentOutput
1807
+ const currentOutput = liveTrace.currentOutput;
1808
+ const agentPlan = currentOutput && typeof currentOutput === 'object' && Array.isArray(currentOutput.tasks)
1809
+ ? currentOutput
1810
+ : null;
1811
+ if (!agentPlan) {
1812
+ alert('No agent plan found in this trace. Ensure the workflow returns an AgentPlan from executorAgent() or resumeAgentFromTrace().');
1813
+ return;
1814
+ }
1815
+
1816
+ btn.disabled = true;
1817
+ btn.textContent = 'Resuming…';
1818
+
1819
+ try {
1820
+ const payload = {
1821
+ workflowName: selectedWorkflow ? selectedWorkflow.name : '',
1822
+ taskIndex: taskIndex,
1823
+ agentState: {
1824
+ plan: agentPlan,
1825
+ trace: [],
1826
+ resumeFromTaskIndex: taskIndex,
1827
+ },
1828
+ snapshotId: liveTrace.snapshotId,
1829
+ toolMockConfig: window._toolMockConfig || {},
1830
+ promptMockConfig: window._promptMockConfig || {},
1831
+ userPromptMockConfig: window._userPromptMockConfig || {},
1832
+ };
1833
+ const response = await fetch('/api/resume-agent-from-task', {
1834
+ method: 'POST',
1835
+ headers: { 'Content-Type': 'application/json' },
1836
+ body: JSON.stringify(payload),
1837
+ });
1838
+ const data = await response.json();
1839
+ if (response.ok) {
1840
+ // Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
1841
+ const parentTraceName = liveTrace.traceName ?? `Trace-${traceIdx + 1}`;
1842
+ const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
1843
+ const traceName = `${parentTraceName}-${siblingCount + 1}`;
1844
+ const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
1845
+ step5RunTraces.push(newTrace);
1846
+ persistTraces();
1847
+ renderObservationTable();
1848
+ } else {
1849
+ btn.textContent = '✗ ' + (data.error || 'Failed');
1850
+ btn.disabled = false;
1851
+ }
1852
+ } catch (err) {
1853
+ btn.textContent = '✗ Error';
1854
+ btn.disabled = false;
1855
+ }
1856
+ }
1857
+
1858
+ window.enableInputEditing = function(detailId, index) {
1859
+ const obs = currentObservations[index];
1860
+ const current = updatedInputs.has(index)
1861
+ ? updatedInputs.get(index)
1862
+ : toDisplayText(obs.input, obs.type);
1863
+ updatedInputs.set(index, current);
1864
+ renderObservationTable();
1865
+ };
1866
+
1867
+ window.resetInput = function(detailId, index) {
1868
+ updatedInputs.delete(index);
1869
+ renderObservationTable();
1870
+ };
1871
+
1872
+ window.saveUpdatedInput = function(index) {
1873
+ const ta = document.getElementById('editInputTextarea');
1874
+ if (!ta) return;
1875
+ updatedInputs.set(index, ta.value);
1876
+ renderObservationTable();
1877
+ };
1878
+
1879
+ function getObsFilePath(obs) {
1880
+ if (obs && obs.type === "TOOL") {
1881
+ const tool = codeIndex.tools.find(t => t.name === obs.name);
1882
+ if (tool) return tool.lineNumber ? tool.filePath + ':' + tool.lineNumber : tool.filePath;
1883
+ }
1884
+ return null;
1885
+ }
1886
+
1887
+ function extractSystemPrompt(obs) {
1888
+ if (!obs || obs.type !== "GENERATION") return null;
1889
+ let input = obs.input;
1890
+ // Parse input if it's a JSON string
1891
+ if (
1892
+ typeof input === 'string' &&
1893
+ (input.startsWith('{') || input.startsWith('[')) &&
1894
+ (input.endsWith('}') || input.endsWith(']'))
1895
+ ) {
1896
+ try {
1897
+ input = JSON.parse(input);
1898
+ } catch { /* not JSON */ }
1899
+ }
1900
+ const messages = Array.isArray(input) ? input
1901
+ : (input && Array.isArray(input.messages)) ? input.messages : [];
1902
+ const sys = messages.find(m => m && m.role === "system");
1903
+ if (!sys || !sys.content) return null;
1904
+ return String(sys.content).trim();
1905
+ }
1906
+
1907
+ function getSearchFragments(systemPrompt) {
1908
+ if (!systemPrompt || systemPrompt.length < 10) return [];
1909
+ const fragments = [];
1910
+
1911
+ // 1. First sentence (often unique: "You are an expert SQL generator...")
1912
+ const firstSentence = systemPrompt.split(/[.!?]\n/)[0].trim();
1913
+ if (firstSentence.length >= 20 && firstSentence.length <= 100) {
1914
+ fragments.push(firstSentence);
1915
+ }
1916
+
1917
+ // 2. First 50 chars
1918
+ if (systemPrompt.length >= 40) {
1919
+ fragments.push(systemPrompt.slice(0, 50).trim());
1920
+ }
1921
+
1922
+ // 3. First 80 chars (if different from above)
1923
+ if (systemPrompt.length >= 80) {
1924
+ const fragment80 = systemPrompt.slice(0, 80).trim();
1925
+ if (!fragments.some(f => fragment80.startsWith(f))) {
1926
+ fragments.push(fragment80);
1927
+ }
1928
+ }
1929
+
1930
+ // 4. Try to find a unique phrase after common prefixes
1931
+ const afterYouAre = systemPrompt.match(/You are (?:an? )?([^.\n]{15,60})/);
1932
+ if (afterYouAre && afterYouAre[1]) {
1933
+ fragments.push(afterYouAre[1].trim());
1934
+ }
1935
+
1936
+ return fragments.filter(f => f.length >= 15);
1937
+ }
1938
+
1939
+ async function resolveGenFilePath(obs, containerId) {
1940
+ const systemPrompt = extractSystemPrompt(obs);
1941
+ if (!systemPrompt) return;
1942
+
1943
+ const fragments = getSearchFragments(systemPrompt);
1944
+ if (fragments.length === 0) return;
1945
+
1946
+ try {
1947
+ // Try each fragment until we find a match
1948
+ for (const fragment of fragments) {
1949
+ const res = await fetch('/api/search-source?q=' + encodeURIComponent(fragment));
1950
+ const data = await res.json();
1951
+ if (data.filePath) {
1952
+ const label = data.lineNumber ? data.filePath + ':' + data.lineNumber : data.filePath;
1953
+ const container = document.getElementById(containerId);
1954
+ if (!container) return;
1955
+ const placeholder = container.querySelector('.file-path-placeholder');
1956
+ if (placeholder) placeholder.outerHTML = renderFilePath(label);
1957
+ return; // Success, stop trying
1958
+ }
1959
+ }
1960
+ } catch { /* ignore network errors */ }
1961
+ }
1962
+
1963
+ function stripAbsolutePath(filePath) {
1964
+ console.log('stripAbsolutePath called with:', filePath, 'repoRoot:', repoRoot);
1965
+ if (!filePath) return filePath;
1966
+
1967
+ // If we have a repo root, strip it from the absolute path
1968
+ if (repoRoot) {
1969
+ // Normalize path separators and handle case-insensitive filesystems
1970
+ let normalizedRoot = repoRoot.replace(/\\/g, '/').toLowerCase();
1971
+ let normalizedPath = filePath.replace(/\\/g, '/').toLowerCase();
1972
+
1973
+ // Ensure root ends with / for proper matching
1974
+ if (!normalizedRoot.endsWith('/')) {
1975
+ normalizedRoot += '/';
1976
+ }
1977
+
1978
+ if (normalizedPath.startsWith(normalizedRoot)) {
1979
+ // Return the original case of the file path after the root
1980
+ return filePath.replace(/\\/g, '/').substring(repoRoot.length).replace(/^\//, '');
1981
+ }
1982
+
1983
+ // Also try without trailing slash
1984
+ normalizedRoot = normalizedRoot.slice(0, -1);
1985
+ if (normalizedPath.startsWith(normalizedRoot + '/')) {
1986
+ return filePath.replace(/\\/g, '/').substring(repoRoot.length).replace(/^\//, '');
1987
+ }
1988
+ }
1989
+
1990
+ // Fallback if repo root not available or path doesn't match
1991
+ return filePath;
1992
+ }
1993
+
1994
+ function renderFilePath(filePath) {
1995
+ if (!filePath) return '';
1996
+ const cleanPath = stripAbsolutePath(filePath);
1997
+ return `<div class="detail-section">
1998
+ <div class="detail-title">File Path</div>
1999
+ <pre class="detail-pre">${esc(cleanPath)}</pre>
2000
+ </div>`;
2001
+ }
2002
+
2003
+ function renderModel(obs) {
2004
+ if (!obs || obs.type !== "GENERATION" || !obs.model) return '';
2005
+ let label = obs.model;
2006
+ if (obs.modelParameters) {
2007
+ const parts = [];
2008
+ if (obs.modelParameters.temperature != null) parts.push('temp=' + obs.modelParameters.temperature);
2009
+ if (obs.modelParameters.max_tokens != null) parts.push('max_tokens=' + obs.modelParameters.max_tokens);
2010
+ if (parts.length) label += ' (' + parts.join(', ') + ')';
2011
+ }
2012
+ return `<div class="detail-section">
2013
+ <div class="detail-title">Model</div>
2014
+ <pre class="detail-pre">${esc(label)}</pre>
2015
+ </div>`;
2016
+ }
2017
+
2018
+ function stripMarkdownCodeFence(text) {
2019
+ // Remove markdown code fences like ```sql, ```json, ```, etc.
2020
+ return text.replace(/^```[\w]*\n?/gm, '').replace(/\n?```$/gm, '').trim();
2021
+ }
2022
+
2023
+ function toDisplayText(value, type) {
2024
+ if (value === null || value === undefined || value === "") {
2025
+ return "No data";
2026
+ }
2027
+
2028
+ // If it's a string, try to parse it first (might be JSON)
2029
+ if (typeof value === "string") {
2030
+ if (value.startsWith('[') || value.startsWith('{')) {
2031
+ try {
2032
+ const parsed = JSON.parse(value);
2033
+ value = parsed; // Use parsed version for further processing
2034
+ } catch {
2035
+ // Not JSON, strip markdown and return
2036
+ return stripMarkdownCodeFence(value);
2037
+ }
2038
+ } else {
2039
+ return stripMarkdownCodeFence(value);
2040
+ }
2041
+ }
2042
+
2043
+ // GENERATION input: raw messages array
2044
+ if (type === "GENERATION" && Array.isArray(value)) {
2045
+ return JSON.stringify(value, null, 2);
2046
+ }
2047
+
2048
+ // GENERATION input wrapped in {messages:[...]} (legacy / Langfuse format)
2049
+ if (type === "GENERATION" && value.messages) {
2050
+ return JSON.stringify(value.messages, null, 2);
2051
+ }
2052
+
2053
+ // GENERATION output: assistant message object
2054
+ if (type === "GENERATION" && value.role) {
2055
+ const parts = [];
2056
+ // Text content
2057
+ if (value.content && typeof value.content === 'string') {
2058
+ parts.push(stripMarkdownCodeFence(value.content));
2059
+ } else if (Array.isArray(value.content)) {
2060
+ // Anthropic / Gemini content block array
2061
+ const text = value.content
2062
+ .filter(b => b && (b.type === 'text' || b.text))
2063
+ .map(b => b.text || b.value || '')
2064
+ .join('');
2065
+ if (text) parts.push(stripMarkdownCodeFence(text));
2066
+ // Anthropic tool_use blocks
2067
+ const toolUses = value.content.filter(b => b && b.type === 'tool_use');
2068
+ if (toolUses.length) parts.push('Tool calls:\n' + JSON.stringify(toolUses, null, 2));
2069
+ } else if (value.parts && Array.isArray(value.parts)) {
2070
+ // Gemini parts array
2071
+ const text = value.parts.filter(p => p.text).map(p => p.text).join('');
2072
+ if (text) parts.push(stripMarkdownCodeFence(text));
2073
+ const fnCalls = value.parts.filter(p => p.functionCall);
2074
+ if (fnCalls.length) parts.push('Function calls:\n' + JSON.stringify(fnCalls, null, 2));
2075
+ }
2076
+ // OpenAI tool_calls array
2077
+ if (Array.isArray(value.tool_calls) && value.tool_calls.length) {
2078
+ parts.push('Tool calls:\n' + JSON.stringify(value.tool_calls, null, 2));
2079
+ }
2080
+ return parts.length ? parts.join('\n\n') : 'No content';
2081
+ }
2082
+
2083
+ // For other objects, stringify them
2084
+ try {
2085
+ return JSON.stringify(value, null, 2);
2086
+ } catch {
2087
+ return String(value);
2088
+ }
2089
+ }
2090
+
2091
+ function resetTraceModal() {
2092
+ uploadArea.classList.remove("hidden");
2093
+ traceViewer.classList.remove("visible");
2094
+ let customFooter = document.getElementById("step5FooterBtns");
2095
+ if (customFooter) customFooter.remove();
2096
+ uploadStatus.className = "upload-status";
2097
+ uploadStatus.textContent = "";
2098
+ fileInput.value = "";
2099
+ currentObservations = [];
2100
+ selectedObservationIndex = -1;
2101
+ checkedObservations.clear();
2102
+ rerunHistory.clear();
2103
+ rerunInFlight.clear();
2104
+ step4SelectedRun = -1;
2105
+ step5RunTraces = [];
2106
+ localStorage.removeItem('ed_step5RunTraces');
2107
+ step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
2108
+ observationTableBody.innerHTML = "";
2109
+ observationDetail.innerHTML = "";
2110
+ currentStep = 0;
2111
+ updateModalTitle();
2112
+ }
2113
+
2114
+ function updateModalTitle() {
2115
+ const titles = {
2116
+ 0: "Step 2: Import Failed Trace",
2117
+ 3: "Step 3: Mark broken step",
2118
+ 4: "Step 4: Validate your Fixes",
2119
+ 5: "Step 5: Validate Updated Flow with Live Data"
2120
+ };
2121
+ modalTitle.textContent = titles[currentStep] || "Step 2: Import Failed Trace";
2122
+ }
2123
+
2124
+ function updateFooterButtons() {
2125
+ const changeBtn = document.getElementById("changeTraceBtn");
2126
+ const nextBtn = document.getElementById("nextBtn");
2127
+
2128
+ if (currentStep <= 2) {
2129
+ changeBtn.textContent = "Change Workflow Function";
2130
+ nextBtn.textContent = "Next";
2131
+ nextBtn.disabled = true;
2132
+ } else if (currentStep === 3) {
2133
+ changeBtn.textContent = "Change Trace File";
2134
+ nextBtn.textContent = "Next";
2135
+ nextBtn.disabled = false;
2136
+ } else if (currentStep === 4) {
2137
+ changeBtn.textContent = "Select Different Steps";
2138
+ nextBtn.textContent = "Fix Works as Expected";
2139
+ nextBtn.disabled = false;
2140
+ } else if (currentStep === 5) {
2141
+ // Step 5 - show custom buttons
2142
+ changeBtn.textContent = "Still Failing";
2143
+ nextBtn.textContent = "Done";
2144
+ } else {
2145
+ let customFooter = document.getElementById("step5FooterBtns");
2146
+ if (customFooter) customFooter.remove();
2147
+ }
2148
+ }
2149
+
2150
+ fetch("/api/repo-root").then(r => r.json()).then(d => {
2151
+ console.log("[Dashboard] Repo root fetched:", d);
2152
+ repoRoot = d.repoRoot || '';
2153
+ console.log("[Dashboard] repoRoot set to:", repoRoot);
2154
+
2155
+ // Now fetch workflows after repo root is loaded
2156
+ return fetch("/api/workflows");
2157
+ }).then(r => r.json()).then(d => {
2158
+ console.log("[Dashboard] Workflows fetched:", d);
2159
+ allWorkflows = d.workflows || [];
2160
+ console.log("[Dashboard] Calling render with", allWorkflows.length, "workflows");
2161
+ render();
2162
+ }).catch(err => {
2163
+ console.error("Failed to fetch repo root or workflows:", err);
2164
+ tbody.innerHTML = '<tr><td colspan="2" style="text-align: center; padding: 40px; color: #c62828;">Error loading workflows</td></tr>';
2165
+ });
2166
+
2167
+ fetch("/api/code-index").then(r => r.json()).then(d => {
2168
+ codeIndex = d;
2169
+ console.log("Code index:", d);
2170
+ }).catch(err => {
2171
+ console.error("Failed to fetch code index:", err);
2172
+ });
2173
+
2174
+ function render(search = "") {
2175
+ console.log("[Dashboard] render() called with search:", search, "workflows:", allWorkflows.length);
2176
+ const filtered = search ? allWorkflows.filter(w =>
2177
+ w.name.toLowerCase().includes(search.toLowerCase()) ||
2178
+ w.filePath.toLowerCase().includes(search.toLowerCase())
2179
+ ) : allWorkflows;
2180
+ countEl.textContent = filtered.length;
2181
+ console.log("[Dashboard] Rendering", filtered.length, "workflows");
2182
+ tbody.innerHTML = filtered.length ? filtered.map((w, i) => `<tr onclick="showModal(${i},'${search}')">
2183
+ <td><div class="workflow-name-cell">${esc(w.name)}${w.isAsync ? '<span class="async-badge">async</span>' : ""}</div></td>
2184
+ <td><div class="workflow-path-cell">${esc(stripAbsolutePath(w.filePath))}</div></td>
2185
+ </tr>`).join("") : `<tr><td colspan="2" style="text-align: center; padding: 40px; color: #999;">No workflows found</td></tr>`;
2186
+ console.log("[Dashboard] tbody updated");
2187
+ }
2188
+
2189
+ function showModal(index, search) {
2190
+ const filtered = search ? allWorkflows.filter(w =>
2191
+ w.name.toLowerCase().includes(search.toLowerCase()) ||
2192
+ w.filePath.toLowerCase().includes(search.toLowerCase())
2193
+ ) : allWorkflows;
2194
+ selectedWorkflow = filtered[index];
2195
+ modal.classList.add("open");
2196
+ resetTraceModal();
2197
+ updateFooterButtons();
2198
+ }
2199
+
2200
+ window.showModal = showModal;
2201
+ window.selectObservation = selectObservation;
2202
+ window.step4SelectObservation = function(idx) {
2203
+ selectedObservationIndex = idx;
2204
+ const history = rerunHistory.get(idx) || [];
2205
+ step4SelectedRun = history.length > 0 ? history.length - 1 : -1;
2206
+ renderObservationTable();
2207
+ };
2208
+ window.step4SelectRun = function(ri) {
2209
+ step4SelectedRun = ri;
2210
+ renderObservationTable();
2211
+ };
2212
+ function esc(t) { const d = document.createElement("div"); d.textContent = t; return d.innerHTML; }
2213
+ window.esc = esc;
2214
+
2215
+ document.getElementById("searchInput").oninput = (e) => render(e.target.value);
2216
+ </script>
2217
+ </body>
2218
+ </html>