The Explorer¶

The portal opens a web view onto everything WhyGraph and CodeGraph have built for each project. Open a project and you get two views, switched from the sidebar:

Explorer - browse the code graph, jump to any symbol, and read its rationale, evidence, relationships, and history side by side. This page.
Chat - ask questions in English and let an assistant call WhyGraph's tools to answer them. See The Chat assistant.

Both are backed by the same data the MCP tools serve - the web API is just a second transport over the exact same functions, so the panel can never drift from what your editor sees.

Open it¶

Start the portal, then open a project from the Projects page:

whygraph up

The portal is at http://127.0.0.1:8765 by default. The Explorer for a project is at /p/<slug>/explorer. See Start the portal for the port, the other host commands and stopping it.

Scan first

The panel reads the CodeGraph index and the WhyGraph evidence database. A project's first scan (started when you set it up) fills them - until then there's no graph to draw, and every symbol's rationale shows "no evidence" (see Rationale on demand).

Localhost only

The portal is published to 127.0.0.1 only and has no login in local mode - it is a single-user tool for your own machine. Nothing is exposed beyond its loopback. See the security model.

The Explorer is read-only apart from the explicit Generate rationale button. The Chat assistant is not: it calls an LLM and stores sessions and messages in the project's WhyGraph database.

What you see in the Explorer¶

Left - containment tree

directory → file → class → method, lazy-loaded. Click a symbol to open it.
Center - graph

The overview (directory super-nodes, colored by rationale coverage) is the landing view; click a directory to expand it. Pick a symbol and the center switches to its ego graph - what it calls, is called by, imports, and contains.
Right - detail panel

Tabs for Relationships, Rationale, Evidence, and History on the selected symbol.
⌘K - search

Find any symbol by name (disambiguated by file path), Enter to open it - recentering the graph, opening the panel, and revealing it in the tree.

On a phone¶

Below the md breakpoint (about 768 px) the three panes become one: scrollable Tree, Graph and Details tabs share a single full-height pane. Pick a symbol in the tree (or tap a node in the graph, or open a link) and the view jumps to Details; Back to graph returns to the graph. The open symbol stays in the address (?node=...&file=...), so a link works the same on a desktop. A link that has only ?node= still finds the symbol's file and opens the tree down to it.

Every symbol reference in the panel - a search hit, a graph node, a relationship row - opens the same way, so you can navigate the codebase by following edges. A whygraph://symbol/... link in a chat answer opens a symbol here too.

How the overview stays readable¶

A real repo has far too many calls and imports edges to draw at once, so the overview doesn't draw them. It lifts each edge onto the deepest currently-visible ancestor of both endpoints: cross-directory edges become one weighted arrow between super-nodes, and edges wholly inside a collapsed directory are hidden and counted instead. Expand a directory and the edges beneath it resolve into finer detail.

Rationale on demand¶

Generating a rationale card calls an LLM, so the panel never does it behind your back. The Rationale tab shows a cached card if one exists; otherwise it shows a Generate rationale button. Click it, watch the loading state, and the card renders - and is cached, exactly as if the MCP tool had produced it.

The tab shows one state at a time:

Generate rationale - the symbol has history and you can generate.
No history to explain yet - the symbol has no commits in the scanned history, so there is no button to press. Rescan from the project Overview after new commits.
A partial card - the card was built while some commits still had no description. A note says how many were waiting, and a Complete button describes them and regenerates the card (a second card generation, charged to the budget). It is hidden when you cannot generate, and if the card was already completed recently it says to try again later.
Add a provider key - the rationale model's provider has no key. People who can change the project's settings get a link to them; everyone else is told to ask a project admin.
Viewers can read cards but not generate them - for the viewer role.
A monthly budget message with the button disabled - when a hard-stopped budget is reached.

The Evidence and History tabs never call an LLM, so they always work; when they are empty they say to rescan after new commits.

Generation uses the rationale model configured for the project - the rationale override or the default model, with the provider key from Settings - the same provider and model the MCP tool uses. If that provider has no key yet, add one under Settings first. See Configuration.

Notes¶

The Notes tab lists the project notes that apply to the selected symbol: notes anchored to it, to lines that overlap it, to its file or folder, or to an area that contains it. Unlike what an agent sees, the tab also shows proposals waiting for review and notes whose code is missing, so you can review in place. Each note shows its kind, its anchor state (current, changed, missing, unknown) and who proposed and confirmed it. Add note proposes a note anchored to the symbol. Viewers see the tab read-only; the full workflow (Confirm, Still true, Revise, Retire) is on the project's Notes page. A linked project has no Notes tab.

Coverage heatmap¶

Because rationale cards are generated lazily, the overview colors each directory and file by how much of it has been explained - a quick map of where you've already asked "why?" and where you haven't. Hover a bar (or read it with a screen reader) for "Explained: 0 of 2 symbols".

Develop the UI¶

The panel's source lives at src/playground/ (Vite + React + TypeScript). make dev-local runs a dev portal with the Vite dev server in front of it, so edits hot-reload at http://localhost:5174; make playground builds the production bundle into the wheel's static directory. See Developing WhyGraph for every development mode.

Not in scope¶

The panel is a local tool, and stays one: no login and no multi-user support in local mode, no remote hosting, and no editing - it never writes to your source tree. See the roadmap for what's deferred.