
AI Tools Deep Dive
20 partsTL;DR
Agent runs are opaque. TraceTrail turns a Claude Code JSONL into a public share link with a stepped timeline of messages, tool calls, and tokens.
Last updated: June 24, 2026
You give an AI coding agent a task. Twenty minutes later it comes back with a diff, a passing test, and a vague summary of what it did. If the diff is right, you ship it and move on. If something is off, you have a problem.
The actual run lives inside a transcript file somewhere on disk. For Claude Code that is a JSONL under ~/.claude/projects/<dir>/<sid>.jsonl. Hundreds of lines of message blocks, tool calls, tool results, and usage records. Readable, technically. Useful, not really.
So you do one of three bad things. You scroll the terminal scrollback until your eyes glaze over. You paste the JSONL into a chat window and ask another model to summarize it. Or you give up and re-run the task with extra logging, which means the original failure is now gone.
This is the gap. Agent runs have no shareable artifact. There is no link you can drop into a thread that says "here is exactly what the agent did, step by step, with the tool calls and the token spend, in a UI a human can scan in thirty seconds."
That is what TraceTrail is. The missing share link for AI coding agents.
The broader category is agent observability. OpenTelemetry traces give software teams a vocabulary for spans and causality. LangSmith, Langfuse, and the OpenAI Agents SDK all expose tracing surfaces for model and tool runs. TraceTrail sits in the more specific lane of "show me the transcript artifact from this coding-agent run."
Upload an agent transcript. Get a public /r/<id> URL. Anyone with the link can replay the run as a stepped timeline.

The mental model is Loom, but for agents instead of screen recordings. You ran something private. You want to show somebody what happened. You generate a link and paste it.
TraceTrail is a Next.js app backed by Neon Postgres and Clerk. The MVP is intentionally small. Three routes, one parser, one timeline view.
If you are running it locally, the setup is the standard shape:
git clone <your-tracetrail-repo>
cd tracetrail
pnpm install
cp .env.example .env.local # fill in Clerk + DATABASE_URL
psql "$DATABASE_URL" -f drizzle/0000_initial.sql
pnpm dev
Open http://localhost:3000, sign in through Clerk, and you land on a single upload form. Drag a transcript onto it, or pick a file. The accepted shapes are:
type, message.role, and message.content blocks. This is the format Claude Code already writes to ~/.claude/projects/.{ role, content } message objects. This is what most generic agent frameworks emit.events: [...] field. For frameworks that wrap their runs in metadata.Behind the form is POST /api/upload. It is auth-gated: you have to be signed in to push a transcript. The endpoint returns { id, url }. The url is your share link.
The replay route, GET /r/[id], is public on purpose. Once a run is uploaded, anyone with the link can watch it. This is the Loom tradeoff. Public-by-default is the whole point of a share link. If a run contains anything sensitive, do not upload it. There is no redaction in the MVP and there is no delete UX yet either.
Newsletter
Get the weekly deep dive
Tutorials on Claude Code, AI agents, and dev tools, delivered free every week.
From the archive
Apr 28, 2026 • 10 min read
Apr 28, 2026 • 12 min read
Apr 28, 2026 • 11 min read
Apr 28, 2026 • 9 min read
The replay page is a stepped timeline. Each event in the transcript becomes one step. The parser at src/lib/parse.ts flattens the raw JSONL into four event kinds:
tool_use block becomes its own step, with the tool name and the input JSON. Bash commands, file reads, edits, web fetches, MCP calls. All of it.ls does not balloon the page. Errors are flagged.system.At the top of the page you get the totals: input tokens, output tokens, message count, tool call count. Token totals only show up when the source transcript actually included usage.input_tokens and usage.output_tokens. There is no tokenizer fallback. If your framework does not record usage, that section will be zeros, and that is honest.
The visual job of the timeline is just to make the run scannable. You should be able to skim the steps, see where the agent went off the rails, expand the tool result that matters, and close the tab. No video player to scrub through. No chat UI to scroll. Just a list of what happened, in order.
Once you have a share link primitive, a bunch of workflows that used to be painful become one paste.

