@@ -244,7 +244,13 @@ function listenToRun(runId) {
244244 } ;
245245
246246 socket . onmessage = ( event ) => {
247- const data = JSON . parse ( event . data ) ;
247+ let data ;
248+ try {
249+ data = JSON . parse ( event . data ) ;
250+ } catch ( e ) {
251+ console . error ( 'Failed to parse WebSocket message' , e ) ;
252+ return ;
253+ }
248254 switch ( data . type ) {
249255 case 'init' :
250256 setupRunView ( data . metadata , runId ) ;
@@ -329,19 +335,25 @@ function updateAttemptRow(event) {
329335 row = document . createElement ( 'tr' ) ;
330336 row . classList . add ( 'fade-in' ) ;
331337 const levelLabel = levelKey && levelKey !== 'base' ? levelKey : '—' ;
332- row . innerHTML = `
333- <td>${ event . question_number ?? '—' } </td>
334- <td>${ event . model || '—' } </td>
335- <td>${ levelLabel } </td>
336- <td class="status-cell"></td>
337- <td>-</td>
338- <td>-</td>
339- <td>-</td>
340- <td>-</td>
341- <td class="breakable"></td>
342- <td class="breakable"></td>
343- <td></td>
344- ` ;
338+ const cellData = [
339+ { text : event . question_number ?? '—' } ,
340+ { text : event . model || '—' } ,
341+ { text : levelLabel } ,
342+ { text : '' , className : 'status-cell' } ,
343+ { text : '-' } ,
344+ { text : '-' } ,
345+ { text : '-' } ,
346+ { text : '-' } ,
347+ { text : '' , className : 'breakable' } ,
348+ { text : '' , className : 'breakable' } ,
349+ { text : '' } ,
350+ ] ;
351+ cellData . forEach ( ( cell ) => {
352+ const td = document . createElement ( 'td' ) ;
353+ td . textContent = cell . text ;
354+ if ( cell . className ) td . className = cell . className ;
355+ row . appendChild ( td ) ;
356+ } ) ;
345357 // Track ordering metadata
346358 row . dataset . question = String ( event . question_number ?? '0' ) ;
347359 row . dataset . level = levelKey ;
@@ -516,15 +528,26 @@ async function refreshLeaderboard() {
516528 const levelLabel = row . thinking_level && row . thinking_level !== 'base'
517529 ? row . thinking_level
518530 : '—' ;
519- tr . innerHTML = `
520- <td>${ row . model_id } </td>
521- <td>${ formatAccuracy ( row . accuracy ) } </td>
522- <td>${ formatCost ( row . cost_usd ) } </td>
523- <td>${ row . duration_seconds != null ? Number ( row . duration_seconds ) . toFixed ( 2 ) : '—' } </td>
524- <td>${ row . runs ?? '—' } </td>
525- <td>${ levelLabel } </td>
526- <td><button class="danger" data-model="${ row . model_id } ">Clear</button></td>
527- ` ;
531+ const cellValues = [
532+ row . model_id ,
533+ formatAccuracy ( row . accuracy ) ,
534+ formatCost ( row . cost_usd ) ,
535+ row . duration_seconds != null ? Number ( row . duration_seconds ) . toFixed ( 2 ) : '—' ,
536+ row . runs ?? '—' ,
537+ levelLabel ,
538+ ] ;
539+ cellValues . forEach ( ( text ) => {
540+ const td = document . createElement ( 'td' ) ;
541+ td . textContent = text ;
542+ tr . appendChild ( td ) ;
543+ } ) ;
544+ const btnCell = document . createElement ( 'td' ) ;
545+ const btn = document . createElement ( 'button' ) ;
546+ btn . className = 'danger' ;
547+ btn . dataset . model = row . model_id ;
548+ btn . textContent = 'Clear' ;
549+ btnCell . appendChild ( btn ) ;
550+ tr . appendChild ( btnCell ) ;
528551 leaderboardBody . appendChild ( tr ) ;
529552 } ) ;
530553 } catch ( error ) {
@@ -575,25 +598,38 @@ async function refreshHistory() {
575598 const rows = Array . isArray ( data . runs ) ? data . runs : [ ] ;
576599 if ( ! rows . length ) {
577600 const emptyRow = document . createElement ( 'tr' ) ;
578- emptyRow . innerHTML = '<td colspan="6" class="empty-state">No question runs yet.</td>' ;
601+ const emptyTd = document . createElement ( 'td' ) ;
602+ emptyTd . colSpan = 6 ;
603+ emptyTd . className = 'empty-state' ;
604+ emptyTd . textContent = 'No question runs yet.' ;
605+ emptyRow . appendChild ( emptyTd ) ;
579606 historyBody . appendChild ( emptyRow ) ;
580607 return ;
581608 }
582609 rows . forEach ( ( row ) => {
583610 const tr = document . createElement ( 'tr' ) ;
584- tr . innerHTML = `
585- <td>${ row . run_id } </td>
586- <td>${ formatTimestamp ( row . timestamp_utc ) } </td>
587- <td>${ row . model_id || '—' } </td>
588- <td>${ formatAccuracy ( row . accuracy ) } </td>
589- <td>${ formatCost ( row . total_cost_usd ) } </td>
590- <td>${ row . total_duration_seconds != null ? Number ( row . total_duration_seconds ) . toFixed ( 2 ) : '—' } </td>
591- ` ;
611+ const cells = [
612+ row . run_id ,
613+ formatTimestamp ( row . timestamp_utc ) ,
614+ row . model_id || '—' ,
615+ formatAccuracy ( row . accuracy ) ,
616+ formatCost ( row . total_cost_usd ) ,
617+ row . total_duration_seconds != null ? Number ( row . total_duration_seconds ) . toFixed ( 2 ) : '—' ,
618+ ] ;
619+ cells . forEach ( ( text ) => {
620+ const td = document . createElement ( 'td' ) ;
621+ td . textContent = text ;
622+ tr . appendChild ( td ) ;
623+ } ) ;
592624 historyBody . appendChild ( tr ) ;
593625 } ) ;
594626 } catch ( error ) {
595627 const row = document . createElement ( 'tr' ) ;
596- row . innerHTML = `<td colspan="6" class="error">Failed to load history: ${ error . message } </td>` ;
628+ const td = document . createElement ( 'td' ) ;
629+ td . colSpan = 6 ;
630+ td . className = 'error' ;
631+ td . textContent = `Failed to load history: ${ error . message } ` ;
632+ row . appendChild ( td ) ;
597633 historyBody . appendChild ( row ) ;
598634 }
599635}
0 commit comments