elasticdash-test 0.1.13 → 0.1.14
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.
package/dist/dashboard-server.js
CHANGED
|
@@ -2,7 +2,7 @@ import http from 'node:http';
|
|
|
2
2
|
import path from 'node:path';
|
|
3
3
|
import { existsSync, readFileSync, readdirSync, statSync, writeFileSync, mkdirSync, rmSync } from 'node:fs';
|
|
4
4
|
import { spawn } from 'node:child_process';
|
|
5
|
-
import { pathToFileURL
|
|
5
|
+
import { pathToFileURL } from 'url';
|
|
6
6
|
import { randomUUID } from 'node:crypto';
|
|
7
7
|
import { callProviderLLM } from './matchers/index.js';
|
|
8
8
|
import chokidar from 'chokidar';
|
|
@@ -952,8 +952,1788 @@ function openBrowser(url) {
|
|
|
952
952
|
*/
|
|
953
953
|
function getDashboardHtml() {
|
|
954
954
|
/* DASHBOARD_HTML_START */
|
|
955
|
-
|
|
956
|
-
|
|
955
|
+
return `<!DOCTYPE html>
|
|
956
|
+
<html lang="en">
|
|
957
|
+
<head>
|
|
958
|
+
<meta charset="UTF-8">
|
|
959
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
960
|
+
<title>ElasticDash Dashboard</title>
|
|
961
|
+
<style>
|
|
962
|
+
/* Ensure first cell in observation-table never overflows parent */
|
|
963
|
+
.observation-table td:first-child {
|
|
964
|
+
max-width: 120px;
|
|
965
|
+
overflow: auto;
|
|
966
|
+
white-space: nowrap;
|
|
967
|
+
}
|
|
968
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
969
|
+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }
|
|
970
|
+
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
|
971
|
+
header { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
|
972
|
+
h1 { font-size: 28px; margin-bottom: 8px; color: #1a1a1a; }
|
|
973
|
+
.subtitle { font-size: 14px; color: #666; margin-bottom: 16px; }
|
|
974
|
+
.search-box { display: flex; gap: 10px; }
|
|
975
|
+
input[type="text"] { flex: 1; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
|
|
976
|
+
input[type="text"]:focus { outline: none; border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); }
|
|
977
|
+
.result-count { padding: 10px 12px; background: #f0f0f0; border-radius: 6px; font-size: 14px; color: #666; }
|
|
978
|
+
.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; }
|
|
979
|
+
.workflows-table { width: 100%; border-collapse: collapse; }
|
|
980
|
+
.workflows-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 10; }
|
|
981
|
+
.workflows-table th { padding: 12px 16px; text-align: left; font-weight: 600; font-size: 13px; color: #333; border-bottom: 2px solid #ddd; }
|
|
982
|
+
.workflows-table td { padding: 12px 16px; border-bottom: 1px solid #eee; }
|
|
983
|
+
.workflows-table tbody tr { cursor: pointer; transition: background-color 0.2s; }
|
|
984
|
+
.workflows-table tbody tr:hover { background-color: #f9f9f9; }
|
|
985
|
+
.workflow-name-cell { font-family: Monaco, monospace; font-weight: 600; color: #0066cc; }
|
|
986
|
+
.workflow-path-cell { font-family: Monaco, monospace; font-size: 12px; color: #666; }
|
|
987
|
+
.async-badge { display: inline-block; background: #e8f3ff; color: #0066cc; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-left: 8px; }
|
|
988
|
+
.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; }
|
|
989
|
+
.modal.open { display: flex; }
|
|
990
|
+
.modal-content { background: white; border-radius: 12px; width: 92%; max-width: 1100px; max-height: 90vh; overflow-y: auto; padding: 30px; }
|
|
991
|
+
.modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
|
|
992
|
+
.modal-title { font-size: 20px; font-weight: 600; }
|
|
993
|
+
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #999; }
|
|
994
|
+
.upload-area { border: 2px dashed #ddd; border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; background: #fafafa; overflow: hidden; height: 520px; position: relative; }
|
|
995
|
+
.upload-area:hover { border-color: #0066cc; background: #f0f7ff; }
|
|
996
|
+
.upload-area > div {
|
|
997
|
+
position: absolute;
|
|
998
|
+
top: 50%;
|
|
999
|
+
left: 50%;
|
|
1000
|
+
transform: translate(-50%, -50%);
|
|
1001
|
+
}
|
|
1002
|
+
.upload-icon { font-size: 32px; margin-bottom: 12px; }
|
|
1003
|
+
input[type="file"] { display: none; }
|
|
1004
|
+
.upload-status { margin-top: 20px; padding: 12px; border-radius: 6px; display: none; }
|
|
1005
|
+
.upload-status.success { display: block; background: #e8f5e9; color: #2e7d32; }
|
|
1006
|
+
.upload-status.error { display: block; background: #ffebee; color: #c62828; }
|
|
1007
|
+
.hidden { display: none !important; }
|
|
1008
|
+
.trace-viewer { display: none; margin-top: 20px; }
|
|
1009
|
+
.trace-viewer.visible { display: block; }
|
|
1010
|
+
.trace-layout { display: grid; grid-template-columns: 40% calc(60% - 16px); gap: 16px; overflow: auto; height: 520px; }
|
|
1011
|
+
.trace-layout.step-5 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
|
|
1012
|
+
.trace-layout.step-4 { display: grid; grid-template-columns: calc(30% - 16px) calc(30% - 16px) 40%; gap: 16px; overflow: auto; height: 520px; }
|
|
1013
|
+
.trace-left, .trace-right { background: #f9f9f9; border-radius: 8px; padding: 14px; border: 1px solid #eee; }
|
|
1014
|
+
.trace-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
|
|
1015
|
+
.observation-table-wrap { max-height: 460px; overflow: auto; background: white; border-radius: 6px; border: 1px solid #eee; }
|
|
1016
|
+
.observation-table { width: 100%; border-collapse: collapse; }
|
|
1017
|
+
.observation-table thead { background: #f5f5f5; position: sticky; top: 0; z-index: 1; }
|
|
1018
|
+
.observation-table th { text-align: left; font-size: 12px; font-weight: 600; color: #555; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; }
|
|
1019
|
+
.observation-table td { font-size: 13px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
|
|
1020
|
+
.observation-table tbody tr { cursor: pointer; }
|
|
1021
|
+
.observation-table tbody tr:hover { background: #f7fbff; }
|
|
1022
|
+
.observation-table tbody tr.selected { background: #e8f3ff; }
|
|
1023
|
+
.obs-type { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; background: #e6e6e6; color: #333; }
|
|
1024
|
+
.obs-type.tool { background: #e8f7ef; color: #1f7a44; }
|
|
1025
|
+
.obs-type.ai { background: #e8f1ff; color: #1f5fbf; }
|
|
1026
|
+
.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; }
|
|
1027
|
+
.run-from-bp-btn:hover { background: #e0edff; border-color: #5a8fd8; color: #1f5fbf; }
|
|
1028
|
+
.run-from-bp-btn:disabled { opacity: 0.6; cursor: default; }
|
|
1029
|
+
.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; }
|
|
1030
|
+
.resume-agent-btn:hover { background: #e6d8ff; border-color: #7c52b8; color: #3d1f7a; }
|
|
1031
|
+
.resume-agent-btn:disabled { opacity: 0.6; cursor: default; }
|
|
1032
|
+
.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; }
|
|
1033
|
+
.agent-task-row { background: #f7f0ff; border-left: 3px solid #8560c6; }
|
|
1034
|
+
.frozen-row { background: #eef7ff; border-left: 3px solid #8cbcf5; }
|
|
1035
|
+
.observation-table tbody tr.selected.frozen-row { background: #dcebff; }
|
|
1036
|
+
.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; }
|
|
1037
|
+
.detail-sections { display: flex; flex-direction: column; gap: 12px; height: 486.5px; overflow-y: auto; }
|
|
1038
|
+
.detail-section { background: white; border: 1px solid #eee; border-radius: 6px; padding: 10px; }
|
|
1039
|
+
.detail-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #555; text-transform: uppercase; letter-spacing: 0.02em; }
|
|
1040
|
+
.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; }
|
|
1041
|
+
.modal-footer { display: flex; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; gap: 12px; justify-content: space-between; }
|
|
1042
|
+
.btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; }
|
|
1043
|
+
.btn-secondary { background: #f0f0f0; color: #333; }
|
|
1044
|
+
.btn-secondary:hover { background: #e0e0e0; }
|
|
1045
|
+
.btn-primary { background: #0066cc; color: white; }
|
|
1046
|
+
.btn-primary:hover { background: #0052a3; }
|
|
1047
|
+
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
|
1048
|
+
.btn-primary:disabled:hover { background: #0066cc; }
|
|
1049
|
+
.btn-secondary:disabled:hover { background: #f0f0f0; }
|
|
1050
|
+
.obs-checkbox { width: 18px; height: 18px; cursor: pointer; }
|
|
1051
|
+
.rerun-status { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; }
|
|
1052
|
+
.rerun-status.running { color: #666; }
|
|
1053
|
+
.rerun-status.success { color: #1f7a44; }
|
|
1054
|
+
.rerun-status.error { color: #c62828; }
|
|
1055
|
+
@media (max-width: 900px) {
|
|
1056
|
+
.trace-layout { grid-template-columns: 1fr; }
|
|
1057
|
+
}
|
|
1058
|
+
</style>
|
|
1059
|
+
<script>
|
|
1060
|
+
const updatedInputs = new Map();
|
|
1061
|
+
</script>
|
|
1062
|
+
</head>
|
|
1063
|
+
<body>
|
|
1064
|
+
<div class="container">
|
|
1065
|
+
<header>
|
|
1066
|
+
<h1>Workflow Functions</h1>
|
|
1067
|
+
<div class="subtitle">Select a workflow to debug with trace analysis</div>
|
|
1068
|
+
<div class="search-box">
|
|
1069
|
+
<input type="text" id="searchInput" placeholder="Search by name or path..." autocomplete="off">
|
|
1070
|
+
<div class="result-count"><span id="resultCount">0</span> workflows</div>
|
|
1071
|
+
</div>
|
|
1072
|
+
</header>
|
|
1073
|
+
<div class="workflows-list">
|
|
1074
|
+
<table class="workflows-table">
|
|
1075
|
+
<thead><tr><th style="width: 35%">Function Name</th><th>File Path</th></tr></thead>
|
|
1076
|
+
<tbody id="workflowsTableBody"><tr><td colspan="2" style="text-align: center; padding: 40px;">Loading...</td></tr></tbody>
|
|
1077
|
+
</table>
|
|
1078
|
+
</div>
|
|
1079
|
+
</div>
|
|
1080
|
+
<div id="traceModal" class="modal">
|
|
1081
|
+
<div class="modal-content">
|
|
1082
|
+
<div class="modal-header">
|
|
1083
|
+
<h2 class="modal-title">Import Trace for Analysis</h2>
|
|
1084
|
+
<button class="modal-close" id="closeModal">×</button>
|
|
1085
|
+
</div>
|
|
1086
|
+
<div id="uploadArea" class="upload-area">
|
|
1087
|
+
<div>Drag and Drop <br />or <br />Click to Upload</div>
|
|
1088
|
+
<input type="file" id="traceFile" accept=".json" />
|
|
1089
|
+
</div>
|
|
1090
|
+
<div id="uploadStatus" class="upload-status"></div>
|
|
1091
|
+
<div id="traceViewer" class="trace-viewer">
|
|
1092
|
+
<div class="trace-layout">
|
|
1093
|
+
<div class="trace-left">
|
|
1094
|
+
<div class="trace-section-title">Observations</div>
|
|
1095
|
+
<div class="observation-table-wrap">
|
|
1096
|
+
<table class="observation-table">
|
|
1097
|
+
<thead id="observationTableHead"><tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
|
|
1098
|
+
<tbody id="observationTableBody"></tbody>
|
|
1099
|
+
</table>
|
|
1100
|
+
</div>
|
|
1101
|
+
</div>
|
|
1102
|
+
<div class="trace-right">
|
|
1103
|
+
<div id="observationDetail"></div>
|
|
1104
|
+
</div>
|
|
1105
|
+
</div>
|
|
1106
|
+
</div>
|
|
1107
|
+
<div id="modalFooter" class="modal-footer">
|
|
1108
|
+
<button class="btn btn-secondary" id="changeTraceBtn">Change Trace File</button>
|
|
1109
|
+
<button class="btn btn-primary" id="nextBtn">Next</button>
|
|
1110
|
+
</div>
|
|
1111
|
+
</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
<script>
|
|
1114
|
+
console.log("[Dashboard] Script starting...");
|
|
1115
|
+
let allWorkflows = [], codeIndex = {workflows: [], tools: []}, selectedWorkflow = null;
|
|
1116
|
+
let currentObservations = [], selectedObservationIndex = -1;
|
|
1117
|
+
let rerunHistory = new Map();
|
|
1118
|
+
let rerunInFlight = new Set();
|
|
1119
|
+
let step4SelectedRun = -1;
|
|
1120
|
+
let step5RunTraces = [];
|
|
1121
|
+
let repoRoot = ''; // Will be fetched from API
|
|
1122
|
+
try {
|
|
1123
|
+
const _saved = localStorage.getItem('ed_step5RunTraces');
|
|
1124
|
+
if (_saved) step5RunTraces = JSON.parse(_saved);
|
|
1125
|
+
} catch {}
|
|
1126
|
+
let step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
|
|
1127
|
+
let step5RerunInFlight = false;
|
|
1128
|
+
|
|
1129
|
+
function computeDurationMs(obs) {
|
|
1130
|
+
if (obs.durationMs != null) return obs.durationMs;
|
|
1131
|
+
if (obs.latency != null && obs.latency > 0) return Math.round(obs.latency * 1000);
|
|
1132
|
+
if (obs.startTime && obs.endTime) {
|
|
1133
|
+
const diff = new Date(obs.endTime).getTime() - new Date(obs.startTime).getTime();
|
|
1134
|
+
if (Number.isFinite(diff) && diff >= 0) return diff;
|
|
1135
|
+
}
|
|
1136
|
+
if (obs.latency != null) return 0;
|
|
1137
|
+
return null;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
function formatDuration(ms) {
|
|
1141
|
+
if (ms == null) return '—';
|
|
1142
|
+
if (ms < 1000) return ms + ' ms';
|
|
1143
|
+
return (ms / 1000).toFixed(2) + ' s';
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
function extractUsage(obs) {
|
|
1147
|
+
if (obs && (obs.usage && (obs.usage.inputTokens != null || obs.usage.outputTokens != null))) {
|
|
1148
|
+
return obs.usage;
|
|
1149
|
+
}
|
|
1150
|
+
if (obs && (obs.usageDetails && (obs.usageDetails.input != null || obs.usageDetails.output != null))) {
|
|
1151
|
+
return { inputTokens: obs.usageDetails.input, outputTokens: obs.usageDetails.output, totalTokens: obs.usageDetails.total };
|
|
1152
|
+
}
|
|
1153
|
+
if (obs && (obs.inputUsage != null || obs.outputUsage != null)) {
|
|
1154
|
+
return { inputTokens: obs.inputUsage, outputTokens: obs.outputUsage, totalTokens: obs.totalUsage };
|
|
1155
|
+
}
|
|
1156
|
+
return null;
|
|
1157
|
+
}
|
|
1158
|
+
|
|
1159
|
+
function renderUsage(obs) {
|
|
1160
|
+
const u = extractUsage(obs);
|
|
1161
|
+
if (!u || !(u.inputTokens > 0 || u.outputTokens > 0 || u.totalTokens > 0)) return '';
|
|
1162
|
+
const lines = [];
|
|
1163
|
+
if (u.inputTokens != null) lines.push('Input tokens: ' + u.inputTokens);
|
|
1164
|
+
if (u.outputTokens != null) lines.push('Output tokens: ' + u.outputTokens);
|
|
1165
|
+
if (u.totalTokens != null) lines.push('Total tokens: ' + u.totalTokens);
|
|
1166
|
+
if (!lines.length) return '';
|
|
1167
|
+
return \`<div class="detail-section"><div class="detail-title">Usage</div><pre class="detail-pre">\${lines.join('\\n')}</pre></div>\`;
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
function persistTraces() {
|
|
1171
|
+
try {
|
|
1172
|
+
// Store compact version — strip bulky workflowTrace.events (snapshot is on server)
|
|
1173
|
+
const compact = step5RunTraces.map(function(t) {
|
|
1174
|
+
const { workflowTrace, ...rest } = t;
|
|
1175
|
+
return rest;
|
|
1176
|
+
});
|
|
1177
|
+
localStorage.setItem('ed_step5RunTraces', JSON.stringify(compact));
|
|
1178
|
+
} catch {}
|
|
1179
|
+
}
|
|
1180
|
+
const tbody = document.getElementById("workflowsTableBody");
|
|
1181
|
+
const countEl = document.getElementById("resultCount");
|
|
1182
|
+
const modal = document.getElementById("traceModal");
|
|
1183
|
+
const uploadArea = document.getElementById("uploadArea");
|
|
1184
|
+
const fileInput = document.getElementById("traceFile");
|
|
1185
|
+
const modalFooter = document.getElementById("modalFooter");
|
|
1186
|
+
const uploadStatus = document.getElementById("uploadStatus");
|
|
1187
|
+
const traceViewer = document.getElementById("traceViewer");
|
|
1188
|
+
let observationTableBody = document.getElementById("observationTableBody");
|
|
1189
|
+
let observationDetail = document.getElementById("observationDetail");
|
|
1190
|
+
const modalTitle = document.querySelector(".modal-title");
|
|
1191
|
+
console.log("[Dashboard] DOM elements loaded, tbody:", tbody);
|
|
1192
|
+
|
|
1193
|
+
let currentStep = 0; // 0=upload, 3=mark, 4=verify, 5=validate
|
|
1194
|
+
let checkedObservations = new Set();
|
|
1195
|
+
|
|
1196
|
+
document.getElementById("closeModal").onclick = () => {
|
|
1197
|
+
modal.classList.remove("open");
|
|
1198
|
+
resetTraceModal();
|
|
1199
|
+
};
|
|
1200
|
+
modal.onclick = (e) => {
|
|
1201
|
+
if (e.target === modal) {
|
|
1202
|
+
modal.classList.remove("open");
|
|
1203
|
+
resetTraceModal();
|
|
1204
|
+
}
|
|
1205
|
+
};
|
|
1206
|
+
|
|
1207
|
+
document.getElementById("changeTraceBtn").onclick = () => {
|
|
1208
|
+
if (currentStep === 3) {
|
|
1209
|
+
resetTraceModal();
|
|
1210
|
+
} else if (currentStep === 4) {
|
|
1211
|
+
// Go back to Step 3
|
|
1212
|
+
currentStep = 3;
|
|
1213
|
+
checkedObservations.clear(); // Clear to allow reselecting different steps
|
|
1214
|
+
updateModalTitle();
|
|
1215
|
+
updateFooterButtons();
|
|
1216
|
+
renderObservationTable();
|
|
1217
|
+
// Auto-select first observation
|
|
1218
|
+
if (currentObservations.length > 0) {
|
|
1219
|
+
selectObservation(0);
|
|
1220
|
+
}
|
|
1221
|
+
} else if (currentStep === 5) {
|
|
1222
|
+
// Go back to Step 3 (Still Failing)
|
|
1223
|
+
currentStep = 3;
|
|
1224
|
+
checkedObservations.clear(); // Clear to allow reselecting different steps
|
|
1225
|
+
updateModalTitle();
|
|
1226
|
+
updateFooterButtons();
|
|
1227
|
+
renderObservationTable();
|
|
1228
|
+
// Auto-select first observation
|
|
1229
|
+
if (currentObservations.length > 0) {
|
|
1230
|
+
selectObservation(0);
|
|
1231
|
+
}
|
|
1232
|
+
}
|
|
1233
|
+
};
|
|
1234
|
+
|
|
1235
|
+
document.getElementById("nextBtn").onclick = () => {
|
|
1236
|
+
if (currentStep < 3) {
|
|
1237
|
+
alert("Please upload a trace file to continue");
|
|
1238
|
+
return;
|
|
1239
|
+
}
|
|
1240
|
+
if (currentStep === 3) {
|
|
1241
|
+
// Validate that at least one checkbox is checked
|
|
1242
|
+
if (checkedObservations.size === 0) {
|
|
1243
|
+
alert("Please select at least one step to mark as broken");
|
|
1244
|
+
return;
|
|
1245
|
+
}
|
|
1246
|
+
// Move to Step 4
|
|
1247
|
+
currentStep = 4;
|
|
1248
|
+
updateModalTitle();
|
|
1249
|
+
updateFooterButtons();
|
|
1250
|
+
renderObservationTable();
|
|
1251
|
+
// Auto-select first checked observation
|
|
1252
|
+
const checkedArray = Array.from(checkedObservations);
|
|
1253
|
+
if (checkedArray.length > 0) {
|
|
1254
|
+
window.step4SelectObservation(checkedArray[0]);
|
|
1255
|
+
}
|
|
1256
|
+
} else if (currentStep === 4) {
|
|
1257
|
+
// Show prompt-update confirmation (if needed), then live validation dialog
|
|
1258
|
+
window.openPromptConfirmation(() => window.openLiveValidationDialog());
|
|
1259
|
+
return;
|
|
1260
|
+
} else if (currentStep === 5) {
|
|
1261
|
+
modal.classList.remove("open");
|
|
1262
|
+
resetTraceModal();
|
|
1263
|
+
customFooter.remove();
|
|
1264
|
+
}
|
|
1265
|
+
};
|
|
1266
|
+
|
|
1267
|
+
// ---- Tool Mock Config State ----
|
|
1268
|
+
window._toolMockConfig = {}; // { toolName: { mode: 'live'|'mock-all'|'mock-specific', callIndices: [], mockData: {} } }
|
|
1269
|
+
|
|
1270
|
+
function getToolsFromTrace() {
|
|
1271
|
+
// Extract unique tool names and their call details from the uploaded trace observations
|
|
1272
|
+
const toolCalls = {};
|
|
1273
|
+
currentObservations.forEach(function(obs, i) {
|
|
1274
|
+
const isToolByType = obs.type === 'TOOL';
|
|
1275
|
+
const isToolByName = typeof obs.name === 'string' && obs.name.startsWith('tool-');
|
|
1276
|
+
if (!isToolByType && !isToolByName) return;
|
|
1277
|
+
const name = isToolByName && obs.type !== 'TOOL'
|
|
1278
|
+
? obs.name.slice(5)
|
|
1279
|
+
: (obs.name || '(unknown)');
|
|
1280
|
+
if (!toolCalls[name]) toolCalls[name] = [];
|
|
1281
|
+
toolCalls[name].push({ index: toolCalls[name].length + 1, obsIndex: i, input: obs.input, output: obs.output });
|
|
1282
|
+
});
|
|
1283
|
+
return toolCalls;
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
function getAllRegisteredTools() {
|
|
1287
|
+
// From codeIndex.tools (fetched at page load from /api/code-index)
|
|
1288
|
+
return (codeIndex.tools || []).map(function(t) { return t.name; });
|
|
1289
|
+
}
|
|
1290
|
+
|
|
1291
|
+
function buildToolMockConfigFromUI() {
|
|
1292
|
+
const config = {};
|
|
1293
|
+
const rows = document.querySelectorAll('.tool-mock-row');
|
|
1294
|
+
rows.forEach(function(row) {
|
|
1295
|
+
const toolName = row.dataset.toolName;
|
|
1296
|
+
const modeSelect = row.querySelector('.tool-mock-mode');
|
|
1297
|
+
const mode = modeSelect ? modeSelect.value : 'live';
|
|
1298
|
+
if (mode === 'live') return;
|
|
1299
|
+
const entry = { mode: mode };
|
|
1300
|
+
if (mode === 'mock-specific') {
|
|
1301
|
+
const checkboxes = row.querySelectorAll('.tool-call-checkbox:checked');
|
|
1302
|
+
entry.callIndices = Array.from(checkboxes).map(function(cb) { return parseInt(cb.value, 10); });
|
|
1303
|
+
if (entry.callIndices.length === 0) return; // No calls selected, treat as live
|
|
1304
|
+
}
|
|
1305
|
+
// Collect mock data
|
|
1306
|
+
entry.mockData = {};
|
|
1307
|
+
const dataInputs = row.querySelectorAll('.tool-mock-data-input');
|
|
1308
|
+
dataInputs.forEach(function(inp) {
|
|
1309
|
+
const callIdx = parseInt(inp.dataset.callIdx, 10);
|
|
1310
|
+
if (!inp.value.trim()) return;
|
|
1311
|
+
try { entry.mockData[callIdx] = JSON.parse(inp.value); }
|
|
1312
|
+
catch(e) { entry.mockData[callIdx] = inp.value; }
|
|
1313
|
+
});
|
|
1314
|
+
config[toolName] = entry;
|
|
1315
|
+
});
|
|
1316
|
+
return config;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
function cleanValue(value) {
|
|
1320
|
+
if (typeof value === "string") {
|
|
1321
|
+
value = value.replaceAll('\\\\"', '');
|
|
1322
|
+
// remove surrounding quotes if they exist
|
|
1323
|
+
if (value.startsWith('"') && value.endsWith('"')) {
|
|
1324
|
+
return value.slice(1, -1);
|
|
1325
|
+
}
|
|
1326
|
+
return value;
|
|
1327
|
+
}
|
|
1328
|
+
|
|
1329
|
+
if (Array.isArray(value)) {
|
|
1330
|
+
return value.map(cleanValue);
|
|
1331
|
+
}
|
|
1332
|
+
|
|
1333
|
+
if (typeof value === "object" && value !== null) {
|
|
1334
|
+
const result = {};
|
|
1335
|
+
for (const key in value) {
|
|
1336
|
+
result[key] = cleanValue(value[key]);
|
|
1337
|
+
}
|
|
1338
|
+
return result;
|
|
1339
|
+
}
|
|
1340
|
+
|
|
1341
|
+
return value;
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
function convert(input) {
|
|
1345
|
+
const parsed = JSON.parse(input);
|
|
1346
|
+
return cleanValue(parsed);
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
function renderToolMockSection(showAll) {
|
|
1350
|
+
const traceTools = getToolsFromTrace();
|
|
1351
|
+
const allToolNames = getAllRegisteredTools();
|
|
1352
|
+
const traceToolNames = Object.keys(traceTools);
|
|
1353
|
+
const toolNames = showAll
|
|
1354
|
+
? Array.from(new Set([...traceToolNames, ...allToolNames]))
|
|
1355
|
+
: traceToolNames;
|
|
1356
|
+
|
|
1357
|
+
if (toolNames.length === 0) {
|
|
1358
|
+
return '<div style="color:#999;font-size:13px;padding:6px 0;">No tools detected.</div>';
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
let html = '<div style="max-height:260px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:6px;">';
|
|
1362
|
+
html += '<table style="width:100%;border-collapse:collapse;font-size:13px;">';
|
|
1363
|
+
html += '<thead><tr style="background:#f5f5f5;">';
|
|
1364
|
+
html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Tool</th>';
|
|
1365
|
+
html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Calls in Trace</th>';
|
|
1366
|
+
html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Mock Mode</th>';
|
|
1367
|
+
html += '<th style="padding:6px 10px;text-align:left;border-bottom:1px solid #e0e0e0;">Details</th>';
|
|
1368
|
+
html += '</tr></thead><tbody>';
|
|
1369
|
+
|
|
1370
|
+
toolNames.forEach(function(name) {
|
|
1371
|
+
const calls = traceTools[name] || [];
|
|
1372
|
+
const inTrace = traceToolNames.includes(name);
|
|
1373
|
+
const existing = window._toolMockConfig[name] || { mode: 'live' };
|
|
1374
|
+
const nameStyle = inTrace ? '' : 'color:#999;';
|
|
1375
|
+
|
|
1376
|
+
html += '<tr class="tool-mock-row" data-tool-name="' + esc(name) + '" style="border-bottom:1px solid #f0f0f0;">';
|
|
1377
|
+
html += '<td style="padding:6px 10px;font-family:Monaco,monospace;' + nameStyle + '">' + esc(name) + (inTrace ? '' : ' <span style="font-size:10px;color:#aaa;">(not in trace)</span>') + '</td>';
|
|
1378
|
+
html += '<td style="padding:6px 10px;">' + calls.length + '</td>';
|
|
1379
|
+
html += '<td style="padding:6px 10px;">';
|
|
1380
|
+
html += '<select class="tool-mock-mode" style="font-size:12px;padding:2px 4px;" onchange="window.onToolMockModeChange(\\'' + esc(name) + '\\', this.value)">';
|
|
1381
|
+
html += '<option value="live"' + (existing.mode === 'live' ? ' selected' : '') + '>Live</option>';
|
|
1382
|
+
html += '<option value="mock-all"' + (existing.mode === 'mock-all' ? ' selected' : '') + '>Mock All Calls</option>';
|
|
1383
|
+
if (calls.length > 0) {
|
|
1384
|
+
html += '<option value="mock-specific"' + (existing.mode === 'mock-specific' ? ' selected' : '') + '>Mock Specific Calls</option>';
|
|
1385
|
+
}
|
|
1386
|
+
html += '</select>';
|
|
1387
|
+
html += '</td>';
|
|
1388
|
+
|
|
1389
|
+
// Details column: per-call checkboxes + mock data inputs
|
|
1390
|
+
html += '<td style="padding:6px 10px;">';
|
|
1391
|
+
if (existing.mode === 'mock-all') {
|
|
1392
|
+
let defaultData = (existing.mockData && existing.mockData[0] !== undefined) ? JSON.stringify(existing.mockData[0]) : (calls.length > 0 ? JSON.stringify(calls[0].output) : '');
|
|
1393
|
+
defaultData = convert(defaultData);
|
|
1394
|
+
html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Mock data (JSON):</div>';
|
|
1395
|
+
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>';
|
|
1396
|
+
} else if (existing.mode === 'mock-specific' && calls.length > 0) {
|
|
1397
|
+
html += '<div style="font-size:11px;color:#555;margin-bottom:4px;">Select calls to mock:</div>';
|
|
1398
|
+
calls.forEach(function(call) {
|
|
1399
|
+
const isChecked = existing.callIndices && existing.callIndices.includes(call.index);
|
|
1400
|
+
const inputPreview = typeof call.input === 'string' ? call.input.slice(0, 40) : JSON.stringify(call.input || '').slice(0, 40);
|
|
1401
|
+
let mockVal = (existing.mockData && existing.mockData[call.index] !== undefined) ? JSON.stringify(existing.mockData[call.index]) : JSON.stringify(call.output);
|
|
1402
|
+
mockVal = convert(mockVal);
|
|
1403
|
+
html += '<div style="margin-bottom:6px;padding:4px;background:#fafafa;border-radius:4px;border:1px solid #eee;">';
|
|
1404
|
+
html += '<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">';
|
|
1405
|
+
html += '<input type="checkbox" class="tool-call-checkbox" value="' + call.index + '"' + (isChecked ? ' checked' : '') + ' onchange="window.onToolCallCheckChange(\\'' + esc(name) + '\\',' + call.index + ',this.checked)">';
|
|
1406
|
+
html += '<span>Call #' + call.index + '</span>';
|
|
1407
|
+
html += '<span style="color:#888;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + esc(inputPreview) + '</span>';
|
|
1408
|
+
html += '</label>';
|
|
1409
|
+
if (isChecked) {
|
|
1410
|
+
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>';
|
|
1411
|
+
}
|
|
1412
|
+
html += '</div>';
|
|
1413
|
+
});
|
|
1414
|
+
} else {
|
|
1415
|
+
html += '<span style="color:#aaa;font-size:11px;">—</span>';
|
|
1416
|
+
}
|
|
1417
|
+
html += '</td>';
|
|
1418
|
+
html += '</tr>';
|
|
1419
|
+
});
|
|
1420
|
+
|
|
1421
|
+
html += '</tbody></table></div>';
|
|
1422
|
+
return html;
|
|
1423
|
+
}
|
|
1424
|
+
|
|
1425
|
+
window.onToolMockModeChange = function(toolName, mode) {
|
|
1426
|
+
if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'live' };
|
|
1427
|
+
// Save current mock data before switching
|
|
1428
|
+
window._toolMockConfig[toolName] = { ...window._toolMockConfig[toolName], mode: mode };
|
|
1429
|
+
if (mode === 'mock-specific' && !window._toolMockConfig[toolName].callIndices) {
|
|
1430
|
+
window._toolMockConfig[toolName].callIndices = [];
|
|
1431
|
+
}
|
|
1432
|
+
// Re-render tool mock section
|
|
1433
|
+
const showAll = document.getElementById('showAllToolsToggle');
|
|
1434
|
+
const container = document.getElementById('toolMockContainer');
|
|
1435
|
+
if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
|
|
1436
|
+
};
|
|
1437
|
+
|
|
1438
|
+
window.onToolCallCheckChange = function(toolName, callIdx, checked) {
|
|
1439
|
+
if (!window._toolMockConfig[toolName]) window._toolMockConfig[toolName] = { mode: 'mock-specific', callIndices: [] };
|
|
1440
|
+
const indices = window._toolMockConfig[toolName].callIndices || [];
|
|
1441
|
+
if (checked && !indices.includes(callIdx)) {
|
|
1442
|
+
indices.push(callIdx);
|
|
1443
|
+
} else if (!checked) {
|
|
1444
|
+
const pos = indices.indexOf(callIdx);
|
|
1445
|
+
if (pos >= 0) indices.splice(pos, 1);
|
|
1446
|
+
}
|
|
1447
|
+
window._toolMockConfig[toolName].callIndices = indices;
|
|
1448
|
+
const showAll = document.getElementById('showAllToolsToggle');
|
|
1449
|
+
const container = document.getElementById('toolMockContainer');
|
|
1450
|
+
if (container) container.innerHTML = renderToolMockSection(showAll && showAll.checked);
|
|
1451
|
+
};
|
|
1452
|
+
|
|
1453
|
+
window.openLiveValidationDialog = function() {
|
|
1454
|
+
if (window.liveValidationDialog) return;
|
|
1455
|
+
window._toolMockConfig = {}; // Reset mock config each time dialog opens
|
|
1456
|
+
|
|
1457
|
+
const hasTraceTools = currentObservations.some(function(o) { return o.type === 'TOOL'; });
|
|
1458
|
+
const hasRegisteredTools = codeIndex.tools && codeIndex.tools.length > 0;
|
|
1459
|
+
|
|
1460
|
+
window.liveValidationDialog = document.createElement('div');
|
|
1461
|
+
window.liveValidationDialog.id = 'liveValidationDialog';
|
|
1462
|
+
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;';
|
|
1463
|
+
window.liveValidationDialog.innerHTML = \`
|
|
1464
|
+
<div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0002;min-width:680px;max-width:90vw;max-height:90vh;overflow-y:auto;">
|
|
1465
|
+
<h3 style="margin-top:0;margin-bottom:18px;font-size:20px;">Validate Updated Flow with Live Data</h3>
|
|
1466
|
+
<label style="font-size:15px;display:block;margin-bottom:8px;">How many times do you want to run the flow with live data?</label>
|
|
1467
|
+
<input id="liveValidationCount" type="number" min="1" value="1" style="width:100%;font-size:16px;padding:6px 10px;margin-bottom:18px;" />
|
|
1468
|
+
<label style="display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:18px;">
|
|
1469
|
+
<input id="liveValidationSequential" type="checkbox" />
|
|
1470
|
+
Run in sequence instead of parallel
|
|
1471
|
+
</label>
|
|
1472
|
+
\${(hasTraceTools || hasRegisteredTools) ? \`
|
|
1473
|
+
<div style="border-top:1px solid #eee;padding-top:16px;margin-bottom:16px;">
|
|
1474
|
+
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
|
1475
|
+
<div style="font-size:15px;font-weight:600;">Tool Mocking</div>
|
|
1476
|
+
<label style="display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;">
|
|
1477
|
+
<input id="showAllToolsToggle" type="checkbox" onchange="document.getElementById('toolMockContainer').innerHTML = renderToolMockSection(this.checked);" />
|
|
1478
|
+
Show all registered tools
|
|
1479
|
+
</label>
|
|
1480
|
+
</div>
|
|
1481
|
+
<div id="toolMockContainer"></div>
|
|
1482
|
+
</div>\` : ''}
|
|
1483
|
+
<div style="display:flex;gap:12px;justify-content:space-between;align-items:center;">
|
|
1484
|
+
<span id="liveValidationProgress" style="font-size:14px;color:#555;"></span>
|
|
1485
|
+
<div style="display:flex;gap:12px;">
|
|
1486
|
+
<button id="cancelLiveValidation" class="btn btn-secondary">Cancel</button>
|
|
1487
|
+
<button id="submitLiveValidation" class="btn btn-primary">Validate</button>
|
|
1488
|
+
</div>
|
|
1489
|
+
</div>
|
|
1490
|
+
</div>
|
|
1491
|
+
\`;
|
|
1492
|
+
document.body.appendChild(window.liveValidationDialog);
|
|
1493
|
+
// Render the tool mock section after DOM insertion
|
|
1494
|
+
const toolMockContainer = document.getElementById('toolMockContainer');
|
|
1495
|
+
if (toolMockContainer) {
|
|
1496
|
+
toolMockContainer.innerHTML = renderToolMockSection(false);
|
|
1497
|
+
}
|
|
1498
|
+
document.getElementById('cancelLiveValidation').onclick = function() {
|
|
1499
|
+
window.liveValidationDialog.remove();
|
|
1500
|
+
window.liveValidationDialog = null;
|
|
1501
|
+
};
|
|
1502
|
+
document.getElementById('submitLiveValidation').onclick = async function() {
|
|
1503
|
+
const count = parseInt(document.getElementById('liveValidationCount').value, 10);
|
|
1504
|
+
const sequential = document.getElementById('liveValidationSequential').checked;
|
|
1505
|
+
if (count >= 1) {
|
|
1506
|
+
// Build the tool mock config from UI state and persist for "Run from here"
|
|
1507
|
+
const toolMockConfig = buildToolMockConfigFromUI();
|
|
1508
|
+
window._toolMockConfig = toolMockConfig;
|
|
1509
|
+
const submitBtn = document.getElementById('submitLiveValidation');
|
|
1510
|
+
submitBtn.disabled = true;
|
|
1511
|
+
submitBtn.textContent = 'Validating...';
|
|
1512
|
+
const progressEl = document.getElementById('liveValidationProgress');
|
|
1513
|
+
|
|
1514
|
+
function finishValidation(collectedTraces, errorMsg, usedSequential) {
|
|
1515
|
+
if (progressEl) progressEl.textContent = '';
|
|
1516
|
+
window.liveValidationDialog.remove();
|
|
1517
|
+
window.liveValidationDialog = null;
|
|
1518
|
+
window.liveValidationCount = count;
|
|
1519
|
+
window.liveValidationSequential = usedSequential;
|
|
1520
|
+
window.step5SelectedTrace = 0;
|
|
1521
|
+
window.step5SelectedObservation = 0;
|
|
1522
|
+
currentStep = 5;
|
|
1523
|
+
updateModalTitle();
|
|
1524
|
+
updateFooterButtons();
|
|
1525
|
+
if (errorMsg && collectedTraces.length === 0) {
|
|
1526
|
+
step5RunTraces = [];
|
|
1527
|
+
localStorage.removeItem('ed_step5RunTraces');
|
|
1528
|
+
step5RunMeta = { loading: false, error: errorMsg, runCount: count, sequential: usedSequential };
|
|
1529
|
+
} else {
|
|
1530
|
+
step5RunTraces = collectedTraces;
|
|
1531
|
+
persistTraces();
|
|
1532
|
+
step5RunMeta = { loading: false, error: '', runCount: collectedTraces.length, sequential: usedSequential };
|
|
1533
|
+
}
|
|
1534
|
+
if (window.step5SelectedTrace > step5RunTraces.length) window.step5SelectedTrace = 0;
|
|
1535
|
+
window.step5SelectedObservation = 0;
|
|
1536
|
+
renderObservationTable();
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
if (sequential) {
|
|
1540
|
+
// Sequential mode: fire one request per run so progress reflects real completion
|
|
1541
|
+
if (progressEl) progressEl.textContent = \`0 of \${count} workflow runs completed\`;
|
|
1542
|
+
const collectedTraces = [];
|
|
1543
|
+
let fatalError = null;
|
|
1544
|
+
for (let i = 0; i < count; i++) {
|
|
1545
|
+
const singlePayload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations, toolMockConfig };
|
|
1546
|
+
try {
|
|
1547
|
+
const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(singlePayload) });
|
|
1548
|
+
const data = await response.json();
|
|
1549
|
+
if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
|
|
1550
|
+
collectedTraces.push({ ...data.traces[0], runNumber: i + 1 });
|
|
1551
|
+
} else {
|
|
1552
|
+
// Push an error trace so the run is still visible in Step 5
|
|
1553
|
+
collectedTraces.push({ runNumber: i + 1, ok: false, error: data.error || 'Workflow validation failed.', observations: [], workflowTrace: null });
|
|
1554
|
+
}
|
|
1555
|
+
} catch (err) {
|
|
1556
|
+
collectedTraces.push({ runNumber: i + 1, ok: false, error: err && err.message ? err.message : String(err), observations: [], workflowTrace: null });
|
|
1557
|
+
}
|
|
1558
|
+
if (progressEl) progressEl.textContent = \`\${i + 1} of \${count} workflow runs completed\`;
|
|
1559
|
+
}
|
|
1560
|
+
finishValidation(collectedTraces, fatalError, true);
|
|
1561
|
+
} else {
|
|
1562
|
+
// Parallel mode: single bulk request
|
|
1563
|
+
if (progressEl) progressEl.textContent = \`Running \${count} workflow run\${count !== 1 ? 's' : ''} in parallel…\`;
|
|
1564
|
+
const payload = { workflowName: selectedWorkflow?.name, runCount: count, sequential: false, observations: currentObservations, toolMockConfig };
|
|
1565
|
+
try {
|
|
1566
|
+
const response = await fetch('/api/validate-workflow', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
|
|
1567
|
+
const data = await response.json();
|
|
1568
|
+
if (response.ok && data.ok) {
|
|
1569
|
+
finishValidation(Array.isArray(data.traces) ? data.traces : [], null, false);
|
|
1570
|
+
} else {
|
|
1571
|
+
finishValidation([], data.error || 'Workflow validation failed.', false);
|
|
1572
|
+
}
|
|
1573
|
+
} catch (err) {
|
|
1574
|
+
finishValidation([], err && err.message ? err.message : String(err), false);
|
|
1575
|
+
}
|
|
1576
|
+
}
|
|
1577
|
+
} else {
|
|
1578
|
+
document.getElementById('liveValidationCount').style.borderColor = 'red';
|
|
1579
|
+
}
|
|
1580
|
+
};
|
|
1581
|
+
};
|
|
1582
|
+
|
|
1583
|
+
window.openPromptConfirmation = function(onConfirm) {
|
|
1584
|
+
const genObs = currentObservations
|
|
1585
|
+
.map((o, i) => ({ obs: o, idx: i }))
|
|
1586
|
+
.filter(({ obs, idx }) => obs.type === 'GENERATION' && checkedObservations.has(idx));
|
|
1587
|
+
if (genObs.length === 0) { onConfirm(); return; }
|
|
1588
|
+
|
|
1589
|
+
const tableRows = genObs.map(({ obs, idx }) => {
|
|
1590
|
+
const preview = toDisplayText(obs.input, obs.type).replace(/\\s+/g, ' ').trim().slice(0, 50);
|
|
1591
|
+
const model = obs.model || '—';
|
|
1592
|
+
return \`<tr>
|
|
1593
|
+
<td style="padding:8px 10px;font-size:13px;color:#555;">\${idx + 1}</td>
|
|
1594
|
+
<td style="padding:8px 10px;font-size:13px;font-family:Monaco,monospace;">\${esc(obs.name || 'AI call')}</td>
|
|
1595
|
+
<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>
|
|
1596
|
+
<td style="padding:8px 10px;font-size:12px;font-family:Monaco,monospace;color:#555;">\${esc(model)}</td>
|
|
1597
|
+
</tr>\`;
|
|
1598
|
+
}).join('');
|
|
1599
|
+
|
|
1600
|
+
const dlg = document.createElement('div');
|
|
1601
|
+
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;';
|
|
1602
|
+
dlg.innerHTML = \`
|
|
1603
|
+
<div style="background:white;padding:32px 28px;border-radius:12px;box-shadow:0 2px 24px #0003;min-width:640px;max-width:92vw;">
|
|
1604
|
+
<h3 style="margin-top:0;margin-bottom:8px;font-size:20px;">Have you updated your AI prompts?</h3>
|
|
1605
|
+
<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>
|
|
1606
|
+
<div style="border:1px solid #e0e0e0;border-radius:6px;overflow:hidden;margin-bottom:24px;">
|
|
1607
|
+
<table style="width:100%;border-collapse:collapse;">
|
|
1608
|
+
<thead>
|
|
1609
|
+
<tr style="background:#f5f5f5;">
|
|
1610
|
+
<th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">#</th>
|
|
1611
|
+
<th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Name</th>
|
|
1612
|
+
<th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Input preview</th>
|
|
1613
|
+
<th style="padding:8px 10px;text-align:left;font-size:12px;color:#555;border-bottom:1px solid #e0e0e0;">Model</th>
|
|
1614
|
+
</tr>
|
|
1615
|
+
</thead>
|
|
1616
|
+
<tbody>\${tableRows}</tbody>
|
|
1617
|
+
</table>
|
|
1618
|
+
</div>
|
|
1619
|
+
<div style="display:flex;gap:12px;justify-content:flex-end;">
|
|
1620
|
+
<button id="cancelPromptConfirm" class="btn btn-secondary">Cancel</button>
|
|
1621
|
+
<button id="proceedPromptConfirm" class="btn btn-primary">Yes, Proceed</button>
|
|
1622
|
+
</div>
|
|
1623
|
+
</div>
|
|
1624
|
+
\`;
|
|
1625
|
+
document.body.appendChild(dlg);
|
|
1626
|
+
dlg.querySelector('#cancelPromptConfirm').onclick = () => dlg.remove();
|
|
1627
|
+
dlg.querySelector('#proceedPromptConfirm').onclick = () => { dlg.remove(); onConfirm(); };
|
|
1628
|
+
};
|
|
1629
|
+
|
|
1630
|
+
uploadArea.onclick = () => fileInput.click();
|
|
1631
|
+
|
|
1632
|
+
// Drag and drop handlers
|
|
1633
|
+
uploadArea.ondragover = (e) => {
|
|
1634
|
+
e.preventDefault();
|
|
1635
|
+
e.stopPropagation();
|
|
1636
|
+
uploadArea.style.borderColor = '#0066cc';
|
|
1637
|
+
uploadArea.style.background = '#f0f7ff';
|
|
1638
|
+
};
|
|
1639
|
+
|
|
1640
|
+
uploadArea.ondragleave = (e) => {
|
|
1641
|
+
e.preventDefault();
|
|
1642
|
+
e.stopPropagation();
|
|
1643
|
+
uploadArea.style.borderColor = '#ddd';
|
|
1644
|
+
uploadArea.style.background = '#fafafa';
|
|
1645
|
+
};
|
|
1646
|
+
|
|
1647
|
+
uploadArea.ondrop = (e) => {
|
|
1648
|
+
e.preventDefault();
|
|
1649
|
+
e.stopPropagation();
|
|
1650
|
+
uploadArea.style.borderColor = '#ddd';
|
|
1651
|
+
uploadArea.style.background = '#fafafa';
|
|
1652
|
+
|
|
1653
|
+
const files = e.dataTransfer.files;
|
|
1654
|
+
if (files.length === 0) return;
|
|
1655
|
+
|
|
1656
|
+
const file = files[0];
|
|
1657
|
+
// Check if it's a JSON file
|
|
1658
|
+
if (!file.name.toLowerCase().endsWith('.json')) {
|
|
1659
|
+
uploadStatus.className = "upload-status error";
|
|
1660
|
+
uploadStatus.textContent = "Please drop a JSON file";
|
|
1661
|
+
return;
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
handleFileUpload(file);
|
|
1665
|
+
};
|
|
1666
|
+
|
|
1667
|
+
fileInput.onchange = (e) => {
|
|
1668
|
+
if (!e.target.files[0]) return;
|
|
1669
|
+
const file = e.target.files[0];
|
|
1670
|
+
// Always clear file input so same file can be uploaded again
|
|
1671
|
+
fileInput.value = "";
|
|
1672
|
+
handleFileUpload(file);
|
|
1673
|
+
};
|
|
1674
|
+
|
|
1675
|
+
function handleFileUpload(file) {
|
|
1676
|
+
// Clear observations before loading new trace
|
|
1677
|
+
resetTraceModal();
|
|
1678
|
+
const reader = new FileReader();
|
|
1679
|
+
reader.onload = (e) => {
|
|
1680
|
+
try {
|
|
1681
|
+
const data = JSON.parse(e.target.result);
|
|
1682
|
+
uploadStatus.className = "upload-status";
|
|
1683
|
+
uploadStatus.textContent = "";
|
|
1684
|
+
displayTrace(data);
|
|
1685
|
+
} catch (err) {
|
|
1686
|
+
uploadArea.classList.remove("hidden");
|
|
1687
|
+
traceViewer.classList.remove("visible");
|
|
1688
|
+
uploadStatus.className = "upload-status error";
|
|
1689
|
+
uploadStatus.textContent = "Invalid JSON";
|
|
1690
|
+
}
|
|
1691
|
+
};
|
|
1692
|
+
reader.readAsText(file);
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
function displayTrace(data) {
|
|
1696
|
+
let obs = [];
|
|
1697
|
+
if (Array.isArray(data)) {
|
|
1698
|
+
obs = data.filter(o =>
|
|
1699
|
+
(o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
|
|
1700
|
+
(o.input !== null && o.input !== undefined) &&
|
|
1701
|
+
(o.output !== null && o.output !== undefined)
|
|
1702
|
+
);
|
|
1703
|
+
} else {
|
|
1704
|
+
const trace = data.trace || data;
|
|
1705
|
+
// Handle multiple formats: data.data, data.observations, trace.observations
|
|
1706
|
+
const rawObs = data.data || data.observations || trace.observations || [];
|
|
1707
|
+
obs = rawObs.filter(o =>
|
|
1708
|
+
(o.type === "GENERATION" || o.type === "TOOL" || o.type === "SPAN") &&
|
|
1709
|
+
(o.input !== null && o.input !== undefined) &&
|
|
1710
|
+
(o.output !== null && o.output !== undefined)
|
|
1711
|
+
);
|
|
1712
|
+
}
|
|
1713
|
+
// Sort by startTime ascending
|
|
1714
|
+
obs = obs.sort((a, b) => {
|
|
1715
|
+
const timeA = new Date(a.startTime || 0).getTime();
|
|
1716
|
+
const timeB = new Date(b.startTime || 0).getTime();
|
|
1717
|
+
return timeA - timeB;
|
|
1718
|
+
});
|
|
1719
|
+
// Aggregate token usage onto the workflow container SPAN if it has none
|
|
1720
|
+
if (selectedWorkflow?.name) {
|
|
1721
|
+
const containerIdx = obs.findIndex(
|
|
1722
|
+
o => o.type === 'SPAN' && o.name === selectedWorkflow.name
|
|
1723
|
+
);
|
|
1724
|
+
const _existingUsage = extractUsage(obs[containerIdx]);
|
|
1725
|
+
if (containerIdx >= 0 && (!_existingUsage || !(_existingUsage.totalTokens > 0))) {
|
|
1726
|
+
let inputTokens = 0, outputTokens = 0, totalTokens = 0;
|
|
1727
|
+
for (const o of obs) {
|
|
1728
|
+
if (o.type !== 'GENERATION') continue;
|
|
1729
|
+
const u = extractUsage(o);
|
|
1730
|
+
if (!u) continue;
|
|
1731
|
+
inputTokens += u.inputTokens ?? 0;
|
|
1732
|
+
outputTokens += u.outputTokens ?? 0;
|
|
1733
|
+
totalTokens += u.totalTokens ?? 0;
|
|
1734
|
+
}
|
|
1735
|
+
if (totalTokens > 0) {
|
|
1736
|
+
obs[containerIdx].usage = { inputTokens, outputTokens, totalTokens };
|
|
1737
|
+
}
|
|
1738
|
+
}
|
|
1739
|
+
}
|
|
1740
|
+
currentObservations = obs;
|
|
1741
|
+
selectedObservationIndex = -1;
|
|
1742
|
+
checkedObservations.clear();
|
|
1743
|
+
observationDetail.innerHTML = "";
|
|
1744
|
+
uploadArea.classList.add("hidden");
|
|
1745
|
+
traceViewer.classList.add("visible");
|
|
1746
|
+
currentStep = 3;
|
|
1747
|
+
updateModalTitle();
|
|
1748
|
+
updateFooterButtons();
|
|
1749
|
+
renderObservationTable();
|
|
1750
|
+
// Auto-select first observation
|
|
1751
|
+
if (currentObservations.length > 0) {
|
|
1752
|
+
selectObservation(0);
|
|
1753
|
+
}
|
|
1754
|
+
}
|
|
1755
|
+
|
|
1756
|
+
function renderObservationTable() {
|
|
1757
|
+
// Capture scroll positions for step 5 columns before rebuilding DOM
|
|
1758
|
+
let _step5Col1Scroll = 0, _step5Col2Scroll = 0;
|
|
1759
|
+
if (currentStep === 5) {
|
|
1760
|
+
const tls = document.querySelectorAll('.trace-left');
|
|
1761
|
+
_step5Col1Scroll = tls[0]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
|
|
1762
|
+
_step5Col2Scroll = tls[1]?.querySelector('.observation-table-wrap')?.scrollTop ?? 0;
|
|
1763
|
+
}
|
|
1764
|
+
// For other steps, preserve scroll position of the first .observation-table-wrap
|
|
1765
|
+
let obsTableWrap = document.querySelector('.observation-table-wrap');
|
|
1766
|
+
let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
|
|
1767
|
+
if (currentStep === 5) {
|
|
1768
|
+
// Initialize selections if not set
|
|
1769
|
+
if (window.step5SelectedTrace === undefined || window.step5SelectedTrace === null) {
|
|
1770
|
+
window.step5SelectedTrace = 0;
|
|
1771
|
+
}
|
|
1772
|
+
if (window.step5SelectedObservation === undefined || window.step5SelectedObservation === null) {
|
|
1773
|
+
window.step5SelectedObservation = 0;
|
|
1774
|
+
}
|
|
1775
|
+
// Step 5: Validate Updated Flow with Live Data
|
|
1776
|
+
// Render traceTable before observationsTable
|
|
1777
|
+
const traces = Array.isArray(step5RunTraces) ? step5RunTraces : [];
|
|
1778
|
+
const traceCount = traces.length + 1;
|
|
1779
|
+
document.getElementsByClassName("trace-layout")[0].classList.add("step-5");
|
|
1780
|
+
let traceTable = \`<div class="trace-section-title">Traces</div>
|
|
1781
|
+
<div class="observation-table-wrap">
|
|
1782
|
+
<table class="observation-table">
|
|
1783
|
+
<tbody>\`;
|
|
1784
|
+
for (let i = 0; i < traceCount; i++) {
|
|
1785
|
+
const isSelected = i === window.step5SelectedTrace;
|
|
1786
|
+
const run = i === 0 ? null : traces[i - 1];
|
|
1787
|
+
const status = run ? (run.ok ? ' ✓' : ' ✗') : '';
|
|
1788
|
+
const label = i === 0 ? "Original Trace" : \`\${run?.traceName ?? \`Trace-\${run?.runNumber ?? i}\`}\${status}\`;
|
|
1789
|
+
traceTable += \`<tr class="\${isSelected ? "selected" : ""}" onclick="window.step5SelectedTrace=\${i};window.step5SelectedObservation=0;renderObservationTable();"><td>\${label}</td></tr>\`;
|
|
1790
|
+
}
|
|
1791
|
+
traceTable += \`</tbody></table></div>\`;
|
|
1792
|
+
|
|
1793
|
+
// Observations table for selected trace
|
|
1794
|
+
let observationsTable = "";
|
|
1795
|
+
let detailsSection = "";
|
|
1796
|
+
|
|
1797
|
+
if (window.step5SelectedTrace > traces.length) {
|
|
1798
|
+
window.step5SelectedTrace = 0;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
if (window.step5SelectedTrace === 0) {
|
|
1802
|
+
// Original Trace: show all currentObservations (same as step 3)
|
|
1803
|
+
const _rerunDisabled = step5RunMeta.loading || step5RerunInFlight;
|
|
1804
|
+
observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
|
1805
|
+
<div class="trace-section-title" style="margin-bottom:0">Observations</div>
|
|
1806
|
+
<button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled ? 'disabled' : ''}>▶ Rerun</button>
|
|
1807
|
+
</div>
|
|
1808
|
+
<div class="observation-table-wrap">
|
|
1809
|
+
<table class="observation-table">
|
|
1810
|
+
<thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
|
|
1811
|
+
<tbody>\`;
|
|
1812
|
+
observationsTable += currentObservations.map((obs, j) => {
|
|
1813
|
+
const isSelected = j === window.step5SelectedObservation;
|
|
1814
|
+
const name = obs.name || obs.id || ("Observation " + (j + 1));
|
|
1815
|
+
const type = obs.type || "UNKNOWN";
|
|
1816
|
+
const typeClass = type === "TOOL" ? "tool" : "ai";
|
|
1817
|
+
const agentBadge = obs.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${obs.agentTaskIndex + 1}</span>\` : '';
|
|
1818
|
+
const rowClass = obs.agentTaskIndex != null ? 'agent-task-row' : '';
|
|
1819
|
+
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>\`;
|
|
1820
|
+
}).join("");
|
|
1821
|
+
observationsTable += \`</tbody></table></div>\`;
|
|
1822
|
+
// Details for selected observation
|
|
1823
|
+
const selObs = currentObservations[window.step5SelectedObservation];
|
|
1824
|
+
if (selObs) {
|
|
1825
|
+
const inputText = toDisplayText(selObs.input, selObs.type);
|
|
1826
|
+
const outputText = toDisplayText(selObs.output, selObs.type);
|
|
1827
|
+
const detailId = 'step5-orig-' + window.step5SelectedObservation;
|
|
1828
|
+
const filePathHtml = selObs.type === "GENERATION"
|
|
1829
|
+
? '<div class="file-path-placeholder"></div>'
|
|
1830
|
+
: renderFilePath(getObsFilePath(selObs));
|
|
1831
|
+
const _dur5orig = computeDurationMs(selObs);
|
|
1832
|
+
detailsSection = \`<div class="detail-sections" id="\${detailId}">
|
|
1833
|
+
\${filePathHtml}
|
|
1834
|
+
\${renderModel(selObs)}
|
|
1835
|
+
\${_dur5orig != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5orig)}</pre></div>\` : ''}
|
|
1836
|
+
\${renderUsage(selObs)}
|
|
1837
|
+
<div class="detail-section">
|
|
1838
|
+
<div class="detail-title">Input</div>
|
|
1839
|
+
<pre class="detail-pre">\${esc(inputText)}</pre>
|
|
1840
|
+
</div>
|
|
1841
|
+
<div class="detail-section">
|
|
1842
|
+
<div class="detail-title">Output</div>
|
|
1843
|
+
<pre class="detail-pre">\${esc(outputText)}</pre>
|
|
1844
|
+
</div>
|
|
1845
|
+
</div>\`;
|
|
1846
|
+
if (selObs.type === "GENERATION") setTimeout(() => resolveGenFilePath(selObs, detailId), 0);
|
|
1847
|
+
}
|
|
1848
|
+
} else {
|
|
1849
|
+
// Live traces: index 1 → traces[0], index 2 → traces[1], …
|
|
1850
|
+
const liveTrace = traces[window.step5SelectedTrace - 1];
|
|
1851
|
+
if (liveTrace) {
|
|
1852
|
+
const actions = Array.isArray(liveTrace.observations) ? liveTrace.observations : [];
|
|
1853
|
+
const traceIdx = window.step5SelectedTrace - 1;
|
|
1854
|
+
const _rerunDisabled2 = step5RunMeta.loading || step5RerunInFlight;
|
|
1855
|
+
observationsTable += \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
|
1856
|
+
<div class="trace-section-title" style="margin-bottom:0">Observations</div>
|
|
1857
|
+
<button class="btn btn-primary" style="padding:4px 10px;font-size:12px;" onclick="rerunFullFlow(this)" \${_rerunDisabled2 ? 'disabled' : ''}>▶ Rerun</button>
|
|
1858
|
+
</div>
|
|
1859
|
+
<div class="observation-table-wrap">
|
|
1860
|
+
<table class="observation-table">
|
|
1861
|
+
<thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
|
|
1862
|
+
<tbody>\`;
|
|
1863
|
+
observationsTable += actions.map((action, j) => {
|
|
1864
|
+
const isSelected = j === window.step5SelectedObservation;
|
|
1865
|
+
const name = action.name || action.id || ("Observation " + (j + 1));
|
|
1866
|
+
const type = action.type || "UNKNOWN";
|
|
1867
|
+
const typeClass = type === "TOOL" ? "tool" : "ai";
|
|
1868
|
+
const agentBadge = action.agentTaskIndex != null ? \`<span class="agent-task-badge">T\${action.agentTaskIndex + 1}</span>\` : '';
|
|
1869
|
+
const frozenBadge = action.isFrozen ? '<span class="frozen-tag">Frozen</span>' : '';
|
|
1870
|
+
const rowClasses = [
|
|
1871
|
+
isSelected ? 'selected' : '',
|
|
1872
|
+
action.agentTaskIndex != null ? 'agent-task-row' : '',
|
|
1873
|
+
action.isFrozen ? 'frozen-row' : '',
|
|
1874
|
+
].filter(Boolean).join(' ');
|
|
1875
|
+
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>\`;
|
|
1876
|
+
}).join("");
|
|
1877
|
+
observationsTable += \`</tbody></table></div>\`;
|
|
1878
|
+
// Details for selected observation
|
|
1879
|
+
if (actions[window.step5SelectedObservation]) {
|
|
1880
|
+
const obs = actions[window.step5SelectedObservation];
|
|
1881
|
+
const inputText = toDisplayText(obs.input, obs.type);
|
|
1882
|
+
const outputText = toDisplayText(obs.output, obs.type);
|
|
1883
|
+
const detailId = 'step5-live-' + (window.step5SelectedTrace - 1) + '-' + window.step5SelectedObservation;
|
|
1884
|
+
const filePathHtml = obs.type === "GENERATION"
|
|
1885
|
+
? '<div class="file-path-placeholder"></div>'
|
|
1886
|
+
: renderFilePath(getObsFilePath(obs));
|
|
1887
|
+
|
|
1888
|
+
// For the first observation (workflow output), show Original Output for comparison
|
|
1889
|
+
let originalOutputSection = '';
|
|
1890
|
+
if (window.step5SelectedObservation === 0 && currentObservations[0]) {
|
|
1891
|
+
const originalOutputText = toDisplayText(currentObservations[0].output, currentObservations[0].type);
|
|
1892
|
+
originalOutputSection = \`<div class="detail-section">
|
|
1893
|
+
<div class="detail-title">Original Output</div>
|
|
1894
|
+
<pre class="detail-pre">\${esc(originalOutputText)}</pre>
|
|
1895
|
+
</div>\`;
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
// Agent steps: always show "Resume from Task X" button
|
|
1899
|
+
// Non-agent steps: show "Run from here" only if they have workflowEventId (HTTP/DB events)
|
|
1900
|
+
// Steps without agentTaskIndex and without workflowEventId get no button
|
|
1901
|
+
let runFromBpHtml = '';
|
|
1902
|
+
if (obs.agentTaskIndex != null) {
|
|
1903
|
+
runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="resume-agent-btn" onclick="resumeAgentFromTask(\${traceIdx},\${window.step5SelectedObservation},\${obs.agentTaskIndex},event)">▶ Resume from Task \${obs.agentTaskIndex + 1}</button></div>\`;
|
|
1904
|
+
} else if (obs.workflowEventId != null) {
|
|
1905
|
+
runFromBpHtml = \`<div class="detail-section" style="padding:8px 12px;"><button class="run-from-bp-btn" onclick="runFromBreakpoint(\${traceIdx},\${window.step5SelectedObservation},event)">▶ Run from here</button></div>\`;
|
|
1906
|
+
}
|
|
1907
|
+
const _dur5live = computeDurationMs(obs);
|
|
1908
|
+
detailsSection = \`<div class="detail-sections" id="\${detailId}">
|
|
1909
|
+
\${filePathHtml}
|
|
1910
|
+
\${runFromBpHtml}
|
|
1911
|
+
\${renderModel(obs)}
|
|
1912
|
+
\${_dur5live != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur5live)}</pre></div>\` : ''}
|
|
1913
|
+
\${renderUsage(obs)}
|
|
1914
|
+
<div class="detail-section">
|
|
1915
|
+
<div class="detail-title">Input</div>
|
|
1916
|
+
<pre class="detail-pre">\${esc(inputText)}</pre>
|
|
1917
|
+
</div>
|
|
1918
|
+
\${originalOutputSection}
|
|
1919
|
+
<div class="detail-section">
|
|
1920
|
+
<div class="detail-title">Output</div>
|
|
1921
|
+
<pre class="detail-pre">\${esc(outputText)}</pre>
|
|
1922
|
+
</div>
|
|
1923
|
+
</div>\`;
|
|
1924
|
+
if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
|
|
1925
|
+
}
|
|
1926
|
+
}
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
if (step5RunMeta.loading) {
|
|
1930
|
+
detailsSection = \`<div class="detail-sections">
|
|
1931
|
+
<div class="detail-section">
|
|
1932
|
+
<div class="detail-title">Validation</div>
|
|
1933
|
+
<pre class="detail-pre">Running \${step5RunMeta.runCount || 1} workflow run(s) in \${step5RunMeta.sequential ? 'sequence' : 'parallel'} mode...</pre>
|
|
1934
|
+
</div>
|
|
1935
|
+
</div>\`;
|
|
1936
|
+
} else if (step5RunMeta.error && !detailsSection) {
|
|
1937
|
+
detailsSection = \`<div class="detail-sections">
|
|
1938
|
+
<div class="detail-section">
|
|
1939
|
+
<div class="detail-title">Validation Error</div>
|
|
1940
|
+
<pre class="detail-pre">\${esc(step5RunMeta.error)}</pre>
|
|
1941
|
+
</div>
|
|
1942
|
+
</div>\`;
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
// Render 3 sibling columns inside the CSS grid
|
|
1946
|
+
const traceLayout = document.getElementsByClassName("trace-layout")[0];
|
|
1947
|
+
traceLayout.innerHTML = \`
|
|
1948
|
+
<div class="trace-left">\${traceTable}</div>
|
|
1949
|
+
<div class="trace-left">\${observationsTable || '<div class="trace-section-title">Observations</div>'}</div>
|
|
1950
|
+
<div class="trace-right">\${detailsSection}</div>
|
|
1951
|
+
\`;
|
|
1952
|
+
// Restore scroll positions after DOM rebuild
|
|
1953
|
+
const _newTls = traceLayout.querySelectorAll('.trace-left');
|
|
1954
|
+
const _w1 = _newTls[0]?.querySelector('.observation-table-wrap');
|
|
1955
|
+
const _w2 = _newTls[1]?.querySelector('.observation-table-wrap');
|
|
1956
|
+
if (_w1) _w1.scrollTop = _step5Col1Scroll;
|
|
1957
|
+
if (_w2) _w2.scrollTop = _step5Col2Scroll;
|
|
1958
|
+
return;
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
if (currentStep === 4) {
|
|
1962
|
+
const traceLayout = document.getElementsByClassName("trace-layout")[0];
|
|
1963
|
+
traceLayout.classList.remove("step-5");
|
|
1964
|
+
traceLayout.classList.add("step-4");
|
|
1965
|
+
const obsIndices = Array.from(checkedObservations);
|
|
1966
|
+
|
|
1967
|
+
// Column 1: Steps (observation list)
|
|
1968
|
+
let col1 = \`<div class="trace-section-title">Steps</div>
|
|
1969
|
+
<div class="observation-table-wrap">
|
|
1970
|
+
<table class="observation-table">
|
|
1971
|
+
<thead><tr><th>Name</th><th>Type</th><th style="width:80px;">Duration</th></tr></thead>
|
|
1972
|
+
<tbody>\`;
|
|
1973
|
+
col1 += obsIndices.map(idx => {
|
|
1974
|
+
const obs = currentObservations[idx];
|
|
1975
|
+
const isSelected = idx === selectedObservationIndex;
|
|
1976
|
+
const name = obs.name || obs.id || ('Observation ' + (idx + 1));
|
|
1977
|
+
const type = obs.type || 'UNKNOWN';
|
|
1978
|
+
const typeClass = type === 'TOOL' ? 'tool' : 'ai';
|
|
1979
|
+
const history = rerunHistory.get(idx) || [];
|
|
1980
|
+
const latest = history[history.length - 1];
|
|
1981
|
+
const badge = latest
|
|
1982
|
+
? (latest.running ? ' <span class="rerun-status running">⟳</span>'
|
|
1983
|
+
: latest.ok ? ' <span class="rerun-status success">✓</span>'
|
|
1984
|
+
: ' <span class="rerun-status error">✗</span>')
|
|
1985
|
+
: '';
|
|
1986
|
+
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>\`;
|
|
1987
|
+
}).join('');
|
|
1988
|
+
col1 += \`</tbody></table></div>\`;
|
|
1989
|
+
|
|
1990
|
+
// Column 2: Runs for the selected observation
|
|
1991
|
+
const inFlight = selectedObservationIndex >= 0 && rerunInFlight.has(selectedObservationIndex);
|
|
1992
|
+
let col2 = \`<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
|
1993
|
+
<div class="trace-section-title" style="margin-bottom:0">Runs</div>
|
|
1994
|
+
\${selectedObservationIndex >= 0 ? \`<button class="btn btn-primary" style="padding:4px 12px;font-size:12px;" onclick="rerunObservation(\${selectedObservationIndex})" \${inFlight ? 'disabled' : ''}>\${inFlight ? 'Running...' : 'Rerun'}</button>\` : ''}
|
|
1995
|
+
</div>\`;
|
|
1996
|
+
if (selectedObservationIndex >= 0) {
|
|
1997
|
+
const history = rerunHistory.get(selectedObservationIndex) || [];
|
|
1998
|
+
if (history.length === 0) {
|
|
1999
|
+
col2 += \`<div style="color:#999;font-size:13px;padding:8px;">No runs yet. Click Rerun to start.</div>\`;
|
|
2000
|
+
} else {
|
|
2001
|
+
col2 += \`<div class="observation-table-wrap"><table class="observation-table"><thead><tr><th>Run</th><th>Status</th></tr></thead><tbody>\`;
|
|
2002
|
+
col2 += history.map((run, ri) => {
|
|
2003
|
+
const isSelRun = ri === step4SelectedRun;
|
|
2004
|
+
const status = run.running ? '⟳ Running' : (run.ok ? '✓ Complete' : '✗ Failed');
|
|
2005
|
+
return \`<tr class="\${isSelRun ? 'selected' : ''}" onclick="window.step4SelectRun(\${ri})"><td>Run \${run.runNumber}</td><td>\${status}</td></tr>\`;
|
|
2006
|
+
}).join('');
|
|
2007
|
+
col2 += \`</tbody></table></div>\`;
|
|
2008
|
+
}
|
|
2009
|
+
} else {
|
|
2010
|
+
col2 += \`<div style="color:#999;font-size:13px;padding:8px;">Select a step to view runs.</div>\`;
|
|
2011
|
+
}
|
|
2012
|
+
|
|
2013
|
+
// Column 3: Details for the selected run
|
|
2014
|
+
let col3 = '';
|
|
2015
|
+
if (selectedObservationIndex >= 0) {
|
|
2016
|
+
const obs = currentObservations[selectedObservationIndex];
|
|
2017
|
+
const history = rerunHistory.get(selectedObservationIndex) || [];
|
|
2018
|
+
const run = step4SelectedRun >= 0 ? history[step4SelectedRun] : null;
|
|
2019
|
+
const inputText = toDisplayText(obs.input, obs.type);
|
|
2020
|
+
const outputText = toDisplayText(obs.output, obs.type);
|
|
2021
|
+
const detailId = 'step4-detail-' + selectedObservationIndex + '-' + step4SelectedRun;
|
|
2022
|
+
const filePathHtml = obs.type === "GENERATION"
|
|
2023
|
+
? '<div class="file-path-placeholder"></div>'
|
|
2024
|
+
: renderFilePath(getObsFilePath(obs));
|
|
2025
|
+
let currentOutputSection = '';
|
|
2026
|
+
if (run) {
|
|
2027
|
+
if (run.running) {
|
|
2028
|
+
currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">Running...</pre></div>\`;
|
|
2029
|
+
} else if (run.ok) {
|
|
2030
|
+
currentOutputSection = \`<div class="detail-section"><div class="detail-title">Current Output</div><pre class="detail-pre">\${esc(toDisplayText(run.output, obs.type))}</pre></div>\`;
|
|
2031
|
+
} else {
|
|
2032
|
+
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>\`;
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
// Editable AI input UI
|
|
2036
|
+
let inputSection = '';
|
|
2037
|
+
if (obs.type === "GENERATION") {
|
|
2038
|
+
const hasUpdate = updatedInputs.has(selectedObservationIndex);
|
|
2039
|
+
inputSection += \`<div class="detail-section">
|
|
2040
|
+
<div class="detail-title">Input</div>
|
|
2041
|
+
<pre class="detail-pre" style="position:relative;">\${esc(toDisplayText(obs.input, obs.type))}
|
|
2042
|
+
<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>
|
|
2043
|
+
<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>
|
|
2044
|
+
</pre>
|
|
2045
|
+
</div>\`;
|
|
2046
|
+
if (hasUpdate) {
|
|
2047
|
+
inputSection += \`<div class="detail-section updated-input-section">
|
|
2048
|
+
<div class="detail-title">Update Input</div>
|
|
2049
|
+
<textarea id="editInputTextarea" class="detail-pre" style="width:100%;height:400px;">\${esc(updatedInputs.get(selectedObservationIndex))}</textarea>
|
|
2050
|
+
<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>
|
|
2051
|
+
</div>\`;
|
|
2052
|
+
}
|
|
2053
|
+
} else {
|
|
2054
|
+
inputSection += \`<div class="detail-section"><div class="detail-title">Input</div><pre class="detail-pre">\${esc(toDisplayText(obs.input, obs.type))}</pre></div>\`;
|
|
2055
|
+
}
|
|
2056
|
+
const _dur4 = computeDurationMs(obs);
|
|
2057
|
+
const currentDurSection = (run && !run.running && run.ok && run.currentDurationMs != null)
|
|
2058
|
+
? \`<div class="detail-section"><div class="detail-title">Current Duration</div><pre class="detail-pre">\${formatDuration(run.currentDurationMs)}</pre></div>\`
|
|
2059
|
+
: '';
|
|
2060
|
+
const currentUsageSection = (run && !run.running && run.ok && run.currentUsage && run.currentUsage.totalTokens > 0)
|
|
2061
|
+
? \`<div class="detail-section"><div class="detail-title">Current Usage</div><pre class="detail-pre">\${[
|
|
2062
|
+
run.currentUsage.inputTokens != null ? 'Input tokens: ' + run.currentUsage.inputTokens : null,
|
|
2063
|
+
run.currentUsage.outputTokens != null ? 'Output tokens: ' + run.currentUsage.outputTokens : null,
|
|
2064
|
+
run.currentUsage.totalTokens != null ? 'Total tokens: ' + run.currentUsage.totalTokens : null,
|
|
2065
|
+
].filter(Boolean).join('\\n')}</pre></div>\`
|
|
2066
|
+
: '';
|
|
2067
|
+
col3 = \`<div class="detail-sections" id="\${detailId}">
|
|
2068
|
+
\${filePathHtml}
|
|
2069
|
+
\${renderModel(obs)}
|
|
2070
|
+
\${_dur4 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur4)}</pre></div>\` : ''}
|
|
2071
|
+
\${currentDurSection}
|
|
2072
|
+
\${renderUsage(obs)}
|
|
2073
|
+
\${currentUsageSection}
|
|
2074
|
+
\${inputSection}
|
|
2075
|
+
<div class="detail-section"><div class="detail-title">Output</div><pre class="detail-pre">\${esc(outputText)}</pre></div>
|
|
2076
|
+
\${currentOutputSection}
|
|
2077
|
+
</div>\`;
|
|
2078
|
+
if (obs.type === "GENERATION") setTimeout(() => resolveGenFilePath(obs, detailId), 0);
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
traceLayout.innerHTML = \`
|
|
2082
|
+
<div class="trace-left">\${col1}</div>
|
|
2083
|
+
<div class="trace-left">\${col2}</div>
|
|
2084
|
+
<div class="trace-right">\${col3}</div>
|
|
2085
|
+
\`;
|
|
2086
|
+
// Auto-select first observation if none selected
|
|
2087
|
+
if (obsIndices.length > 0 && selectedObservationIndex === -1) {
|
|
2088
|
+
window.step4SelectObservation(obsIndices[0]);
|
|
2089
|
+
}
|
|
2090
|
+
return;
|
|
2091
|
+
}
|
|
2092
|
+
|
|
2093
|
+
const traceLayoutEl = document.getElementsByClassName("trace-layout")[0];
|
|
2094
|
+
if (traceLayoutEl.classList.contains("step-5") || traceLayoutEl.classList.contains("step-4")) {
|
|
2095
|
+
traceLayoutEl.classList.remove("step-5");
|
|
2096
|
+
traceLayoutEl.classList.remove("step-4");
|
|
2097
|
+
let headerHtml = '';
|
|
2098
|
+
if (currentStep === 3) {
|
|
2099
|
+
headerHtml = '<tr><th style="width: 40px;">Check</th><th>Name</th><th>Type</th></tr>';
|
|
2100
|
+
}
|
|
2101
|
+
traceLayoutEl.innerHTML = \`
|
|
2102
|
+
<div class="trace-left">
|
|
2103
|
+
<div class="trace-section-title">Observations</div>
|
|
2104
|
+
<div class="observation-table-wrap">
|
|
2105
|
+
<table class="observation-table">
|
|
2106
|
+
<thead id="observationTableHead">\${headerHtml}</thead>
|
|
2107
|
+
<tbody id="observationTableBody"></tbody>
|
|
2108
|
+
</table>
|
|
2109
|
+
</div>
|
|
2110
|
+
</div>
|
|
2111
|
+
<div class="trace-right">
|
|
2112
|
+
<div id="observationDetail"></div>
|
|
2113
|
+
</div>
|
|
2114
|
+
\`;
|
|
2115
|
+
observationTableBody = document.getElementById("observationTableBody");
|
|
2116
|
+
observationDetail = document.getElementById("observationDetail");
|
|
2117
|
+
}
|
|
2118
|
+
|
|
2119
|
+
const obsToRender = currentObservations;
|
|
2120
|
+
const indices = currentObservations.map((_, i) => i);
|
|
2121
|
+
|
|
2122
|
+
if (!obsToRender.length) {
|
|
2123
|
+
observationTableBody.innerHTML = '<tr><td colspan="3" style="padding: 16px; color: #777;">No observations found.</td></tr>';
|
|
2124
|
+
return;
|
|
2125
|
+
}
|
|
2126
|
+
|
|
2127
|
+
observationTableBody.innerHTML = obsToRender.map((obs, displayIndex) => {
|
|
2128
|
+
const actualIndex = indices[displayIndex];
|
|
2129
|
+
const isSelected = actualIndex === selectedObservationIndex;
|
|
2130
|
+
const isChecked = checkedObservations.has(actualIndex);
|
|
2131
|
+
const name = obs.name || obs.id || ("Observation " + (displayIndex + 1));
|
|
2132
|
+
const type = obs.type || "UNKNOWN";
|
|
2133
|
+
const typeClass = type === "TOOL" ? "tool" : "ai";
|
|
2134
|
+
// Step 3: Mark broken - show checkboxes
|
|
2135
|
+
return \`<tr class="\${isSelected ? "selected" : ""}">
|
|
2136
|
+
<td style="width: 40px;"><input type="checkbox" class="obs-checkbox" value="\${actualIndex}" \${isChecked ? "checked" : ""}></td>
|
|
2137
|
+
<td onclick="selectObservation(\${actualIndex})">\${esc(name)}</td>
|
|
2138
|
+
<td><span class="obs-type \${typeClass}">\${esc(type)}</span></td>
|
|
2139
|
+
<td style="color:#888;font-size:12px;">\${formatDuration(computeDurationMs(obs))}</td>
|
|
2140
|
+
</tr>\`;
|
|
2141
|
+
}).join("");
|
|
2142
|
+
|
|
2143
|
+
document.querySelectorAll(".obs-checkbox").forEach(checkbox => {
|
|
2144
|
+
checkbox.onchange = (e) => {
|
|
2145
|
+
const idx = parseInt(e.target.value);
|
|
2146
|
+
if (e.target.checked) {
|
|
2147
|
+
checkedObservations.add(idx);
|
|
2148
|
+
} else {
|
|
2149
|
+
checkedObservations.delete(idx);
|
|
2150
|
+
}
|
|
2151
|
+
};
|
|
2152
|
+
});
|
|
2153
|
+
// Restore scroll position if previously saved
|
|
2154
|
+
if (currentStep === 5 && prevStep5ObsScrollTop !== null) {
|
|
2155
|
+
// After rendering, restore scroll for the observations table in the second .trace-left
|
|
2156
|
+
const traceLefts = document.querySelectorAll('.trace-left');
|
|
2157
|
+
if (traceLefts.length > 1) {
|
|
2158
|
+
const obsWrap = traceLefts[1].querySelector('.observation-table-wrap');
|
|
2159
|
+
if (obsWrap) obsWrap.scrollTop = prevStep5ObsScrollTop;
|
|
2160
|
+
}
|
|
2161
|
+
} else {
|
|
2162
|
+
obsTableWrap = document.querySelector('.observation-table-wrap');
|
|
2163
|
+
if (obsTableWrap && prevScrollTop !== null) {
|
|
2164
|
+
obsTableWrap.scrollTop = prevScrollTop;
|
|
2165
|
+
}
|
|
2166
|
+
}
|
|
2167
|
+
}
|
|
2168
|
+
|
|
2169
|
+
function selectObservation(index) {
|
|
2170
|
+
// Preserve scroll position of observation-table-wrap
|
|
2171
|
+
let obsTableWrap = document.querySelector('.observation-table-wrap');
|
|
2172
|
+
let prevScrollTop = obsTableWrap ? obsTableWrap.scrollTop : null;
|
|
2173
|
+
selectedObservationIndex = index;
|
|
2174
|
+
renderObservationTable();
|
|
2175
|
+
// Restore scroll position after rendering
|
|
2176
|
+
obsTableWrap = document.querySelector('.observation-table-wrap');
|
|
2177
|
+
if (obsTableWrap && prevScrollTop !== null) {
|
|
2178
|
+
obsTableWrap.scrollTop = prevScrollTop;
|
|
2179
|
+
}
|
|
2180
|
+
const obs = currentObservations[index];
|
|
2181
|
+
const inputText = toDisplayText(obs.input, obs.type);
|
|
2182
|
+
const outputText = toDisplayText(obs.output, obs.type);
|
|
2183
|
+
const detailId = 'obs-detail-' + index;
|
|
2184
|
+
const filePathHtml = obs.type === "GENERATION"
|
|
2185
|
+
? '<div class="file-path-placeholder"></div>'
|
|
2186
|
+
: renderFilePath(getObsFilePath(obs));
|
|
2187
|
+
|
|
2188
|
+
const _dur3 = computeDurationMs(obs);
|
|
2189
|
+
observationDetail.innerHTML = \`<div class="detail-sections" id="\${detailId}">
|
|
2190
|
+
\${filePathHtml}
|
|
2191
|
+
\${renderModel(obs)}
|
|
2192
|
+
\${_dur3 != null ? \`<div class="detail-section"><div class="detail-title">Duration</div><pre class="detail-pre">\${formatDuration(_dur3)}</pre></div>\` : ''}
|
|
2193
|
+
\${renderUsage(obs)}
|
|
2194
|
+
<div class="detail-section">
|
|
2195
|
+
<div class="detail-title">Input</div>
|
|
2196
|
+
<pre class="detail-pre">\${esc(inputText)}</pre>
|
|
2197
|
+
</div>
|
|
2198
|
+
<div class="detail-section">
|
|
2199
|
+
<div class="detail-title">Output</div>
|
|
2200
|
+
<pre class="detail-pre">\${esc(outputText)}</pre>
|
|
2201
|
+
</div>
|
|
2202
|
+
</div>\`;
|
|
2203
|
+
if (obs.type === "GENERATION") resolveGenFilePath(obs, detailId);
|
|
2204
|
+
}
|
|
2205
|
+
|
|
2206
|
+
async function rerunObservation(index) {
|
|
2207
|
+
const obs = currentObservations[index];
|
|
2208
|
+
let inputToUse = obs.input;
|
|
2209
|
+
if (obs.type === "GENERATION" && updatedInputs.has(index)) {
|
|
2210
|
+
inputToUse = updatedInputs.get(index);
|
|
2211
|
+
}
|
|
2212
|
+
// Proceed with rerun logic using inputToUse
|
|
2213
|
+
console.log('Rerunning observation with input:', inputToUse);
|
|
2214
|
+
const history = rerunHistory.get(index) || [];
|
|
2215
|
+
const newRun = { runNumber: history.length + 1, running: true, ok: null };
|
|
2216
|
+
history.push(newRun);
|
|
2217
|
+
rerunHistory.set(index, history);
|
|
2218
|
+
rerunInFlight.add(index);
|
|
2219
|
+
if (selectedObservationIndex === index) {
|
|
2220
|
+
step4SelectedRun = history.length - 1;
|
|
2221
|
+
}
|
|
2222
|
+
renderObservationTable();
|
|
2223
|
+
try {
|
|
2224
|
+
const payload = { observation: { ...obs, input: inputToUse } };
|
|
2225
|
+
const response = await fetch('/api/rerun-observation', {
|
|
2226
|
+
method: 'POST',
|
|
2227
|
+
headers: { 'Content-Type': 'application/json' },
|
|
2228
|
+
body: JSON.stringify(payload),
|
|
2229
|
+
});
|
|
2230
|
+
const data = await response.json();
|
|
2231
|
+
newRun.running = false;
|
|
2232
|
+
if (response.ok && data.ok) {
|
|
2233
|
+
newRun.ok = true;
|
|
2234
|
+
newRun.output = data.currentOutput;
|
|
2235
|
+
newRun.currentDurationMs = data.currentDurationMs ?? null;
|
|
2236
|
+
newRun.currentUsage = data.currentUsage ?? null;
|
|
2237
|
+
} else {
|
|
2238
|
+
newRun.ok = false;
|
|
2239
|
+
newRun.error = data.error || 'Rerun failed.';
|
|
2240
|
+
}
|
|
2241
|
+
} catch (err) {
|
|
2242
|
+
newRun.running = false;
|
|
2243
|
+
newRun.ok = false;
|
|
2244
|
+
newRun.error = err && err.message ? err.message : String(err);
|
|
2245
|
+
} finally {
|
|
2246
|
+
rerunInFlight.delete(index);
|
|
2247
|
+
renderObservationTable();
|
|
2248
|
+
}
|
|
2249
|
+
}
|
|
2250
|
+
|
|
2251
|
+
async function runFromBreakpoint(traceIdx, obsIdx, evt) {
|
|
2252
|
+
const btn = evt.target;
|
|
2253
|
+
const liveTrace = step5RunTraces[traceIdx];
|
|
2254
|
+
if (!liveTrace) return;
|
|
2255
|
+
const obs = liveTrace.observations[obsIdx];
|
|
2256
|
+
if (!obs || obs.workflowEventId == null) return;
|
|
2257
|
+
|
|
2258
|
+
btn.disabled = true;
|
|
2259
|
+
btn.textContent = 'Running…';
|
|
2260
|
+
|
|
2261
|
+
try {
|
|
2262
|
+
const payload = {
|
|
2263
|
+
workflowName: selectedWorkflow ? selectedWorkflow.name : '',
|
|
2264
|
+
checkpoint: obs.workflowEventId,
|
|
2265
|
+
snapshotId: liveTrace.snapshotId,
|
|
2266
|
+
observations: currentObservations,
|
|
2267
|
+
toolMockConfig: window._toolMockConfig || {},
|
|
2268
|
+
};
|
|
2269
|
+
const response = await fetch('/api/run-from-breakpoint', {
|
|
2270
|
+
method: 'POST',
|
|
2271
|
+
headers: { 'Content-Type': 'application/json' },
|
|
2272
|
+
body: JSON.stringify(payload),
|
|
2273
|
+
});
|
|
2274
|
+
const data = await response.json();
|
|
2275
|
+
if (response.ok) {
|
|
2276
|
+
// Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
|
|
2277
|
+
const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
|
|
2278
|
+
const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
|
|
2279
|
+
const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
|
|
2280
|
+
const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
|
|
2281
|
+
step5RunTraces.push(newTrace);
|
|
2282
|
+
persistTraces();
|
|
2283
|
+
renderObservationTable();
|
|
2284
|
+
} else {
|
|
2285
|
+
btn.textContent = '✗ ' + (data.error || 'Failed');
|
|
2286
|
+
btn.disabled = false;
|
|
2287
|
+
}
|
|
2288
|
+
} catch (err) {
|
|
2289
|
+
btn.textContent = '✗ Error';
|
|
2290
|
+
btn.disabled = false;
|
|
2291
|
+
}
|
|
2292
|
+
}
|
|
2293
|
+
|
|
2294
|
+
async function rerunFullFlow(btn) {
|
|
2295
|
+
if (step5RerunInFlight || step5RunMeta.loading) return;
|
|
2296
|
+
step5RerunInFlight = true;
|
|
2297
|
+
renderObservationTable();
|
|
2298
|
+
try {
|
|
2299
|
+
const payload = { workflowName: selectedWorkflow?.name, runCount: 1, sequential: false, observations: currentObservations };
|
|
2300
|
+
const response = await fetch('/api/validate-workflow', {
|
|
2301
|
+
method: 'POST',
|
|
2302
|
+
headers: { 'Content-Type': 'application/json' },
|
|
2303
|
+
body: JSON.stringify(payload),
|
|
2304
|
+
});
|
|
2305
|
+
const data = await response.json();
|
|
2306
|
+
if (response.ok && data.ok && Array.isArray(data.traces) && data.traces.length > 0) {
|
|
2307
|
+
const newTrace = { ...data.traces[0], runNumber: step5RunTraces.length + 1 };
|
|
2308
|
+
step5RunTraces.push(newTrace);
|
|
2309
|
+
persistTraces();
|
|
2310
|
+
window.step5SelectedTrace = step5RunTraces.length;
|
|
2311
|
+
window.step5SelectedObservation = 0;
|
|
2312
|
+
}
|
|
2313
|
+
} catch (err) {
|
|
2314
|
+
// silently ignore — dashboard may not be connected
|
|
2315
|
+
} finally {
|
|
2316
|
+
step5RerunInFlight = false;
|
|
2317
|
+
renderObservationTable();
|
|
2318
|
+
}
|
|
2319
|
+
}
|
|
2320
|
+
|
|
2321
|
+
async function resumeAgentFromTask(traceIdx, obsIdx, taskIndex, evt) {
|
|
2322
|
+
const btn = evt.target;
|
|
2323
|
+
const liveTrace = step5RunTraces[traceIdx];
|
|
2324
|
+
if (!liveTrace) return;
|
|
2325
|
+
|
|
2326
|
+
// Extract AgentPlan from the workflow's currentOutput
|
|
2327
|
+
const currentOutput = liveTrace.currentOutput;
|
|
2328
|
+
const agentPlan = currentOutput && typeof currentOutput === 'object' && Array.isArray(currentOutput.tasks)
|
|
2329
|
+
? currentOutput
|
|
2330
|
+
: null;
|
|
2331
|
+
if (!agentPlan) {
|
|
2332
|
+
alert('No agent plan found in this trace. Ensure the workflow returns an AgentPlan from executorAgent() or resumeAgentFromTrace().');
|
|
2333
|
+
return;
|
|
2334
|
+
}
|
|
2335
|
+
|
|
2336
|
+
btn.disabled = true;
|
|
2337
|
+
btn.textContent = 'Resuming…';
|
|
2338
|
+
|
|
2339
|
+
try {
|
|
2340
|
+
const payload = {
|
|
2341
|
+
workflowName: selectedWorkflow ? selectedWorkflow.name : '',
|
|
2342
|
+
taskIndex: taskIndex,
|
|
2343
|
+
agentState: {
|
|
2344
|
+
plan: agentPlan,
|
|
2345
|
+
trace: [],
|
|
2346
|
+
resumeFromTaskIndex: taskIndex,
|
|
2347
|
+
},
|
|
2348
|
+
snapshotId: liveTrace.snapshotId,
|
|
2349
|
+
toolMockConfig: window._toolMockConfig || {},
|
|
2350
|
+
};
|
|
2351
|
+
const response = await fetch('/api/resume-agent-from-task', {
|
|
2352
|
+
method: 'POST',
|
|
2353
|
+
headers: { 'Content-Type': 'application/json' },
|
|
2354
|
+
body: JSON.stringify(payload),
|
|
2355
|
+
});
|
|
2356
|
+
const data = await response.json();
|
|
2357
|
+
if (response.ok) {
|
|
2358
|
+
// Sub-trace naming: "Trace-N-M" where N = parent name, M = resume count from parent
|
|
2359
|
+
const parentTraceName = liveTrace.traceName ?? \`Trace-\${traceIdx + 1}\`;
|
|
2360
|
+
const siblingCount = step5RunTraces.filter(t => t.parentTraceName === parentTraceName).length;
|
|
2361
|
+
const traceName = \`\${parentTraceName}-\${siblingCount + 1}\`;
|
|
2362
|
+
const newTrace = { ...data, runNumber: step5RunTraces.length + 1, traceName, parentTraceName };
|
|
2363
|
+
step5RunTraces.push(newTrace);
|
|
2364
|
+
persistTraces();
|
|
2365
|
+
renderObservationTable();
|
|
2366
|
+
} else {
|
|
2367
|
+
btn.textContent = '✗ ' + (data.error || 'Failed');
|
|
2368
|
+
btn.disabled = false;
|
|
2369
|
+
}
|
|
2370
|
+
} catch (err) {
|
|
2371
|
+
btn.textContent = '✗ Error';
|
|
2372
|
+
btn.disabled = false;
|
|
2373
|
+
}
|
|
2374
|
+
}
|
|
2375
|
+
|
|
2376
|
+
window.enableInputEditing = function(detailId, index) {
|
|
2377
|
+
const obs = currentObservations[index];
|
|
2378
|
+
const current = updatedInputs.has(index)
|
|
2379
|
+
? updatedInputs.get(index)
|
|
2380
|
+
: toDisplayText(obs.input, obs.type);
|
|
2381
|
+
updatedInputs.set(index, current);
|
|
2382
|
+
renderObservationTable();
|
|
2383
|
+
};
|
|
2384
|
+
|
|
2385
|
+
window.resetInput = function(detailId, index) {
|
|
2386
|
+
updatedInputs.delete(index);
|
|
2387
|
+
renderObservationTable();
|
|
2388
|
+
};
|
|
2389
|
+
|
|
2390
|
+
window.saveUpdatedInput = function(index) {
|
|
2391
|
+
const ta = document.getElementById('editInputTextarea');
|
|
2392
|
+
if (!ta) return;
|
|
2393
|
+
updatedInputs.set(index, ta.value);
|
|
2394
|
+
renderObservationTable();
|
|
2395
|
+
};
|
|
2396
|
+
|
|
2397
|
+
function getObsFilePath(obs) {
|
|
2398
|
+
if (obs && obs.type === "TOOL") {
|
|
2399
|
+
const tool = codeIndex.tools.find(t => t.name === obs.name);
|
|
2400
|
+
if (tool) return tool.lineNumber ? tool.filePath + ':' + tool.lineNumber : tool.filePath;
|
|
2401
|
+
}
|
|
2402
|
+
return null;
|
|
2403
|
+
}
|
|
2404
|
+
|
|
2405
|
+
function extractSystemPrompt(obs) {
|
|
2406
|
+
if (!obs || obs.type !== "GENERATION") return null;
|
|
2407
|
+
let input = obs.input;
|
|
2408
|
+
// Parse input if it's a JSON string
|
|
2409
|
+
if (
|
|
2410
|
+
typeof input === 'string' &&
|
|
2411
|
+
(input.startsWith('{') || input.startsWith('[')) &&
|
|
2412
|
+
(input.endsWith('}') || input.endsWith(']'))
|
|
2413
|
+
) {
|
|
2414
|
+
try {
|
|
2415
|
+
input = JSON.parse(input);
|
|
2416
|
+
} catch { /* not JSON */ }
|
|
2417
|
+
}
|
|
2418
|
+
const messages = Array.isArray(input) ? input
|
|
2419
|
+
: (input && Array.isArray(input.messages)) ? input.messages : [];
|
|
2420
|
+
const sys = messages.find(m => m && m.role === "system");
|
|
2421
|
+
if (!sys || !sys.content) return null;
|
|
2422
|
+
return String(sys.content).trim();
|
|
2423
|
+
}
|
|
2424
|
+
|
|
2425
|
+
function getSearchFragments(systemPrompt) {
|
|
2426
|
+
if (!systemPrompt || systemPrompt.length < 10) return [];
|
|
2427
|
+
const fragments = [];
|
|
2428
|
+
|
|
2429
|
+
// 1. First sentence (often unique: "You are an expert SQL generator...")
|
|
2430
|
+
const firstSentence = systemPrompt.split(/[.!?]\\n/)[0].trim();
|
|
2431
|
+
if (firstSentence.length >= 20 && firstSentence.length <= 100) {
|
|
2432
|
+
fragments.push(firstSentence);
|
|
2433
|
+
}
|
|
2434
|
+
|
|
2435
|
+
// 2. First 50 chars
|
|
2436
|
+
if (systemPrompt.length >= 40) {
|
|
2437
|
+
fragments.push(systemPrompt.slice(0, 50).trim());
|
|
2438
|
+
}
|
|
2439
|
+
|
|
2440
|
+
// 3. First 80 chars (if different from above)
|
|
2441
|
+
if (systemPrompt.length >= 80) {
|
|
2442
|
+
const fragment80 = systemPrompt.slice(0, 80).trim();
|
|
2443
|
+
if (!fragments.some(f => fragment80.startsWith(f))) {
|
|
2444
|
+
fragments.push(fragment80);
|
|
2445
|
+
}
|
|
2446
|
+
}
|
|
2447
|
+
|
|
2448
|
+
// 4. Try to find a unique phrase after common prefixes
|
|
2449
|
+
const afterYouAre = systemPrompt.match(/You are (?:an? )?([^.\\n]{15,60})/);
|
|
2450
|
+
if (afterYouAre && afterYouAre[1]) {
|
|
2451
|
+
fragments.push(afterYouAre[1].trim());
|
|
2452
|
+
}
|
|
2453
|
+
|
|
2454
|
+
return fragments.filter(f => f.length >= 15);
|
|
2455
|
+
}
|
|
2456
|
+
|
|
2457
|
+
async function resolveGenFilePath(obs, containerId) {
|
|
2458
|
+
const systemPrompt = extractSystemPrompt(obs);
|
|
2459
|
+
if (!systemPrompt) return;
|
|
2460
|
+
|
|
2461
|
+
const fragments = getSearchFragments(systemPrompt);
|
|
2462
|
+
if (fragments.length === 0) return;
|
|
2463
|
+
|
|
2464
|
+
try {
|
|
2465
|
+
// Try each fragment until we find a match
|
|
2466
|
+
for (const fragment of fragments) {
|
|
2467
|
+
const res = await fetch('/api/search-source?q=' + encodeURIComponent(fragment));
|
|
2468
|
+
const data = await res.json();
|
|
2469
|
+
if (data.filePath) {
|
|
2470
|
+
const label = data.lineNumber ? data.filePath + ':' + data.lineNumber : data.filePath;
|
|
2471
|
+
const container = document.getElementById(containerId);
|
|
2472
|
+
if (!container) return;
|
|
2473
|
+
const placeholder = container.querySelector('.file-path-placeholder');
|
|
2474
|
+
if (placeholder) placeholder.outerHTML = renderFilePath(label);
|
|
2475
|
+
return; // Success, stop trying
|
|
2476
|
+
}
|
|
2477
|
+
}
|
|
2478
|
+
} catch { /* ignore network errors */ }
|
|
2479
|
+
}
|
|
2480
|
+
|
|
2481
|
+
function stripAbsolutePath(filePath) {
|
|
2482
|
+
console.log('stripAbsolutePath called with:', filePath, 'repoRoot:', repoRoot);
|
|
2483
|
+
if (!filePath) return filePath;
|
|
2484
|
+
|
|
2485
|
+
// If we have a repo root, strip it from the absolute path
|
|
2486
|
+
if (repoRoot) {
|
|
2487
|
+
// Normalize path separators and handle case-insensitive filesystems
|
|
2488
|
+
let normalizedRoot = repoRoot.replace(/\\\\/g, '/').toLowerCase();
|
|
2489
|
+
let normalizedPath = filePath.replace(/\\\\/g, '/').toLowerCase();
|
|
2490
|
+
|
|
2491
|
+
// Ensure root ends with / for proper matching
|
|
2492
|
+
if (!normalizedRoot.endsWith('/')) {
|
|
2493
|
+
normalizedRoot += '/';
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
if (normalizedPath.startsWith(normalizedRoot)) {
|
|
2497
|
+
// Return the original case of the file path after the root
|
|
2498
|
+
return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
|
|
2499
|
+
}
|
|
2500
|
+
|
|
2501
|
+
// Also try without trailing slash
|
|
2502
|
+
normalizedRoot = normalizedRoot.slice(0, -1);
|
|
2503
|
+
if (normalizedPath.startsWith(normalizedRoot + '/')) {
|
|
2504
|
+
return filePath.replace(/\\\\/g, '/').substring(repoRoot.length).replace(/^\\//, '');
|
|
2505
|
+
}
|
|
2506
|
+
}
|
|
2507
|
+
|
|
2508
|
+
// Fallback if repo root not available or path doesn't match
|
|
2509
|
+
return filePath;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
function renderFilePath(filePath) {
|
|
2513
|
+
if (!filePath) return '';
|
|
2514
|
+
const cleanPath = stripAbsolutePath(filePath);
|
|
2515
|
+
return \`<div class="detail-section">
|
|
2516
|
+
<div class="detail-title">File Path</div>
|
|
2517
|
+
<pre class="detail-pre">\${esc(cleanPath)}</pre>
|
|
2518
|
+
</div>\`;
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
function renderModel(obs) {
|
|
2522
|
+
if (!obs || obs.type !== "GENERATION" || !obs.model) return '';
|
|
2523
|
+
let label = obs.model;
|
|
2524
|
+
if (obs.modelParameters) {
|
|
2525
|
+
const parts = [];
|
|
2526
|
+
if (obs.modelParameters.temperature != null) parts.push('temp=' + obs.modelParameters.temperature);
|
|
2527
|
+
if (obs.modelParameters.max_tokens != null) parts.push('max_tokens=' + obs.modelParameters.max_tokens);
|
|
2528
|
+
if (parts.length) label += ' (' + parts.join(', ') + ')';
|
|
2529
|
+
}
|
|
2530
|
+
return \`<div class="detail-section">
|
|
2531
|
+
<div class="detail-title">Model</div>
|
|
2532
|
+
<pre class="detail-pre">\${esc(label)}</pre>
|
|
2533
|
+
</div>\`;
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
function stripMarkdownCodeFence(text) {
|
|
2537
|
+
// Remove markdown code fences like \`\`\`sql, \`\`\`json, \`\`\`, etc.
|
|
2538
|
+
return text.replace(/^\`\`\`[\\w]*\\n?/gm, '').replace(/\\n?\`\`\`\$/gm, '').trim();
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
function toDisplayText(value, type) {
|
|
2542
|
+
if (value === null || value === undefined || value === "") {
|
|
2543
|
+
return "No data";
|
|
2544
|
+
}
|
|
2545
|
+
|
|
2546
|
+
// If it's a string, try to parse it first (might be JSON)
|
|
2547
|
+
if (typeof value === "string") {
|
|
2548
|
+
if (value.startsWith('[') || value.startsWith('{')) {
|
|
2549
|
+
try {
|
|
2550
|
+
const parsed = JSON.parse(value);
|
|
2551
|
+
value = parsed; // Use parsed version for further processing
|
|
2552
|
+
} catch {
|
|
2553
|
+
// Not JSON, strip markdown and return
|
|
2554
|
+
return stripMarkdownCodeFence(value);
|
|
2555
|
+
}
|
|
2556
|
+
} else {
|
|
2557
|
+
return stripMarkdownCodeFence(value);
|
|
2558
|
+
}
|
|
2559
|
+
}
|
|
2560
|
+
|
|
2561
|
+
// GENERATION input: raw messages array
|
|
2562
|
+
if (type === "GENERATION" && Array.isArray(value)) {
|
|
2563
|
+
return JSON.stringify(value, null, 2);
|
|
2564
|
+
}
|
|
2565
|
+
|
|
2566
|
+
// GENERATION input wrapped in {messages:[...]} (legacy / Langfuse format)
|
|
2567
|
+
if (type === "GENERATION" && value.messages) {
|
|
2568
|
+
return JSON.stringify(value.messages, null, 2);
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
// GENERATION output: assistant message object
|
|
2572
|
+
if (type === "GENERATION" && value.role) {
|
|
2573
|
+
const parts = [];
|
|
2574
|
+
// Text content
|
|
2575
|
+
if (value.content && typeof value.content === 'string') {
|
|
2576
|
+
parts.push(stripMarkdownCodeFence(value.content));
|
|
2577
|
+
} else if (Array.isArray(value.content)) {
|
|
2578
|
+
// Anthropic / Gemini content block array
|
|
2579
|
+
const text = value.content
|
|
2580
|
+
.filter(b => b && (b.type === 'text' || b.text))
|
|
2581
|
+
.map(b => b.text || b.value || '')
|
|
2582
|
+
.join('');
|
|
2583
|
+
if (text) parts.push(stripMarkdownCodeFence(text));
|
|
2584
|
+
// Anthropic tool_use blocks
|
|
2585
|
+
const toolUses = value.content.filter(b => b && b.type === 'tool_use');
|
|
2586
|
+
if (toolUses.length) parts.push('Tool calls:\\n' + JSON.stringify(toolUses, null, 2));
|
|
2587
|
+
} else if (value.parts && Array.isArray(value.parts)) {
|
|
2588
|
+
// Gemini parts array
|
|
2589
|
+
const text = value.parts.filter(p => p.text).map(p => p.text).join('');
|
|
2590
|
+
if (text) parts.push(stripMarkdownCodeFence(text));
|
|
2591
|
+
const fnCalls = value.parts.filter(p => p.functionCall);
|
|
2592
|
+
if (fnCalls.length) parts.push('Function calls:\\n' + JSON.stringify(fnCalls, null, 2));
|
|
2593
|
+
}
|
|
2594
|
+
// OpenAI tool_calls array
|
|
2595
|
+
if (Array.isArray(value.tool_calls) && value.tool_calls.length) {
|
|
2596
|
+
parts.push('Tool calls:\\n' + JSON.stringify(value.tool_calls, null, 2));
|
|
2597
|
+
}
|
|
2598
|
+
return parts.length ? parts.join('\\n\\n') : 'No content';
|
|
2599
|
+
}
|
|
2600
|
+
|
|
2601
|
+
// For other objects, stringify them
|
|
2602
|
+
try {
|
|
2603
|
+
return JSON.stringify(value, null, 2);
|
|
2604
|
+
} catch {
|
|
2605
|
+
return String(value);
|
|
2606
|
+
}
|
|
2607
|
+
}
|
|
2608
|
+
|
|
2609
|
+
function resetTraceModal() {
|
|
2610
|
+
uploadArea.classList.remove("hidden");
|
|
2611
|
+
traceViewer.classList.remove("visible");
|
|
2612
|
+
let customFooter = document.getElementById("step5FooterBtns");
|
|
2613
|
+
if (customFooter) customFooter.remove();
|
|
2614
|
+
uploadStatus.className = "upload-status";
|
|
2615
|
+
uploadStatus.textContent = "";
|
|
2616
|
+
fileInput.value = "";
|
|
2617
|
+
currentObservations = [];
|
|
2618
|
+
selectedObservationIndex = -1;
|
|
2619
|
+
checkedObservations.clear();
|
|
2620
|
+
rerunHistory.clear();
|
|
2621
|
+
rerunInFlight.clear();
|
|
2622
|
+
step4SelectedRun = -1;
|
|
2623
|
+
step5RunTraces = [];
|
|
2624
|
+
localStorage.removeItem('ed_step5RunTraces');
|
|
2625
|
+
step5RunMeta = { loading: false, error: '', runCount: 0, sequential: false };
|
|
2626
|
+
observationTableBody.innerHTML = "";
|
|
2627
|
+
observationDetail.innerHTML = "";
|
|
2628
|
+
currentStep = 0;
|
|
2629
|
+
updateModalTitle();
|
|
2630
|
+
}
|
|
2631
|
+
|
|
2632
|
+
function updateModalTitle() {
|
|
2633
|
+
const titles = {
|
|
2634
|
+
0: "Step 2: Import Failed Trace",
|
|
2635
|
+
3: "Step 3: Mark broken step",
|
|
2636
|
+
4: "Step 4: Validate your Fixes",
|
|
2637
|
+
5: "Step 5: Validate Updated Flow with Live Data"
|
|
2638
|
+
};
|
|
2639
|
+
modalTitle.textContent = titles[currentStep] || "Step 2: Import Failed Trace";
|
|
2640
|
+
}
|
|
2641
|
+
|
|
2642
|
+
function updateFooterButtons() {
|
|
2643
|
+
const changeBtn = document.getElementById("changeTraceBtn");
|
|
2644
|
+
const nextBtn = document.getElementById("nextBtn");
|
|
2645
|
+
|
|
2646
|
+
if (currentStep <= 2) {
|
|
2647
|
+
changeBtn.textContent = "Change Workflow Function";
|
|
2648
|
+
nextBtn.textContent = "Next";
|
|
2649
|
+
nextBtn.disabled = true;
|
|
2650
|
+
} else if (currentStep === 3) {
|
|
2651
|
+
changeBtn.textContent = "Change Trace File";
|
|
2652
|
+
nextBtn.textContent = "Next";
|
|
2653
|
+
nextBtn.disabled = false;
|
|
2654
|
+
} else if (currentStep === 4) {
|
|
2655
|
+
changeBtn.textContent = "Select Different Steps";
|
|
2656
|
+
nextBtn.textContent = "Fix Works as Expected";
|
|
2657
|
+
nextBtn.disabled = false;
|
|
2658
|
+
} else if (currentStep === 5) {
|
|
2659
|
+
// Step 5 - show custom buttons
|
|
2660
|
+
changeBtn.textContent = "Still Failing";
|
|
2661
|
+
nextBtn.textContent = "Done";
|
|
2662
|
+
} else {
|
|
2663
|
+
let customFooter = document.getElementById("step5FooterBtns");
|
|
2664
|
+
if (customFooter) customFooter.remove();
|
|
2665
|
+
}
|
|
2666
|
+
}
|
|
2667
|
+
|
|
2668
|
+
fetch("/api/repo-root").then(r => r.json()).then(d => {
|
|
2669
|
+
console.log("[Dashboard] Repo root fetched:", d);
|
|
2670
|
+
repoRoot = d.repoRoot || '';
|
|
2671
|
+
console.log("[Dashboard] repoRoot set to:", repoRoot);
|
|
2672
|
+
|
|
2673
|
+
// Now fetch workflows after repo root is loaded
|
|
2674
|
+
return fetch("/api/workflows");
|
|
2675
|
+
}).then(r => r.json()).then(d => {
|
|
2676
|
+
console.log("[Dashboard] Workflows fetched:", d);
|
|
2677
|
+
allWorkflows = d.workflows || [];
|
|
2678
|
+
console.log("[Dashboard] Calling render with", allWorkflows.length, "workflows");
|
|
2679
|
+
render();
|
|
2680
|
+
}).catch(err => {
|
|
2681
|
+
console.error("Failed to fetch repo root or workflows:", err);
|
|
2682
|
+
tbody.innerHTML = '<tr><td colspan="2" style="text-align: center; padding: 40px; color: #c62828;">Error loading workflows</td></tr>';
|
|
2683
|
+
});
|
|
2684
|
+
|
|
2685
|
+
fetch("/api/code-index").then(r => r.json()).then(d => {
|
|
2686
|
+
codeIndex = d;
|
|
2687
|
+
console.log("Code index:", d);
|
|
2688
|
+
}).catch(err => {
|
|
2689
|
+
console.error("Failed to fetch code index:", err);
|
|
2690
|
+
});
|
|
2691
|
+
|
|
2692
|
+
function render(search = "") {
|
|
2693
|
+
console.log("[Dashboard] render() called with search:", search, "workflows:", allWorkflows.length);
|
|
2694
|
+
const filtered = search ? allWorkflows.filter(w =>
|
|
2695
|
+
w.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
2696
|
+
w.filePath.toLowerCase().includes(search.toLowerCase())
|
|
2697
|
+
) : allWorkflows;
|
|
2698
|
+
countEl.textContent = filtered.length;
|
|
2699
|
+
console.log("[Dashboard] Rendering", filtered.length, "workflows");
|
|
2700
|
+
tbody.innerHTML = filtered.length ? filtered.map((w, i) => \`<tr onclick="showModal(\${i},'\${search}')">
|
|
2701
|
+
<td><div class="workflow-name-cell">\${esc(w.name)}\${w.isAsync ? '<span class="async-badge">async</span>' : ""}</div></td>
|
|
2702
|
+
<td><div class="workflow-path-cell">\${esc(stripAbsolutePath(w.filePath))}</div></td>
|
|
2703
|
+
</tr>\`).join("") : \`<tr><td colspan="2" style="text-align: center; padding: 40px; color: #999;">No workflows found</td></tr>\`;
|
|
2704
|
+
console.log("[Dashboard] tbody updated");
|
|
2705
|
+
}
|
|
2706
|
+
|
|
2707
|
+
function showModal(index, search) {
|
|
2708
|
+
const filtered = search ? allWorkflows.filter(w =>
|
|
2709
|
+
w.name.toLowerCase().includes(search.toLowerCase()) ||
|
|
2710
|
+
w.filePath.toLowerCase().includes(search.toLowerCase())
|
|
2711
|
+
) : allWorkflows;
|
|
2712
|
+
selectedWorkflow = filtered[index];
|
|
2713
|
+
modal.classList.add("open");
|
|
2714
|
+
resetTraceModal();
|
|
2715
|
+
updateFooterButtons();
|
|
2716
|
+
}
|
|
2717
|
+
|
|
2718
|
+
window.showModal = showModal;
|
|
2719
|
+
window.selectObservation = selectObservation;
|
|
2720
|
+
window.step4SelectObservation = function(idx) {
|
|
2721
|
+
selectedObservationIndex = idx;
|
|
2722
|
+
const history = rerunHistory.get(idx) || [];
|
|
2723
|
+
step4SelectedRun = history.length > 0 ? history.length - 1 : -1;
|
|
2724
|
+
renderObservationTable();
|
|
2725
|
+
};
|
|
2726
|
+
window.step4SelectRun = function(ri) {
|
|
2727
|
+
step4SelectedRun = ri;
|
|
2728
|
+
renderObservationTable();
|
|
2729
|
+
};
|
|
2730
|
+
function esc(t) { const d = document.createElement("div"); d.textContent = t; return d.innerHTML; }
|
|
2731
|
+
window.esc = esc;
|
|
2732
|
+
|
|
2733
|
+
document.getElementById("searchInput").oninput = (e) => render(e.target.value);
|
|
2734
|
+
</script>
|
|
2735
|
+
</body>
|
|
2736
|
+
</html>`;
|
|
957
2737
|
/* DASHBOARD_HTML_END */
|
|
958
2738
|
}
|
|
959
2739
|
const SEARCH_SKIP_DIRS = new Set(['node_modules', '.git', 'dist', '.next', '.turbo', 'build', 'coverage']);
|