🤗 traces

› { if (e.key === 'Enter') load(); }} placeholder="paste .jsonl dataset URL and press Enter" class="flex-1 bg-transparent border-none outline-none text-[13px] text-[#222220] placeholder:text-[#b0b0aa]" />

examples: {#each examples as ex} {/each}

{#if loading}

{spinnerFrames[spinnerFrame]} Fetching traces...

{:else if error}

✗ {error}

{:else if messages.length > 0}

{playing ? spinnerFrames[spinnerFrame] : '●'} {playing ? `Streaming ${focusedIdx + 1} / ${loadedCount}...` : `Loaded ${loadedCount} messages`}

{:else}

○ waiting for input

paste a .jsonl dataset URL above, press Enter to load.

then ↑ ↓ to navigate sections, Home/ End for start/end.

→ learn more about the agent trace viewer on Hugging Face

{/if} {#each messages as msg, i (i)} {#if msg._visible} {@const focused = i === focusedIdx}

(focusedIdx = i)} class="py-1 cursor-default rounded transition-colors animate-fade-in {focused ? 'bg-[#fffbe6]' : 'hover:bg-[#faf9f5]'}" >

{focused ? '●' : '○'} {msg.role} {#if msg.title} {msg.title} {/if} {#if msg.model} {msg.model} {/if} #{i}

{#each msg.blocks as block, bi} {#if bi < msg._visibleBlocks} {@const isLast = bi === msg.blocks.length - 1}

{isLast ? '└' : '├'}

{#if block.kind === 'text'} {#if block._typing || block._typedText !== block.text}

{block._typedText}{#if block._typing}▎{/if}

{:else}

{@html renderMarkdown(block.text)}

{/if} {:else if block.kind === 'thinking'}

thinking

{#if block._typing || block._typedText !== block.text}

{block._typedText}{#if block._typing}▎{/if}

{:else}

{@html renderMarkdown(block.text)}

{/if}

{:else if block.kind === 'tool_call'}

tool {block.name}

{formatJson(
                            block.input
                          )}

{:else if block.kind === 'tool_result'}

result {#if block.isError}· error{/if}

{block.text}

{:else if block.kind === 'image'}

[image attachment]

{:else if block.kind === 'raw'}

raw

{formatJson(
                            block.json
                          )}

{/if}

{/if} {/each}

{#if messages.length > 0} {focusedIdx + 1} / {messages.length} {:else} ready {/if} {#if playing} {:else} ↑ ↓ navigate Home End jump {/if} changelog →