Admin console · animated

Click to expand

Codebase Atlas — /explore

The Explore page turns the raw indexed source files into a visual, navigable map of how your project is architecturally structured. It is the fastest way to answer “where does X live?”, “what imports what?”, and “which layer handles this concern?” — without opening your editor.

Three views

Graph

A ReactFlow canvas laid out in deterministic swimlane columns (one column per architectural layer), with every file as a node coloured by layer. Nodes are freely draggable within the canvas:

Each node chip shows:

• Left accent bar in the layer colour
• Filename truncated to fit
• File extension badge (.tsx, .ts, .py, …)
• Directory context (last two path segments) below the filename

Import edges are drawn as directed arrows. Hover a node for its full path tooltip. Click a node to open the detail panel on the right.

Controls:

• Drag — pan the canvas
• Scroll — zoom in/out
• Layer legend (bottom-left) — expands to show counts and a proportional fill bar per layer
• File/edge counter badge (top-left)
• Zoom in / Zoom out / Fit view (bottom-right)

Layers

A horizontal Sankey flow that groups files left-to-right: UI → Library → Backend → Tests → Config → Other.

Each column shows:

• Layer name and file count in the layer’s colour
• A proportional fill bar (wider = more files relative to the largest column)
• Hub node — the file with the highest import degree in that column (most-imported or most-importing)
• File cards with filename, .ext badge, and line count

Import edges are drawn as bezier curves with directional arrows between columns. This makes cross-layer dependencies immediately obvious.

Click any file card to open the detail panel below the lane.

Search

Semantic search over vector embeddings. Type a natural-language description of what you’re looking for — the search finds the most relevant files and symbols ranked by cosine similarity.

Layer filter tabs appear after a search to narrow results to a single architectural layer (e.g. “Tests only” or “Backend only”). Click the layer chip, or click All to clear the filter.

Each result shows:

• Symbol or filename in monospace
• Layer badge
• File path
• A colour-coded similarity bar (green ≥ 70%, amber ≥ 50%, red below 50%)
• Content preview (first 240 characters of the indexed content)

Click a result to open the detail panel. Click the panel’s View in graph button to switch to Graph view with that file selected.

The detail panel

Clicking any node (in any view) opens a detail panel with:

Layer filter chips

The Filter: row above any view lets you narrow all three tabs simultaneously. Click 64 Tests and the graph shows only test nodes and their inter-test edges, the Layers lane collapses to just the Tests column, and Search results are pre-scoped to Tests.

Click the chip again (or Clear) to restore the full view.

Stats bar

Below the page title:

115 files · ts, tsx, js · Indexed via Mushi SDK

Shows total indexed file count, top languages detected by extension, and the indexing source.

Density toggle

Switch between Files (one node per file) and Symbols (one node per exported function, class, or constant). Symbol mode gives a much denser graph suited for large codebases where you want to trace a specific function’s callers.

Indexing

npm install -g @mushi-mushi/cli

mushi index

What the search understands

The semantic search uses the same embeddings that power RAG-augmented triage and fix suggestions. It understands:

• Concepts: “authentication and session handling”, “rate limiting”, “error boundary”
• Patterns: “component that wraps children with a loading state”, “hook that fetches paginated data”
• Behaviour: “where payment processing happens”, “what sends the push notification”
• Cross-language: works across TypeScript, Python, Go, Swift, Kotlin, and any other language with indexed content

It does not understand:

• Exact symbol names (use your editor’s Go-to-symbol for that)
• Regex or glob patterns
• File system structure queries (“all files in src/screens/”) — use the Graph or Layers view instead

API reference

The Explore page is backed by two project-scoped REST endpoints:

GET /v1/admin/projects/:id/codebase/explore

Returns the full graph payload.

Query parameters:

Response:

{
  "nodes": [
    {
      "id": "uuid",
      "node_type": "code_file",
      "label": "auth-guard.tsx",
      "metadata": {
        "file_path": "components/auth-guard.tsx",
        "symbol_name": null,
        "signature": null,
        "line_start": 1,
        "line_end": 142,
        "language": "tsx",
        "layer": "ui",
        "content_preview": "export function AuthGuard({ children, ..."
      }
    }
  ],
  "edges": [
    {
      "id": "uuid",
      "source_node_id": "uuid",
      "target_node_id": "uuid",
      "edge_type": "imports",
      "weight": 1
    }
  ],
  "layers": { "ui": 12, "lib": 3, "test": 64, "other": 36 },
  "total_files": 115
}

POST /v1/admin/projects/:id/codebase/search

Semantic search over vector embeddings.

Body:

{
  "query": "authentication logic",
  "k": 20
}

Response:

{
  "results": [
    {
      "id": "uuid",
      "file_path": "components/auth-guard.tsx",
      "symbol_name": "AuthGuard",
      "signature": null,
      "line_start": 1,
      "line_end": 142,
      "content_preview": "export function AuthGuard...",
      "layer": "ui",
      "similarity": 0.87
    }
  ],
  "query": "authentication logic"
}

Similarity scores range from 0 to 1. Scores above 0.7 are usually highly relevant. Below 0.3 is coincidental overlap.

Troubleshooting