Interactive Viewer (primary)
────────────────────────────
codebase_graph_visualize now accepts mode="mermaid" (default, existing
behaviour — text Mermaid diagram) or mode="interactive". Interactive
mode generates a self-contained HTML page and opens it in the user's
default browser via the `open` npm package (cross-platform: macOS,
Linux, Windows). Cytoscape.js 3.30.2 + Dagre 0.8.5 + cytoscape-dagre
2.5.0 are vendored under src/assets/ — no CDN, works offline.
Features:
- File view — every source file as a node, imports as edges, language
colour-coded, circular deps highlighted in red.
- Symbol view toggle — functions/classes/methods as nodes with call
edges (confidence-styled). Embedded when the symbol graph fits under
20k symbols / 60k call edges; above that threshold the file view
remains usable and a banner directs users to codebase_impact /
codebase_symbols for symbol-level queries.
- Sidebar on node click — imports, dependents, per-file symbol list
(first 30 + link to codebase_symbols), action buttons for blast
radius and call flow.
- Right-click any node → blast radius overlay (reverse-transitive
closure). Call-flow button on the sidebar for forward traversal.
- Live search across files and symbols, six Cytoscape layouts
(Dagre / force / concentric / breadth-first / grid / circle),
PNG export (filename sanitised for cross-platform safety).
- `open: false` parameter skips auto-launch and just returns the file
path — useful in headless environments.
Viewer is XSS-safe by construction: all DOM built with createElement
+ textContent (no innerHTML anywhere); embedded JSON escapes every
"<" as \u003c so a stray </script> in a file path or symbol name
cannot break out of the script-type="application/json" container.
New files:
- src/assets/{cytoscape.min.js,dagre.min.js,cytoscape-dagre.js,
viewer-template.html,viewer-styles.css,viewer-app.js}
- scripts/copy-assets.mjs — postbuild copier (tsc does not handle
non-TS files); wired into npm run build and prepublishOnly
- src/services/graph-visualize-html.ts — HTML builder with scale-cap
logic (MAX_SYMBOLS / MAX_EDGES / MAX_SYMS_PER_FILE) and parallel
per-file Qdrant payload loading
- src/services/graph-visualize-browser.ts — temp-file write +
cross-platform open wrapper
- tests/unit/graph-visualize-html.test.ts — 5 tests (self-contained,
escape-safety, symbolMode omitted/capped, cycle marking)
- tests/unit/graph-visualize-browser.test.ts — 4 tests (deterministic
path, overwrite, success + failure paths)
New runtime dependency: open@^10.2.0 (Sindre Sorhus, zero transitive
deps, cross-platform).
British-English doc sweep (secondary)
─────────────────────────────────────
Switched all project docs to British English spelling:
behavior → behaviour organized → organised
color-coded → colour-coded initialization → initialisation
visualization → visualisation customization → customisation
recognized → recognised optimized → optimised
acknowledgment → acknowledgement finalize → finalise
analyzing → analysing apologizing → apologising
sexualized → sexualised
Affected files: README, DEVELOPER, AGENTS, CLAUDE, GEMINI, SECURITY,
CONTRIBUTING, CODE_OF_CONDUCT, agents/codebase-explorer.md,
skills/codebase-exploration/{SKILL.md,references/tool-reference.md},
skills/codebase-management/references/tool-reference.md.
Also surfaced Impact Analysis in the top-level README paragraph.
Docs
────
- README: "Interactive graph explorer" subsection under Impact Analysis,
tool-table row updated.
- DEVELOPER.md: architecture section under codebase_graph_visualize
covering asset layout, data flow, cap logic, XSS-safety invariants.
- AGENTS.md / CLAUDE.md / GEMINI.md: new "User asks for a visual /
interactive / shareable graph" row in the tool-routing table.
- skills/codebase-exploration/: SKILL.md bullet + tool-reference.md
full mode description.
- CHANGELOG.md: "Interactive Graph Explorer" section under Unreleased.
Quality gates (all green)
─────────────────────────
- Biome lint: clean
- TypeScript (tsc): clean
- Unit tests: 685/685
- Integration tests: 154/154 (real Qdrant + Ollama)
- CodeRabbit: No findings (1 fix applied — filename sanitisation)
- Snyk code test: 0 issues
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5.3 KiB
name, description
| name | description |
|---|---|
| codebase-exploration | Explore and understand codebases using SocratiCode semantic search, dependency graphs, and context artifacts. Use when exploring code, understanding architecture, finding functions/types, analysing dependencies, searching database schemas or API specs, or when socraticode/codebase_search tools are available. Activates when the user asks about code structure, wants to find where a feature lives, or needs to understand how code is organised. |
SocratiCode Codebase Exploration
Use SocratiCode MCP tools to explore codebases efficiently. The core principle: search before reading — the index gives you a map of the codebase in milliseconds; raw file reading is expensive and context-consuming.
Workflow
1. Start most explorations with codebase_search
Hybrid semantic + keyword search (vector + BM25, RRF-fused) runs in a single call.
- Broad queries for orientation: "how is authentication handled", "database connection setup", "error handling patterns"
- Precise queries for symbol lookup: exact function names, constants, type names
- Prefer search results to infer which files to read — do not speculatively open files
- Use
fileFilterto narrow to a specific file path,languageFilterfor a specific language - Adjust
minScore(default 0.10) for precision vs recall — lower for more results, higher for stricter matching
When to use grep instead: If you already know the exact identifier, error string, or regex pattern, grep/ripgrep is faster and more precise — no semantic gap to bridge. Use codebase_search when exploring, asking conceptual questions, or when you don't know which files to look in.
2. Follow the graph before following imports
Use codebase_graph_query to see what a file imports and what depends on it before diving into its contents. This prevents unnecessary reading of transitive dependencies.
codebase_graph_query— imports and dependents for any file (pass relative path)codebase_graph_stats— architecture overview: total files, edges, most connected files, orphans, language breakdowncodebase_graph_circular— find circular dependencies (these cause subtle runtime bugs; check proactively when debugging unexpected behaviour)codebase_graph_visualize— Mermaid diagram colour-coded by language, circular deps highlighted in red. Passmode: "interactive"to open a self-contained HTML explorer (file + symbol views, blast-radius overlay, search, PNG export — works offline) instead.
The graph is auto-built after indexing. Use codebase_graph_status to check if the graph is ready.
3. Read files only after narrowing via search
Once search results clearly point to 1-3 files, read only the relevant sections. Never read a file just to find out if it's relevant — search first.
A single codebase_search call returns ranked, deduplicated snippets from across the entire codebase in milliseconds. This gives you a broad map at negligible token cost — far cheaper than opening files speculatively.
4. Leverage context artifacts for non-code knowledge
Projects can define a .socraticodecontextartifacts.json config to expose database schemas, API specs, infrastructure configs, architecture docs, and other project knowledge that lives outside source code.
codebase_context— list available artifacts (names, descriptions, paths, index status)codebase_context_search— semantic search across all artifacts (or filter withartifactName)- Artifacts are auto-indexed on first search and auto-detect staleness
Run codebase_context early to see what's available. Use codebase_context_search before asking about database structure, API contracts, or infrastructure.
5. Check status if something seems wrong
codebase_status— check index status, progress, watcher state, graph status- If search returns no results, the project may not be indexed yet
- If the watcher is inactive, results may be stale — run
codebase_updateor start the watcher
6. Get an overview of all tools
codebase_about— quick reference of all SocratiCode tools and a typical workflow
Goal → Tool Quick Reference
| Goal | Tool |
|---|---|
| Understand what a codebase does / where a feature lives | codebase_search (broad query) |
| Find a specific function, constant, or type | codebase_search (exact name) or grep |
| Find exact error messages, log strings, or regex patterns | grep / ripgrep |
| See what a file imports or what depends on it | codebase_graph_query |
| Get architecture overview (files, edges, most connected) | codebase_graph_stats |
| Spot circular dependencies | codebase_graph_circular |
| Visualise module structure (text / Mermaid) | codebase_graph_visualize |
| User asks for a visual / interactive / shareable graph | codebase_graph_visualize mode="interactive" |
| Check graph build status | codebase_graph_status |
| Verify index is up to date | codebase_status |
| Discover available schemas, specs, configs | codebase_context |
| Find database tables, API endpoints, infra configs | codebase_context_search |
| Quick overview of all tools | codebase_about |
For full parameter details on every tool, see references/tool-reference.md.