Now on the VS Code Marketplace · v0.6

Understand AI code
in one hover.

Your codebase is filling with functions no human wrote. Call Charts draws the mental model in one hover — callers, callees, layers crossed. Language server, not an LLM.

Install for VS Code Star on GitHub
$0token spend
msanswer time
100%deterministic
70 KBinstall · no deps
Free · MIT $ ext install waleed.call-charts VS Code · TS / JS
order.controller.ts — shop-api
checkoutcart.controller.tsrouter.postshop.route.tsretryFailedOrdersorder.cron.tsplaceOrdercreateOrderorder.service.tsreserveStockinventory.service.tsdecrementinventory-database.tsinsertOrderorder-database.tschargeCustomerpayment.service.tscreateChargepayment-database.tssendReceiptemail.service.tsyou are here
hover a node — trace its path · stay 250 ms — details card · click — jumps in the editorCall Charts

Code review

Architecture smells have a color.

AI writes the code; you review it. One hover shows what a function calls, who calls it, and which layers it crosses — no ⌘-clicking through five files.

The mental model in one hover Layers are colors Not an LLM
router.putuser.route.tsupdateUserProfileupdateProfileuser.service.tsupdateUseruser-database.tsfindOneAndUpdateuser-database.ts
findOneAndUpdate hangs straight off the controller — the edge a reviewer skims past in a 400-line diff. Here it is: one orange edge.
Examples

More flows, same renderer.

Every chart on this page was generated by the extension from a call-hierarchy tree — Express handlers, Angular components, deep utility chains. Three levels each side.

Callers on the left Colored by layer Library noise removed
17const invoice = await this.invoices.getInvoice(req.params.id);
router.getinvoice.route.tsgetInvoicegetInvoiceinvoice.service.tsfindByIdinvoice-database.tsbuildResponseresponse.helper.ts
An Express handler — route → controller → service → database.
64async onSaveCustomer(): Promise<void> {
onSaveCustomerupdateCustomercustomer.service.tssetCustomerStatecustomer.store.tsputapi.helper.tsshowToasttoast.service.ts
An Angular save handler fanning out through a service into the store.
29return this.reports.exportReport(range);
exportReportbuildReportreport.service.tsaggregateOrdersgroupByWeekdate.helper.tsrenderPdfpdf.helper.ts
A report exporter following chains three levels deep.
Details card

Six answers per hover.

The card reads the function so you don't have to — every row extracted from source and the call hierarchy, deterministically.

  • →in — the exact line that invokes this function.
  • ↩out — its return expressions, straight from the body.
  • ▲guards — early exits that stop execution.
  • Δmutates — state writes (this.x =).
  • ←called by — every caller by name: the blast radius.
  • ◷git — the last commit that touched these lines.
chargeCustomerpayment.service.ts:88
async chargeCustomer(order: Order): Promise<Receipt>
→in
await this.payments.chargeCustomer(order) — placeOrder
↩out
new Receipt(charge.id, order.total)
▲guards
if (order.total <= 0) → throw InvalidOrderError
Δmutates
lastChargeAt
←called by
placeOrder · retryFailedOrders
◷git
3 weeks ago · sam · fix(PAY-212): idempotent retries
async24 lines1 param
Under the hood

The language server, drawn.

Call Charts asks the TypeScript language server the same questions that power “Go to Definition”, lays the answers out as a tidy tree, and extracts the card's facts from your source and local git.

0 network calls · 0 telemetry · 0 runtime dependencies · MIT licensed

Install

One command. Everything local.

ext install waleed.call-charts
  • $0 tokens — the language server, not an LLM
  • Answers in milliseconds, 100% deterministic
  • 70 KB install, zero runtime dependencies
  • Zero network calls, zero telemetry
  • Works in VS Code, TS & JS
Get it from the Marketplace

Or paste the command into VS Code's Quick Open (⌘P / Ctrl+P), or search “Call Charts” in the Extensions panel.