Foundry Trace Inspector - I built a VS Code extension that lets you debug your AI Foundry agent traces without leaving VS Code

[jubins]

Introduction

I built a free, open-source VS Code extension that lets you inspect Azure AI Foundry agent traces directly inside your editor, without switching to the Foundry portal.

Foundry Trace Inspector connects to your Azure AI Foundry project and gives you a clear view of what your agent did on every run — which tools it called, what it sent and received, token counts per span, latency, and estimated cost — all from within VS Code.

Marketplace: https://marketplace.visualstudio.com/items?itemName=jubinsoni.foundry-trace-inspector

Features and Screenshots

Key Features

• Trajectories view — a Gantt-style collapsible span tree (Session → Invoke Agent → Chat + Tool calls) with per-span duration, token counts, and cost. Click any span to expand a detail drawer with model, status, token breakdown, and raw input/output.

• User View — a chat-bubble replay of the full conversation with the agent name on each assistant turn, plus a "View Trace" deep link that jumps you directly to the corresponding span in the sidebar.

• Token & Cost chart — a stacked bar chart of input vs output tokens per LLM turn so you can identify the expensive calls at a glance.

• Automatic conversation tracking — paste one conv_... conversation ID and all responses in that conversation are discovered automatically. Or paste a single resp_... response ID and the extension walks the previous_response_id chain to reconstruct the full session.

• API key or Entra ID auth — API key stored in VS Code SecretStorage (never written to settings.json), or DefaultAzureCredential via az login or managed identity.

• Works on vscode.dev — fully supported in VS Code for the Web with API key auth.

• Theme aware — light, dark, and high-contrast all supported.

Screenshots

Setup is super easy:

User View:

Trajectories view:

Tokens	Cost

Technical Details

Technologies Used

• VS Code Extension API — Activity Bar panel, WebviewPanel, SecretStorage, Command Palette
• Azure AI Foundry / OpenAI Responses API — agent trace fetching via resp_... and conv_... IDs
• TypeScript — extension host logic
• HTML / CSS / JavaScript — Webview UI (Gantt chart, chat bubbles, token/cost bar chart)
• DefaultAzureCredential — Entra ID / managed identity auth

Architecture Overview

The extension runs entirely locally — no intermediate server, no third-party services.

VS Code Extension Host (TypeScript)
  └── Sidebar TreeView  →  Conversations & Responses
  └── WebviewPanel     →  Trajectories / User View / Token Chart
        └── Calls Azure AI Foundry Responses API directly
              (resp_... chain walked via previous_response_id)

All network calls go only to your own Azure AI Foundry project endpoint. No telemetry, no intermediate server at no extra cost.

Challenges and Solutions

I encountered some challenges and addressed them as follows:

• Reconstructing the full session from a single ID — Foundry agents use the OpenAI Responses API internally, where each turn links back via previous_response_id. Rather than requiring users to track every ID manually, the extension walks the chain automatically from any point — or discovers all responses from a conv_... conversation ID.

• Secure credential storage — Storing API keys safely without writing them to settings.json (which syncs to the cloud) required VS Code's SecretStorage, which encrypts keys in the OS keychain. Supporting DefaultAzureCredential alongside this meant handling both auth paths cleanly behind a single abstraction.

• Gantt rendering inside a Webview — VS Code Webviews enforce a strict Content Security Policy. Building accurate proportional Gantt bars required a lightweight custom renderer rather than a third-party charting library that would violate CSP rules.

Would love feedback from this community on:

• Additional views or metrics useful during agent debugging
• Auth patterns you're using in your own Foundry projects
• Any edge cases where trace reconstruction breaks down

Issues and PRs welcome at https://github.com/jubins/ai-foundry-agent-inspector 🚀
Please download in your VS Code and let me know what you think: https://marketplace.visualstudio.com/items?itemName=jubinsoni.foundry-trace-inspector