@@ -124,7 +124,7 @@ function TasksContent() {
124124 }
125125 return true ;
126126 } ) ;
127- } , [ searchQuery , queryStatus , queryModel , querySort , queryOrder ] ) ;
127+ } , [ searchQuery , queryStatus , queryModel , queryAgent , querySort , queryOrder ] ) ;
128128
129129 const toggleSort = ( field : string ) => {
130130 if ( querySort === field ) {
@@ -154,7 +154,7 @@ function TasksContent() {
154154 </ div >
155155 < div >
156156 < h1 className = "text-4xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-b from-foreground to-foreground/50" >
157- Task Details
157+ Task
158158 </ h1 >
159159 < p className = "text-muted-foreground max-w-2xl leading-relaxed mt-2" >
160160 Detailed breakdown of individual task performance across different models and agents.
@@ -264,30 +264,32 @@ function TasksContent() {
264264 </ div >
265265
266266 < div className = "overflow-x-auto pb-2" >
267- < table className = "w-full text-sm text-left min-w-[600px]" >
267+ < table className = "w-full table-fixed text-sm text-left min-w-[600px]" >
268268 < thead className = "bg-secondary/10 text-muted-foreground font-medium border-b border-border/50 select-none" >
269269 < tr >
270- < th className = "px-4 sm:px-6 py-3 w-[30%] sm:w-[25 %]" > Model / Agent</ th >
271- < th className = "px-4 sm:px-6 py-3 w-[20%] sm:w-[15 %] text-center" > Status</ th >
270+ < th className = "px-4 sm:px-6 py-3 w-[50 %]" > Model / Agent</ th >
271+ < th className = "px-4 sm:px-6 py-3 w-[25 %] text-center" > Status</ th >
272272 < th
273- className = "px-4 sm:px-6 py-3 w-[20%] cursor-pointer hover:bg-secondary/30 hover:text-foreground transition-colors group"
273+ className = "px-4 sm:px-6 py-3 w-[25%] text-right cursor-pointer hover:bg-secondary/30 hover:text-foreground transition-colors group"
274274 onClick = { ( ) => toggleSort ( "latency" ) }
275275 >
276- < div className = "flex items-center gap-1 sm:gap-2" >
276+ < div className = "flex items-center justify-end gap-1 sm:gap-2" >
277277 Latency
278278 { renderSortIcon ( "latency" ) }
279279 </ div >
280280 </ th >
281- < th
282- className = "px-4 sm:px-6 py-3 w-[30%] sm:w-[40%] cursor-pointer hover:bg-secondary/30 hover:text-foreground transition-colors group"
283- onClick = { ( ) => toggleSort ( "tokens" ) }
284- >
285- < div className = "flex items-center gap-1 sm:gap-2" >
286- < span className = "hidden sm:inline" > Tokens (In / Out / Cache)</ span >
287- < span className = "sm:hidden" > Tokens</ span >
288- { renderSortIcon ( "tokens" ) }
289- </ div >
290- </ th >
281+ { false && (
282+ < th
283+ className = "px-4 sm:px-6 py-3 w-[30%] sm:w-[40%] cursor-pointer hover:bg-secondary/30 hover:text-foreground transition-colors group"
284+ onClick = { ( ) => toggleSort ( "tokens" ) }
285+ >
286+ < div className = "flex items-center gap-1 sm:gap-2" >
287+ < span className = "hidden sm:inline" > Tokens (In / Out / Cache)</ span >
288+ < span className = "sm:hidden" > Tokens</ span >
289+ { renderSortIcon ( "tokens" ) }
290+ </ div >
291+ </ th >
292+ ) }
291293 </ tr >
292294 </ thead >
293295 < tbody className = "divide-y divide-border/30 relative" >
@@ -326,16 +328,16 @@ function TasksContent() {
326328 ) }
327329 </ div >
328330 </ td >
329- < td className = "px-4 sm:px-6 py-3 text-muted-foreground" >
331+ < td className = "px-4 sm:px-6 py-3 text-muted-foreground text-right " >
330332 { trial . latency_breakdown ? (
331333 < HoverCard openDelay = { 200 } closeDelay = { 100 } >
332334 < HoverCardTrigger asChild >
333- < button type = "button" className = "flex items-center gap-2 w-max cursor-help hover:text-foreground transition-colors" >
335+ < button type = "button" className = "flex items-center justify-end gap-2 w-full cursor-help hover:text-foreground transition-colors" >
334336 < span className = "font-mono text-xs sm:text-sm" > { trial . latency_sec ? `${ trial . latency_sec . toFixed ( 1 ) } s` : '-' } </ span >
335337 </ button >
336338 </ HoverCardTrigger >
337339 < HoverCardContent side = "top" align = "center" className = "w-48 p-3 bg-popover shadow-xl border-border z-50" >
338- < div className = "space-y-1.5 text-xs text-popover-foreground" >
340+ < div className = "space-y-1.5 text-xs text-popover-foreground text-left " >
339341 < div className = "flex justify-between" >
340342 < span className = "text-muted-foreground" > Env Setup:</ span >
341343 < span className = "font-mono" > { trial . latency_breakdown . env_setup ?. toFixed ( 1 ) || '-' } s</ span >
@@ -356,28 +358,30 @@ function TasksContent() {
356358 </ HoverCardContent >
357359 </ HoverCard >
358360 ) : (
359- < div className = "flex items-center gap-2 w-max " >
361+ < div className = "flex items-center justify-end gap-2 w-full " >
360362 < span className = "font-mono text-xs sm:text-sm" > { trial . latency_sec ? `${ trial . latency_sec . toFixed ( 1 ) } s` : '-' } </ span >
361363 </ div >
362364 ) }
363365 </ td >
364- < td className = "px-4 sm:px-6 py-3 text-muted-foreground" >
365- < div className = "flex items-center gap-2" >
366- < div className = "flex flex-wrap gap-1 sm:gap-2 font-mono text-[10px] sm:text-[11px]" >
367- < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Input Tokens" >
368- In: { trial . tokens ?. input ?. toLocaleString ( ) || 0 }
369- </ span >
370- < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Output Tokens" >
371- Out: { trial . tokens ?. output ?. toLocaleString ( ) || 0 }
372- </ span >
373- { trial . tokens ?. cache > 0 && (
374- < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Cache Tokens" >
375- Cache: { trial . tokens ?. cache ?. toLocaleString ( ) }
366+ { false && (
367+ < td className = "px-4 sm:px-6 py-3 text-muted-foreground" >
368+ < div className = "flex items-center gap-2" >
369+ < div className = "flex flex-wrap gap-1 sm:gap-2 font-mono text-[10px] sm:text-[11px]" >
370+ < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Input Tokens" >
371+ In: { trial . tokens ?. input ?. toLocaleString ( ) || 0 }
376372 </ span >
377- ) }
373+ < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Output Tokens" >
374+ Out: { trial . tokens ?. output ?. toLocaleString ( ) || 0 }
375+ </ span >
376+ { trial . tokens ?. cache > 0 && (
377+ < span className = "bg-secondary/50 text-foreground/80 px-1 sm:px-1.5 py-0.5 rounded border border-border whitespace-nowrap" title = "Cache Tokens" >
378+ Cache: { trial . tokens ?. cache ?. toLocaleString ( ) }
379+ </ span >
380+ ) }
381+ </ div >
378382 </ div >
379- </ div >
380- </ td >
383+ </ td >
384+ ) }
381385 </ tr >
382386 ) ) }
383387 </ tbody >
0 commit comments