docs: rewrite user-facing documentation with screenshots (#11)

docs/features/graph.md

@@ -1,92 +1,52 @@
 # Code Knowledge Graph
 
-The Code Knowledge Graph feature parses your repository source code and builds an interactive graph of symbols (functions, classes, modules) and their relationships (calls, imports, inheritance).
+The Code Knowledge Graph parses your repository and builds an interactive visualization of its structure -- functions, classes, modules, and how they connect through calls, imports, and inheritance.
 
-## Graph Index
+## What It Shows
 
-Navigate to **Code Graph** in the sidebar to see all repositories. Click a repository card to open its graph explorer.
+The graph maps your codebase as a network of nodes (code symbols) and edges (relationships). It supports Rust, TypeScript, JavaScript, and Python.
 
-## Building a Graph
+**Node types**: Functions, methods, classes, structs, enums, interfaces, traits, modules, and files.
 
-Before exploring, you need to build the graph:
+**Edge types**: Calls (function invocation), imports, inheritance, interface/trait implementation, containment (module contains function), and type references.
 
-1. Open the graph explorer for a repository
-2. Click **Build Graph**
-3. The agent parses all source files and constructs the graph
-4. A spinner shows build progress
+Nodes are color-coded by community -- clusters of highly connected symbols detected automatically using community detection algorithms.
 
-The graph builder supports these languages:
-- Rust
-- TypeScript
-- JavaScript
-- Python
+## How to Navigate
 
-## Graph Explorer
+### Graph Explorer
 
-The graph explorer provides an interactive network visualization.
+1. Navigate to **Code Graph** in the sidebar
+2. Select a repository from the list
+3. If the graph has not been built yet, click **Build Graph** and wait for parsing to complete
+4. The interactive canvas renders with all symbols and relationships
 
-### Canvas
+On the canvas:
 
-The main area renders an interactive network diagram using vis-network:
-
-- **Nodes** represent code symbols (functions, classes, structs, enums, traits, modules, files)
-- **Edges** represent relationships between symbols
-- Nodes are **color-coded by community** — clusters of highly connected symbols detected using Louvain community detection
-- Pan by dragging the background, zoom with scroll wheel
-
-### Node Types
-
-| Type | Description |
-|------|-------------|
-| Function | Standalone functions |
-| Method | Methods on classes/structs |
-| Class | Classes (TypeScript, Python) |
-| Struct | Structs (Rust) |
-| Enum | Enumerations |
-| Interface | Interfaces (TypeScript) |
-| Trait | Traits (Rust) |
-| Module | Modules and namespaces |
-| File | Source files |
-
-### Edge Types
-
-| Type | Description |
-|------|-------------|
-| Calls | Function/method invocation |
-| Imports | Module or symbol import |
-| Inherits | Class inheritance |
-| Implements | Interface/trait implementation |
-| Contains | Parent-child containment (module contains function) |
-| TypeRef | Type reference or usage |
-
-### Statistics
-
-The statistics panel shows:
-- Total node and edge count
-- Number of detected communities
-- Languages found in the repository
-- File tree of the codebase
+- **Pan** by dragging the background
+- **Zoom** with the scroll wheel
+- **Click a node** to open the code inspector panel
 
 ### Search
 
-Search for symbols by name:
-
-1. Type at least 2 characters in the search box
-2. Matching symbols appear in a dropdown
-3. Click a result to highlight it on the canvas and open the inspector
+Type at least 2 characters in the search box to find symbols by name. Click a result to highlight it on the canvas and open the inspector.
 
 ### Code Inspector
 
-When you click a node (on the canvas or from search), the inspector panel shows:
+When you click a node, the inspector panel shows:
 
 - **Symbol name** and kind (function, class, etc.)
 - **File path** with line range
-- **Source code** excerpt from the file
-- **Connected nodes** — what this symbol calls, what calls it, etc.
+- **Source code** excerpt
+- **Connected nodes** -- what this symbol calls, what calls it, what it imports, etc.
+
+### Statistics
+
+The statistics panel shows the total node and edge count, number of detected communities, languages found, and a file tree of the codebase.
 
 ## Use Cases
 
-- **Onboarding** — Understand unfamiliar codebase structure at a glance
-- **Architecture review** — Identify tightly coupled modules and circular dependencies
-- **Security** — Trace data flow from entry points to sensitive operations
-- **Refactoring** — See what depends on code you plan to change
+- **Onboarding** -- understand unfamiliar codebase structure at a glance
+- **Architecture review** -- identify tightly coupled modules and circular dependencies
+- **Security analysis** -- trace data flow from entry points to sensitive operations to understand blast radius
+- **Impact analysis** -- see what depends on code you plan to change before refactoring