Interested in using Hud at scale?
Thank you!
We received your message and will get back to you shortly.
By submitting this form, I acknowledge Hud’s Privacy Policy
May Walter
September 1, 2025
We started Hud's Snaky Chart as an internal term that somehow caught on, and now it's one of our most powerful features. But the story behind it reveals a fundamental problem in software engineering that we had to solve.
The Challenge: Understanding Function Flows in Production
A key aspect of understanding how code behaves in production is understanding the flows of functions calling other functions. It might sound simple, but getting this data in real-time is surprisingly complex.
We discovered three major obstacles:
1. Static Code Analysis Isn't the Right Tool
You can't just use code analysis tools like xref-they return 10 times as many callers as there are in reality. Static analysis shows you what *could* call a function, not what *actually* calls it in production.
2. Stack Traces Aren’t the Right Tool
You can't grab many stack traces in production because it will harm performance. Even if you could, in dynamic languages like JavaScript, the asynchronous nature breaks the context of the stack trace. The call stack becomes meaningless when you have async operations, promises, and callbacks
3. The Visualization Problem
Even if you could overcome the data collection challenges, you still need to visualize the diversity and discrepancies of how that function behaves:
- Where is this function called from more often?
- Does it throw errors?
- Does it throw errors upstream equally across its callers, or is one caller triggering "bad" behavior?
- If it throws errors at a particular caller, is it the root cause or just propagating an error from deeper downstream?
Why This Matters for AI Agents
We knew that for AI agents to be able to generate production-grade code, we had to solve this deep problem. Agents need to understand not just the syntax and structure of code, but how it behaves in the real world.
The major challenge was building a low-level, highly efficient solution to gather this data from production without using stack traces and with negligible effect on performance. Then we had to find a way to visualize it in a meaningful way.
The Solution: Variable Width, Dual Tone Sankey Chart
We went with a variable width, dual tone Sankey chart-a visualization that can show in one image:
- Each function's callers and callees
- The frequency and distribution of each relationship (based on line width)
- Whether there are errors in the flow (red)
- Where errors are coming from (root cause vs. propagation)
The chart shows the "flow" of function calls as actual flows, with the width representing frequency and color coding representing error states. It's like having a real-time map of your code's behavior in production.
Production-Driven Code Navigation
The real power of the Snaky Chart is that it enables an entirely new way of navigating code. You and your AI agent can now explore the codebase with full awareness of how functions actually behave in production.
This is production-driven code navigation, and we love it. Instead of guessing about function relationships, you can see exactly how your code flows in the real world.
The Impact
The Snaky Chart transforms how engineers understand their codebase. You can now:
- Identify performance bottlenecks by seeing which callers are most frequent
- Debug errors by tracing them back to their root cause
- Understand the impact of changes before making them
- Collaborate with AI agents that have the same production context you do
How It Got Its Name
Some people felt the Sankey chart looked a bit "snakey" with its flowing lines and curves, and the term stuck. But the Snaky Chart isn't just a cool visual-it's integrated directly into your IDE for every function.
---
Ready to navigate your code with production reality? The Snaky Chart brings the full context of your application's behavior directly into your IDE.
See code in a new way
The runtime code sensor.