Files
socraticode/CLAUDE.md
Giancarlo Erra 50d8853ea6 feat(visualize): add interactive HTML graph explorer; British-English doc sweep
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>
2026-04-23 16:04:41 +01:00

6.3 KiB
Raw Permalink Blame History

Codebase Search (SocratiCode)

This project is indexed with SocratiCode. Always use its MCP tools to explore the codebase before reading any files directly.

Workflow

  1. 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_search when you're exploring, asking conceptual questions, or 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.

    • Before modifying or deleting a file, check its dependents with codebase_graph_query to understand the blast radius.
    • When planning a refactor, use the graph to identify all affected files before making changes.
  3. 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_impact answers "what breaks if I change X?" (blast radius — every file that transitively calls into the target).
    • codebase_flow answers "what does this code do?" by tracing forward from an entry point. Call with no entrypoint to discover candidate entry points (auto-detected via orphans, conventional names like main(), framework routes, tests).
    • codebase_symbol gives a 360° view of one function: definition, callers, callees.
    • codebase_symbols lists 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.
  4. Read files only after narrowing down via search. Once search results clearly point to 13 files, read only the relevant sections. Never read a file just to find out if it's relevant — search first.

  5. Use codebase_graph_circular when debugging unexpected behaviour. Circular dependencies cause subtle runtime issues; check for them proactively. Also run codebase_graph_circular when you notice import-related errors or unexpected initialisation order.

  6. Check codebase_status if search returns no results. The project may not be indexed yet. Run codebase_index if needed, then wait for codebase_status to confirm completion before searching.

  7. 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. These artifacts are auto-indexed alongside code during codebase_index and codebase_update.

    • Run codebase_context early to see what artifacts are available.
    • Use codebase_context_search to find specific schemas, endpoints, or configs before asking about database structure or API contracts.
    • If codebase_status shows artifacts are stale, run codebase_context_index to refresh them.

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_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. 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_status roughly every 60 seconds after starting codebase_index until it completes. This keeps the host connection active and provides real-time progress.