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>
6.3 KiB
Codebase Search (SocratiCode)
This project is indexed with SocratiCode. Always use its MCP tools to explore the codebase before reading any files directly.
Workflow
-
Start most explorations with
codebase_search. Hybrid semantic + keyword search (vector + BM25, RRF-fused) runs in a single call.- Use broad, conceptual queries for orientation: "how is authentication handled", "database connection setup", "error handling patterns".
- Use precise queries for symbol lookups: exact function names, constants, type names.
- Prefer search results to infer which files to read — do not speculatively open files.
- 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_searchwhen you're exploring, asking conceptual questions, or don't know which files to look in.
-
Follow the graph before following imports. Use
codebase_graph_queryto see what a file imports and what depends on it before diving into its contents. This prevents unnecessary reading of transitive dependencies.- Before modifying or deleting a file, check its dependents with
codebase_graph_queryto understand the blast radius. - When planning a refactor, use the graph to identify all affected files before making changes.
- Before modifying or deleting a file, check its dependents with
-
Use Impact Analysis BEFORE refactoring, renaming, or deleting code. The symbol-level call graph (
codebase_impact,codebase_flow,codebase_symbol,codebase_symbols) goes one step deeper than the file graph: it knows which functions and methods call which.codebase_impactanswers "what breaks if I change X?" (blast radius — every file that transitively calls into the target).codebase_flowanswers "what does this code do?" by tracing forward from an entry point. Call with noentrypointto discover candidate entry points (auto-detected via orphans, conventional names likemain(), framework routes, tests).codebase_symbolgives a 360° view of one function: definition, callers, callees.codebase_symbolslists symbols in a file or searches by name.- Always prefer these over reading multiple files when the question is about dependencies between functions, not concepts.
-
Read files only after narrowing down 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.
-
Use
codebase_graph_circularwhen debugging unexpected behaviour. Circular dependencies cause subtle runtime issues; check for them proactively. Also runcodebase_graph_circularwhen you notice import-related errors or unexpected initialisation order. -
Check
codebase_statusif search returns no results. The project may not be indexed yet. Runcodebase_indexif needed, then wait forcodebase_statusto confirm completion before searching. -
Leverage context artifacts for non-code knowledge. Projects can define a
.socraticodecontextartifacts.jsonconfig to expose database schemas, API specs, infrastructure configs, architecture docs, and other project knowledge that lives outside source code. These artifacts are auto-indexed alongside code duringcodebase_indexandcodebase_update.- Run
codebase_contextearly to see what artifacts are available. - Use
codebase_context_searchto find specific schemas, endpoints, or configs before asking about database structure or API contracts. - If
codebase_statusshows artifacts are stale, runcodebase_context_indexto refresh them.
- Run
When to use each tool
| 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 if you know already the exact string |
| Find exact error messages, log strings, or regex patterns | grep / ripgrep |
| See what a file imports or what depends on it | codebase_graph_query |
| Check blast radius before modifying or deleting a file | codebase_impact (symbol-level) or codebase_graph_query (file-level) |
| What breaks if I change function X? | codebase_impact target=X |
| What does this entry point actually do? | codebase_flow entrypoint=X |
| List entry points in this codebase | codebase_flow (no args) |
| Who calls this function and what does it call? | codebase_symbol name=X |
| What functions/classes exist in this file? | codebase_symbols file=path |
| Search for symbols by name across the project | codebase_symbols query=X |
| Spot architectural problems | codebase_graph_circular, codebase_graph_stats |
| Visualise module structure (text / Mermaid) | codebase_graph_visualize |
| User asks for a visual / interactive / shareable graph | codebase_graph_visualize mode="interactive" — opens a self-contained HTML page with file + symbol views, blast-radius overlay, search, PNG export. Works offline (vendored Cytoscape). |
| Verify index is up to date | codebase_status |
| Discover what project knowledge (schemas, specs, configs) is available | codebase_context |
| Find database tables, API endpoints, infra configs | codebase_context_search |
Why semantic search first? A single
codebase_searchcall 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. Once you know which files matter, targeted reading is both faster and more accurate. That said, grep remains the right tool when you have an exact string or pattern — use whichever fits the query.
Keep the connection alive during indexing. Indexing runs in the background — the MCP server continues working even when not actively responding to tool calls. However, some MCP hosts (VS Code, Claude Desktop, etc.) will disconnect an idle MCP connection after a period of inactivity, which cuts off the background process. Instruct your AI to call
codebase_statusroughly every 60 seconds after startingcodebase_indexuntil it completes. This keeps the host connection active and provides real-time progress.