feat: add interactive web UI for codebase visualization#48
Merged
harshkedia177 merged 16 commits intomainfrom Mar 4, 2026
Merged
feat: add interactive web UI for codebase visualization#48harshkedia177 merged 16 commits intomainfrom
harshkedia177 merged 16 commits intomainfrom
Conversation
- FastAPI app factory with 16 API routes (graph, search, analysis, files, cypher, diff, processes, SSE events) - axon ui CLI command (--port, --watch, --no-open, --dev flags) - Vite + React 18 + TypeScript + Tailwind CSS v4 frontend scaffold - Terminal-inspired design system with all color tokens from spec - Typed API client (ky-based), Zustand stores (graph, view, data) - App shell: Header, StatusBar, three-panel resizable PanelLayout
- Sigma.js v3 + Graphology graph canvas with ForceAtlas2 web worker layout - Node rendering by type (color) and degree (size), edge dimming on select - Explorer sidebar: file tree, node/edge filters, communities list, dead code list - Right panel: context tab (callers/callees/types), impact tab (depth-grouped blast radius), code tab (Shiki syntax highlighting), processes tab (flow traces) - All components follow terminal aesthetic with CSS custom properties
…ions, and SSE live reload Wave 4+5 of the web UI: - Analysis view with health score, dead code report, coupling heatmap, inheritance tree, branch diff - Cypher console with query editor, results table, preset queries, and history - Command palette (Cmd+K) with search and command modes via cmdk - Keyboard shortcuts for all major actions - Impact ripple and flow trace graph animations - Community hull computation for graph overlays - SSE hook for live reload on reindex - Wire GraphCanvas and DetailPanel into App.tsx
…ckend tests Wave 6 — final polish: - Minimap (160x120px canvas) with viewport navigation and drag-to-pan - Layout mode switching: force (FA2), tree (hierarchical), radial (concentric) - Animated position transitions (500ms ease-out) between layout modes - LoadingSpinner, EmptyState, ErrorBoundary shared components - Loading/empty/error states added to GraphCanvas, DetailPanel, FileTree, ContextTab, ImpactTab, CodeTab, AnalysisView, CypherView - Build pipeline: npm run build produces dist/, static file serving fixed - Dev mode: --dev flag skips static mount for Vite HMR proxy - pyproject.toml source-exclude prevents node_modules in wheel - 48 backend API route tests (all passing)
- Add @sigma/node-border for bordered node rendering with muted color palette - Tune ForceAtlas2 for better spacing (gravity 0.3, scalingRatio 8, strongGravity) - Reduce label density and raise size threshold to prevent text overlap/flicker - Hide unconnected edges on selection, dim unrelated nodes - Fix API routing: add /api prefix to all router includes in app.py - Extract shared TypeBadge component, consolidate N+1 community queries - Clean up unused state and simplify component logic across dashboard
- Introduced `_detect_source_roots` function to identify source root directories in a `src/` layout. - Updated `resolve_import_path` to utilize detected source roots for resolving absolute imports. - Enhanced `_resolve_python_absolute` to attempt resolution with source root prefixes. - Added unit tests for new import resolution features, ensuring correct handling of absolute imports in `src/` layouts.
…unctionality - Added `cypher_guard.py` with regex for detecting write keywords in Cypher queries to enforce read-only execution. - Updated `embedder.py` to include a new `embed_query` function for embedding query strings. - Refactored `kuzu_backend.py` to use the new `escape_cypher` function for escaping Cypher literals. - Enhanced `resources.py` to return raw dead-code rows and updated related functions for consistency. - Modified `tools.py` to import `escape_cypher` from `kuzu_backend`. - Updated various components and routes to utilize the new safety and embedding features, improving overall query handling and data retrieval.
…d issues and enhanced the security
- Replaced `uv_build` with `hatchling` for building the project. - Updated `pyproject.toml` to reflect new build configurations and package exclusions. - Enhanced `README.md` with detailed instructions for the new interactive web UI, including usage examples and API endpoints. - Added frontend build steps to the GitHub Actions workflow for automated deployment.
- Updated GitHub Actions workflow to trigger on additional pull request events: synchronize and reopened. - Modified diff.py to ensure worktree path is converted to string for cleanup. - Added comments in kuzu_backend.py to clarify the use of escape_cypher for query safety. - Refactored tools.py to utilize sanitize_cypher for comment stripping in Cypher queries. - Updated frontend components to integrate DOMPurify for sanitizing HTML content. - Enhanced useSearch hook to support aborting ongoing requests and improved error handling. - Adjusted tsconfig.json to enforce stricter unused variable checks. - Added tests for write keyword handling in Cypher queries and modified node serialization in diff endpoint.
- Updated total_symbols and dead_count calculations to explicitly cast results to integers, improving accuracy in health analysis metrics.
- Removed pagination parameters from the get_graph function to return all nodes and edges. - Updated the serialization logic to directly return the total count of nodes instead of using offset and limit.
- Simplified the initialization of KuzuBackend to always set read_only to true. - Enhanced CSS for graph node colors, transitioning to a hue-separated palette for better visual distinction. - Modified edge type configuration to include color and arrow properties, improving edge visibility and interaction. - Implemented custom rendering for node labels and hover effects to enhance clarity and user experience. - Adjusted graph layout settings for smoother transitions and refined node size calculations for better visual hierarchy. - Updated graph store to manage edge visibility dynamically based on node types, ensuring edges are only shown when relevant nodes are visible.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Linked Issue
Issue: N/A — this is a major feature addition developed by the maintainer.
What Changed and Why
Axon previously only exposed its code intelligence through CLI and MCP tools. This PR adds a full interactive web UI (
axon web) that lets developers visually explore their codebase's knowledge graph — browse files, inspect symbols, trace call flows, view community clusters, analyze coupling, and run Cypher queries — all through an interactive browser-based dashboard.The backend is a FastAPI app serving REST endpoints over the existing Axon storage layer, and the frontend is a React + TypeScript app with force-directed graph visualization (Sigma.js), analysis dashboards, and a Cypher console.
What's Included
axon webcommand to launch the dashboardHow to Test
Checklist
pytestpasses locallyruff check src/ tests/passes