eve/dist/src/cli/dev/tui/traces/trace-view.js

Filesystem-first framework for durable backend AI agents that run anywhere.

import{formatAttributeContent}from"./trace-content.js";import{renderConversationItem}from"./trace-conversation.js";import{orderedTextSelection,selectedTraceViewerSpan}from"./trace-viewer-state.js";import{formatElapsed}from"#cli/format-elapsed.js";import{clipVisible,sliceVisible,stripAnsi,stripTerminalControls,visibleLength,wrapVisibleLine}from"#cli/ui/terminal-text.js";import{describeLocalTraceSpan}from"#tracing/local-trace-reader.js";function renderTraceViewer(e,t){let{width:n,height:r,theme:i}=t,a=chromeStyles(i,t.surfaces),o=Math.max(1,r-3-3),s=e.panelOpen?panelWidthFor(n):0,c=Math.max(20,n-(s===0?0:s+1)),l=panelDetailLines(e,s,i,t.surfaces),u=o,d=[];if(d.push(...renderHeader(e,t)),e.traces.length===0)d.push(...renderEmptyState(t,i,o));else if(e.trace===void 0)d.push(...center(o,a.muted(`Loading trace…`)));else{let r=renderConversation(e,t,c,o);for(let t=0;t<o;t+=1){let i=r[t]??``;if(s===0){d.push(i);continue}let a=l[e.panelScroll+t]??``;e.textSelection!==void 0&&e.textSelection.region===`panel`&&(a=highlightSelection(a,e.panelScroll+t,e.textSelection,s)),d.push(joinPanels(i,c,a,n))}}return d.push(...renderFooter(e,n,i,t.surfaces)),t.toast!==void 0&&overlayToast(d,t.toast,n,i,t.surfaces),{rows:d,panelTotalRows:l.length,timelineViewportRows:o,panelViewportRows:u,contentWidth:c}}function chromeStyles(e,t){let n=e.color?t:void 0;return{muted:n?.mutedText??e.colors.dim,primary:n?.primaryText??(e=>e)}}function overlayToast(e,t,n,r,i){let a=`  ${stripTerminalControls(t)}  `,o=visibleLength(a),s=r.unicode?`▌`:r.glyph.rule,c=r.color?i:void 0,l=c===void 0?``:c.body,u=c?.primaryText??r.colors.white,d=r.color?`\x1B[0m`:``,f=[`${l}${u(s)}${` `.repeat(o)}${d}`,`${l}${u(s)}${u(a)}${d}`,`${l}${u(s)}${` `.repeat(o)}${d}`];for(let[t,r]of f.entries()){let i=2+t;if(i>=e.length)break;e[i]=overlayRight(e[i],r,n,1)}}function overlayRight(e,t,n,r){let i=Math.max(0,n-r-visibleLength(t)),a=visibleLength(e),o=a<i?e+` `.repeat(i-a):e;return`${sliceVisible(o,i)}\x1b[0m${t}`}const CONVERSATION_CONTENT_KEYS=new Set([`gen_ai.input.messages`,`ai.prompt.system`,`ai.response.reasoning`,`ai.response.text`,`ai.response.tool_calls`,`ai.response.tool_results`,`gen_ai.tool.call.arguments`,`gen_ai.tool.call.result`]);function renderSpanDetail(e,t,n,r){let{colors:i}=n,{muted:a,primary:o}=chromeStyles(n,r?.surfaces),s=[],c=stripTerminalControls(e.name);s.push(...wrapVisibleLine(i.bold(o(c)),t));let l=describeLocalTraceSpan(e).map(stripTerminalControls);l.length>0&&s.push(a(l.join(`, `))),s.push(``);let fact=(e,t)=>`${a(e.padEnd(10))}${t}`,u=e.statusCode===2;s.push(fact(`status`,u?i.red(`ERROR`):i.green(`ok`))),s.push(fact(`duration`,formatElapsed(durationMs(e.startTimeNs,e.endTimeNs)))),s.push(fact(`started`,clockTime(e.startTimeNs))),s.push(fact(`span`,e.spanId)),e.parentSpanId!==void 0&&s.push(fact(`parent`,e.parentSpanId)),e.scope!==void 0&&s.push(fact(`scope`,stripTerminalControls(e.scope))),s.push(``);let d=Object.keys(e.attributes).filter(e=>r?.excludeKeys?.has(e)!==!0).sort();if(d.length===0)s.push(a(`no attributes`));else{s.push(a(`attributes (${d.length})`));for(let n of d){let r=formatAttributeContent(n,e.attributes[n],i.dim,t-2),o=stripTerminalControls(n);if(r.length===1)s.push(...wrapVisibleLine(`${a(o)} ${r[0]}`,t));else{s.push(a(o));for(let e of r)s.push(`  ${e}`)}}}return s.map(e=>clipVisible(e,t))}function renderHeader(e,t){let{theme:n,width:r}=t,{colors:i,glyph:a}=n,{muted:o,primary:s}=chromeStyles(n,t.surfaces),c=[];if(e.trace?.agentName!==void 0&&c.push(stripTerminalControls(e.trace.agentName)),e.trace?.conversationId!==void 0&&c.push(`conversation ${stripTerminalControls(e.trace.conversationId)}`),e.trace!==void 0){let n=t.activeWindowEndNs!==void 0&&t.activeWindowEndNs>e.trace.endTimeNs?t.activeWindowEndNs:e.trace.endTimeNs;c.push(clockTime(e.trace.startTimeNs),`${e.trace.spans.length} span${e.trace.spans.length===1?``:`s`}`,formatElapsed(durationMs(e.trace.startTimeNs,n)))}let l=`${i.bold(s(`${a.brand} traces`))}${c.length===0?``:o(` · ${c.join(` · `)}`)}`,u=e.traces.length===0?``:o(`[${e.traceIndex+1}/${e.traces.length}]`),d=[t.activeWindowEndNs===void 0?``:i.green(`● live`),u].filter(e=>e.length>0).join(` `),f=joinRight(` ${clipVisible(l,Math.max(0,r-visibleLength(d)-2))}`,d,r);return[``,clipVisible(f,r),``]}function renderConversation(e,t,n,r){let{theme:i}=t;if(e.conversationItems.length===0)return[chromeStyles(i,t.surfaces).muted(`  No conversation content in this trace; its export policy may have redacted it.`)];let a=conversationLines(e,n,i,t.surfaces).slice(e.scrollRow,e.scrollRow+r);return e.textSelection===void 0||e.textSelection.region!==`conversation`?a:a.map((t,r)=>highlightSelection(t,e.scrollRow+r,e.textSelection,n))}function conversationLines(e,t,n,r){let i=[];for(let a=0;a<e.conversationItems.length;a+=1)i.push(...renderConversationItem(e.conversationItems[a],t,n,a===e.selectedRow,e.expandedItems.has(a),r),``);return i}function panelDetailLines(e,t,n,r){let i=selectedTraceViewerSpan(e);return!e.panelOpen||t<=0||i===void 0?[]:[``,...renderSpanDetail(i,Math.max(16,t-3),n,{excludeKeys:CONVERSATION_CONTENT_KEYS,surfaces:r}).map(e=>` ${e}`)]}function conversationSelectionText(e,t,n,r,i){return selectionText(conversationLines(e,t,n,i),r)}function panelSelectionText(e,t,n,r){return selectionText(panelDetailLines(e,e.panelOpen?panelWidthFor(t):0,n),r)}function selectionText(e,t){let{start:n,end:r}=orderedTextSelection(t),i=[];for(let t=Math.max(0,n.line);t<=r.line&&t<e.length;t+=1){let a=stripAnsi(e[t]),o=t===n.line?n.column:0,s=t===r.line?r.column+1:1/0,c=s===1/0?a:sliceVisible(a,s),l=sliceVisible(a,o).length;i.push(c.slice(l).trimEnd())}return i.join(`
`)}function highlightSelection(e,t,n,r){let{start:i,end:a}=orderedTextSelection(n);if(t<i.line||t>a.line)return e;let o=t===i.line?i.column:0,s=t===a.line?a.column+1:r,c=visibleLength(e),l=c<s?e+` `.repeat(s-c):e,u=sliceVisible(l,o),d=sliceVisible(l,s),f=d.slice(u.length),p=l.slice(d.length);return f.length===0?e:`${u}\x1b[7m${f.replaceAll(`\x1B[0m`,`\x1B[0m\x1B[7m`)}\x1b[27m${p}`}function renderFooter(e,t,n,r){let{colors:i}=n,{muted:a}=chromeStyles(n,r),[o,s]=n.unicode?[`↑↓`,`←→`]:[`^/v`,`</>`],c=e.panelFocus?`${o} scroll · tab cards · esc back`:`${o} select · ${s} expand · enter attrs · tab focus · [ ] traces · q close`,l=e.conversationItems.length,u=l===0?``:a(`item ${e.selectedRow+1}/${l}`),d=[e.notice===void 0?``:i.yellow(e.notice),u].filter(e=>e.length>0).join(a(` · `));return[``,clipVisible(` ${a(c)}`,t),clipVisible(d.length===0?``:` ${d}`,t)]}function renderEmptyState(e,t,n){let{muted:r,primary:i}=chromeStyles(t,e.surfaces),[a,o]=e.tracingDisabled===!0?[`Tracing is disabled (EVE_TRACES=off).`,`Re-enable it and spans stream in live.`]:[`No local traces yet.`,`Chat with your agent — spans stream in live.`];return center(n,t.colors.bold(i(a)),r(o))}function center(e,...t){let n=Array.from({length:e},()=>``),r=Math.max(0,Math.floor(e/2)-1);return t.forEach((t,i)=>{r+i<e&&(n[r+i]=t)}),n}function joinPanels(e,t,n,r){let i=Math.max(0,r-t-1);return`${padTo(e,t)} ${clipVisible(n,i)}`}function joinRight(e,t,n){if(t.length===0)return e;let r=Math.max(1,n-visibleLength(e)-visibleLength(t));return`${e}${` `.repeat(r)}${t}`}function padTo(e,t){let n=visibleLength(e);return n>=t?clipVisible(e,t):e+` `.repeat(t-n)}function panelWidthFor(e){return e<42?0:Math.min(64,Math.max(20,Math.floor(e*.42)),e-20-1)}function durationMs(e,t){return Math.max(0,Number(t-e)/1e6)}function clockTime(e){let t=new Date(Number(e/1000000n)),pad=(e,t=2)=>String(e).padStart(t,`0`);return`${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}.${pad(t.getMilliseconds(),3)}`}export{conversationSelectionText,panelSelectionText,renderSpanDetail,renderTraceViewer};