Debugging your own runs. When a long agent run produces a wrong answer, you upload the JSONL and look for the moment things went sideways. Usually it is one bad tool result that the agent then built ten more steps on top of. Seeing the timeline at a glance is faster than grep-ing the JSONL.
Onboarding teammates. New person joins. You want to show them how Claude Code actually works in your repo. You drop three replay links into the onboarding doc: a clean run, a recovered run, a failed run. They scrub through in five minutes and get more context than an hour of pairing.
Showing clients or stakeholders. Non-engineers do not want to watch a screen recording of you typing. They want to see "the AI did these eight steps and produced this PR." A replay link is the right object for that conversation. It is also the right object to attach to a status update.
Evaluating sub-agents. If you run agent teams, you have N parallel runs per task. Having a stable URL per run lets you compare them the way you would compare videos in the compare hub. Pick the cleanest run. Link it. Move on.
Pairing with another agent. Tools like Promptlock version the prompts that go in. TraceTrail captures the runs that come out. Together they close a loop: you can change a prompt, replay the resulting agent run, link the replay back to the prompt version, and have a real audit trail.
The same idea shows up in agent swarms needing receipts, permissions and rollback for AI coding agents, and agent evals needing baseline receipts. If an agent can change code, the run should leave enough evidence for another human or agent to inspect.
The MVP is deliberately narrow. A few things people will ask for that are not in this version:
gist.github.com: only paste what you would paste into a public gist./api/upload route buffers the whole file in memory with a 10 MB cap. Long agent runs in the tens of MB will fail. Chunked ingest is on the list.These are all known. The first version ships the share link primitive and nothing else, because the share link is the whole product.
If you run any agent that writes a transcript to disk, you can use TraceTrail today. The fastest path is to grab one of your existing Claude Code session files, sign in, drag it onto the form, and paste the resulting URL into your team chat. That is the entire onboarding.
For deeper agent tooling, pair it with the patterns in Prompt Versioning with Promptlock and the compare hub. Versioned prompts on the way in. Replayable runs on the way out. Two share-link primitives that finally make agent work feel like normal software work.
For the broader debugging stack, read how to debug AI agent workflows, Claude Code token-burn observability, and local OpenTelemetry traces for agent work. The common thread is simple: do not debug long agent runs from memory.
An agent replay is a step-by-step view of a past agent run: messages, tool calls, tool results, errors, and usage metadata in the order they happened. It gives reviewers a durable artifact instead of relying on terminal scrollback or a final summary.
Tracing tools such as OpenTelemetry, LangSmith, Langfuse, and the OpenAI Agents SDK focus on spans, observability, and production debugging. TraceTrail is narrower: it turns a transcript file into a shareable replay page for human review.
Only if you have reviewed the transcript first. Claude Code transcripts can include prompts, file paths, tool inputs, tool outputs, and other sensitive context. The article's MVP framing assumes public share links, so do not upload secrets or private customer data.
At minimum, it should include user messages, assistant messages, tool calls, tool results, errors, timestamps or ordering, and usage metadata when available. The replay is useful only if it preserves the causal chain that led to the final diff or answer.
Parallel agent work creates multiple runs for the same task. Replays make those runs comparable. A reviewer can inspect which agent used the right files, which one ignored a failing command, and which one produced a result with enough evidence to trust.
Read next
AI agents fail in ways traditional debugging cannot catch. Here are the tools and patterns for finding and fixing broken agent loops, tool failures, and context issues.
9 min readGitHub is filling with multi-agent frameworks, skills, and coding harnesses. The useful lesson is not that every team needs a swarm. It is that every agent needs receipts: tests, logs, diffs, and reviewable checkpoints.
8 min readAI coding agents become safer when permissions, logs, and rollback are designed as one system. Here is the operating loop I would put around any agent that can edit code, run tools, or open pull requests.
9 min readTechnical content at the intersection of AI and development. Building with AI agents, Claude Code, and modern dev tools - then showing you exactly how it works.
Anthropic's agentic coding CLI. Runs in your terminal, edits files autonomously, spawns sub-agents, and maintains memory...
View ToolOpen-source autonomous coding agent inside VS Code. Creates files, runs commands, and can use a browser for UI testing a...
View ToolOpen-source AI coding agent for terminal, desktop, and IDE. Works with 75+ LLM providers including Claude, GPT, Gemini,...
View ToolOpenAI's coding agent for terminal, cloud, IDE, GitHub, Slack, and Linear workflows. Reads repos, edits files, runs comm...
View ToolCompare AI coding agents on reproducible tasks with scored, shareable runs.
View AppDesign subagents visually instead of editing YAML by hand.
View AppDefine AI-assisted business automations without locking the workflow to one vendor.
View AppDefine custom subagent types within your project's memory layer.
Claude CodeSpawn isolated workers with independent context windows.
Claude CodeConfigure Claude Code for maximum productivity -- CLAUDE.md, sub-agents, MCP servers, and autonomous workflows.
AI Agents
Build Anything with Vercel, the Agentic Infrastructure Stack Check out Vercel: https://vercel.plug.dev/cwBLgfW The video shows a behind-the-scenes walkthrough of how the creator rapidly builds and d

Check out Replit: https://replit.com/refer/DevelopersDiges The video demos Replit’s Agent 4, explaining how Replit evolved from a cloud IDE into a platform where users can build, deploy, and scale ap

Leveraging Anthropic's Subagent for Claude Code: A Step-by-Step Guide In this video, we explore Anthropic's newly released subagent feature for Cloud Code, which allows developers to create...

AI agents fail in ways traditional debugging cannot catch. Here are the tools and patterns for finding and fixing broken...

GitHub is filling with multi-agent frameworks, skills, and coding harnesses. The useful lesson is not that every team ne...

AI coding agents become safer when permissions, logs, and rollback are designed as one system. Here is the operating loo...

Hex's data-agent lab shows the practical eval pattern AI teams should copy: compare candidates against stable baselines,...

The latest Claude Code cache-burn debate is not just a quota complaint. It is a reminder that coding agents need cache-h...
AI agent work needs local observability. OpenTelemetry, OTLP, Vercel AI SDK telemetry, and lightweight trace viewers giv...

New tutorials, open-source projects, and deep dives on coding agents - delivered weekly.