ctxgraph-code 0.1.1__tar.gz → 0.1.3__tar.gz

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: ctxgraph-code
-Version: 0.1.1
+Version: 0.1.3
 Summary: Code knowledge graph for Claude Code. Build a relationship graph of your Python codebase and query it during coding sessions.
 Author: ctxgraph-code contributors
 License: MIT
@@ -162,6 +162,21 @@ ctxgraph-code context "add pagination to the users endpoint"
 
 Generates a focused context summary: relevant files, their symbols, and dependency/call edges between them. This is the closest equivalent to `ctxgraph`'s capsule format.
 
+### `view`
+
+```bash
+ctxgraph-code view                 # generates interactive D3.js HTML and opens browser
+ctxgraph-code view --no-open       # generate HTML without opening browser
+ctxgraph-code view --tree          # show text tree instead (useful in terminal)
+ctxgraph-code view --output graph.html  # save to custom path
+```
+
+Opens an **interactive D3.js force-directed graph** in the browser. Drag nodes, zoom/pan, search by name, filter by type (File/Class/Function). Hover to highlight connected nodes and see summaries.
+
+The HTML is self-contained (loads D3.js from CDN) and saved to `.ctxgraph/graph.html`.
+
+Use `--tree` for a terminal-friendly text view of the directory hierarchy with symbols and edges.
+
 ### `info`
 
 ```bash
@@ -272,10 +287,10 @@ Built-in default exclusion patterns (always applied): `__pycache__`, `*.pyc`, `.
 
 | Feature | ctxgraph | ctxgraph-code |
 |---------|----------|---------------|
-| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 8 (init, build, query, deps, usedby, overview, symbols, context, setup, info) |
+| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 9 (init, build, query, deps, usedby, overview, symbols, context, setup, view, info) |
 | LLM integration | Built-in (Ollama, Claude, OpenAI, Azure) | None (delegates to Claude Code) |
 | Chat sessions | Yes | No |
-| Visualizer | D3.js HTML + SVG | No |
+| Visualizer | D3.js HTML + SVG | D3.js HTML (`view` opens in browser, `--tree` for text) |
 | Skills system | Yes (customizable skill TOML files) | No |
 | MCP server | Yes | No |
 | Token savings | Yes (capsule DSL compression) | No |

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/README.md

@@ -139,6 +139,21 @@ ctxgraph-code context "add pagination to the users endpoint"
 
 Generates a focused context summary: relevant files, their symbols, and dependency/call edges between them. This is the closest equivalent to `ctxgraph`'s capsule format.
 
+### `view`
+
+```bash
+ctxgraph-code view                 # generates interactive D3.js HTML and opens browser
+ctxgraph-code view --no-open       # generate HTML without opening browser
+ctxgraph-code view --tree          # show text tree instead (useful in terminal)
+ctxgraph-code view --output graph.html  # save to custom path
+```
+
+Opens an **interactive D3.js force-directed graph** in the browser. Drag nodes, zoom/pan, search by name, filter by type (File/Class/Function). Hover to highlight connected nodes and see summaries.
+
+The HTML is self-contained (loads D3.js from CDN) and saved to `.ctxgraph/graph.html`.
+
+Use `--tree` for a terminal-friendly text view of the directory hierarchy with symbols and edges.
+
 ### `info`
 
 ```bash
@@ -249,10 +264,10 @@ Built-in default exclusion patterns (always applied): `__pycache__`, `*.pyc`, `.
 
 | Feature | ctxgraph | ctxgraph-code |
 |---------|----------|---------------|
-| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 8 (init, build, query, deps, usedby, overview, symbols, context, setup, info) |
+| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 9 (init, build, query, deps, usedby, overview, symbols, context, setup, view, info) |
 | LLM integration | Built-in (Ollama, Claude, OpenAI, Azure) | None (delegates to Claude Code) |
 | Chat sessions | Yes | No |
-| Visualizer | D3.js HTML + SVG | No |
+| Visualizer | D3.js HTML + SVG | D3.js HTML (`view` opens in browser, `--tree` for text) |
 | Skills system | Yes (customizable skill TOML files) | No |
 | MCP server | Yes | No |
 | Token savings | Yes (capsule DSL compression) | No |

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "ctxgraph-code"
-version = "0.1.1"
+version = "0.1.3"
 description = "Code knowledge graph for Claude Code. Build a relationship graph of your Python codebase and query it during coding sessions."
 readme = "README.md"
 license = {text = "MIT"}

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/src/ctxgraph_code/cli.py

@@ -350,6 +350,58 @@ def setup(
     console.print("Open Claude Code in this project and type [bold]/ctxgraph-code[/bold] to get started.")
 
 
+@app.command()
+def view(
+    repo_path: Optional[str] = typer.Option(
+        None, "--repo", "-r", help="Repository path"
+    ),
+    output: Optional[str] = typer.Option(
+        None, "--output", "-o", help="Save graph HTML to file"
+    ),
+    no_open: bool = typer.Option(
+        False, "--no-open", help="Generate HTML but don't open browser"
+    ),
+    tree: bool = typer.Option(
+        False, "--tree", help="Show text tree instead of interactive graph"
+    ),
+):
+    """Open an interactive D3.js graph in the browser."""
+    path = Path(repo_path).resolve() if repo_path else Path.cwd()
+
+    storage = get_storage(path)
+    if storage is None:
+        console.print("[red]No graph found. Run [bold]ctxgraph-code build[/bold] first.[/red]")
+        raise typer.Exit(1)
+
+    if tree:
+        from ctxgraph_code.render import render_treeview
+        text = render_treeview(storage)
+        if output:
+            out_path = Path(output)
+            out_path.write_text(text, encoding="utf-8")
+            console.print(f"Saved tree to [bold]{out_path}[/bold]")
+        else:
+            console.print(text)
+        return
+
+    from ctxgraph_code.view.visualizer import render_view
+    html = render_view(storage)
+
+    graph_dir = path / ".ctxgraph"
+    graph_dir.mkdir(parents=True, exist_ok=True)
+    out_path = Path(output) if output else (graph_dir / "graph.html")
+    out_path.write_text(html, encoding="utf-8")
+
+    console.print(f"Graph saved to [bold]{out_path}[/bold]")
+
+    if not no_open:
+        import webbrowser
+        webbrowser.open(str(out_path.resolve()))
+        console.print("[green]Opened in browser.[/green]")
+    else:
+        console.print(f"Open {out_path} in a browser to view.")
+
+
 @app.command()
 def info(
     repo_path: Optional[str] = typer.Option(
@@ -395,7 +447,7 @@ def version():
     try:
         ver = _v("ctxgraph-code")
     except Exception:
-        ver = "0.1.0"
+        ver = "0.1.3"
     console.print(f"ctxgraph-code version [bold]{ver}[/bold]")
 
 

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/src/ctxgraph_code/render.py

@@ -235,6 +235,107 @@ def render_context(storage: Storage, query: str, max_nodes: int = 15) -> str:
     return "\n".join(lines)
 
 
+def render_treeview(storage: Storage) -> str:
+    all_nodes = storage.get_all_nodes()
+    all_edges = storage.get_all_edges()
+
+    file_nodes = sorted([n for n in all_nodes if n.type == "file"], key=lambda n: n.path or "")
+    symbol_map: dict[str, list[Node]] = {}
+    for n in all_nodes:
+        if n.type != "file":
+            symbol_map.setdefault(n.parent_id or "", []).append(n)
+
+    dir_tree: dict[str, dict] = {}
+    for node in file_nodes:
+        parts = (node.path or node.name).split("/")
+        for i in range(len(parts)):
+            parent = "/".join(parts[:i]) if i > 0 else "."
+            child = parts[i]
+            if parent not in dir_tree:
+                dir_tree[parent] = {"dirs": set(), "files": []}
+            if i == len(parts) - 1:
+                dir_tree[parent]["files"].append(node)
+            else:
+                dir_tree[parent]["dirs"].add(child)
+
+    stats = storage.stats()
+    bt = storage.get_metadata("build_time")
+    build_label = ""
+    if bt:
+        try:
+            from datetime import datetime
+            build_label = f" (built {datetime.fromtimestamp(float(bt)).strftime('%Y-%m-%d %H:%M')})"
+        except Exception:
+            pass
+
+    lines = [
+        f".ctxgraph/graph.db  ({stats['nodes']} nodes, {stats['edges']} edges){build_label}",
+        "",
+    ]
+
+    def _render_dir(parent: str, prefix: str = ""):
+        entry = dir_tree.get(parent, {"dirs": set(), "files": []})
+        items: list[tuple[str, object]] = []
+        for d in sorted(entry["dirs"]):
+            items.append(("dir", d))
+        for f in sorted(entry["files"], key=lambda x: x.path or x.name):
+            items.append(("file", f))
+
+        for idx, (kind, obj) in enumerate(items):
+            last = idx == len(items) - 1
+            connector = "\\-- " if last else "+-- "
+            ext = "    " if last else "|   "
+
+            if kind == "dir":
+                name = str(obj)
+                lines.append(f"{prefix}{connector}{name}/")
+                child = name if parent == "." else parent + "/" + name
+                _render_dir(child, prefix + ext)
+            else:
+                node = obj
+                basename = (node.path or node.name).split("/")[-1]
+                lines.append(f"{prefix}{connector}{basename}")
+                symbols = sorted(symbol_map.get(node.id, []), key=lambda s: s.lineno)
+                if symbols:
+                    sym_lines = []
+                    for s in symbols:
+                        tag = "C" if s.type == "class" else "M"
+                        summary = f" -- {s.summary}" if s.summary else ""
+                        sym_lines.append(f"    [{tag}] {s.name}{summary}")
+                    for sidx, sl in enumerate(sym_lines):
+                        slast = sidx == len(sym_lines) - 1
+                        sconn = "\\-- " if slast else "+-- "
+                        lines.append(f"{prefix}{ext}{sconn}{sl}")
+
+    _render_dir(".")
+    lines.append("")
+
+    import_edges = [(s, t) for e in all_edges for s, t, r in [(e.source_id, e.target_id, e.relation)] if r == "imports"]
+    call_edges = [(s, t) for e in all_edges for s, t, r in [(e.source_id, e.target_id, e.relation)] if r == "calls"]
+
+    if import_edges:
+        lines.append(f"Imports ({len(import_edges)}):")
+        node_map = {n.id: n for n in all_nodes}
+        for src, tgt in sorted(import_edges, key=lambda x: (x[0], x[1]))[:20]:
+            sn = _short_name(src, node_map) or src
+            tn = _short_name(tgt, node_map) or tgt
+            lines.append(f"  {sn}  ->  {tn}")
+        if len(import_edges) > 20:
+            lines.append(f"  ... and {len(import_edges) - 20} more")
+
+    if call_edges:
+        lines.append(f"\nCalls ({len(call_edges)}):")
+        node_map = {n.id: n for n in all_nodes}
+        for src, tgt in sorted(call_edges, key=lambda x: (x[0], x[1]))[:15]:
+            sn = _short_name(src, node_map) or src
+            tn = _short_name(tgt, node_map) or tgt
+            lines.append(f"  {sn}  ->  {tn}")
+        if len(call_edges) > 15:
+            lines.append(f"  ... and {len(call_edges) - 15} more")
+
+    return "\n".join(lines)
+
+
 def _short_name(node_id: str, node_map: dict[str, Node]) -> Optional[str]:
     if node_id in node_map:
         n = node_map[node_id]

ctxgraph_code-0.1.3/src/ctxgraph_code/view/visualizer.py

@@ -0,0 +1,288 @@
+from __future__ import annotations
+
+import json
+
+from ctxgraph_code.graph.storage import Storage
+
+
+def render_view(storage: Storage) -> str:
+    nodes = storage.get_all_nodes()
+    edges = storage.get_all_edges()
+
+    file_nodes = [n for n in nodes if n.type == "file"]
+    symbol_nodes = [n for n in nodes if n.type != "file"]
+
+    graph_data: dict = {
+        "nodes": [],
+        "links": [],
+    }
+
+    file_node_ids = {n.id for n in file_nodes}
+
+    for node in file_nodes:
+        graph_data["nodes"].append(
+            {
+                "id": node.id,
+                "label": _short_path(node.path or node.name),
+                "type": "file",
+                "summary": (node.summary or "")[:100],
+                "importance": node.importance,
+            }
+        )
+
+    for node in symbol_nodes:
+        graph_data["nodes"].append(
+            {
+                "id": node.id,
+                "label": node.name,
+                "type": node.type,
+                "summary": (node.summary or "")[:100],
+                "importance": node.importance,
+            }
+        )
+
+    seen_links = set()
+    for edge in edges:
+        if edge.source_id in file_node_ids or edge.target_id in file_node_ids:
+            key = (edge.source_id, edge.target_id)
+            if key not in seen_links:
+                seen_links.add(key)
+                graph_data["links"].append(
+                    {
+                        "source": edge.source_id,
+                        "target": edge.target_id,
+                        "relation": edge.relation,
+                    }
+                )
+
+    json_data = json.dumps(graph_data, indent=2)
+    template = _get_html_template()
+    return template.replace("/* GRAPH_DATA */", json_data)
+
+
+def _short_path(path: str) -> str:
+    parts = path.split("/")
+    if len(parts) > 3:
+        return "/".join(parts[:2] + ["..."] + parts[-1:])
+    return path
+
+
+def _get_html_template() -> str:
+    return """<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>ctxgraph-code - Knowledge Graph</title>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0d1117; color: #c9d1d9; overflow: hidden; }
+#container { width: 100vw; height: 100vh; position: relative; }
+svg { width: 100%; height: 100%; }
+#toolbar { position: absolute; top: 16px; left: 16px; z-index: 10; display: flex; gap: 8px; align-items: center; background: #161b22; padding: 12px 16px; border-radius: 8px; border: 1px solid #30363d; }
+#toolbar input { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 6px 12px; border-radius: 4px; width: 220px; font-size: 13px; }
+#toolbar select { background: #0d1117; border: 1px solid #30363d; color: #c9d1d9; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
+#toolbar label { font-size: 13px; color: #8b949e; }
+#legend { position: absolute; bottom: 16px; left: 16px; z-index: 10; background: #161b22; padding: 12px; border-radius: 8px; border: 1px solid #30363d; font-size: 12px; display: flex; gap: 16px; }
+.legend-item { display: flex; align-items: center; gap: 6px; }
+.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
+#tooltip { position: absolute; z-index: 20; background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 12px; font-size: 13px; max-width: 400px; pointer-events: none; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
+#tooltip .tt-name { font-weight: 600; color: #58a6ff; margin-bottom: 4px; }
+#tooltip .tt-type { color: #8b949e; font-size: 11px; margin-bottom: 4px; }
+#tooltip .tt-summary { color: #c9d1d9; font-size: 12px; }
+#stats { position: absolute; bottom: 16px; right: 16px; z-index: 10; background: #161b22; padding: 8px 12px; border-radius: 8px; border: 1px solid #30363d; font-size: 11px; color: #8b949e; }
+.link { stroke-opacity: 0.4; }
+.link.imports { stroke: #58a6ff; }
+.link.calls { stroke: #3fb950; }
+.link.defines { stroke: #d29922; }
+.link.extends { stroke: #bc8cff; }
+.node { cursor: pointer; transition: opacity 0.2s; }
+.node:hover { opacity: 0.8; }
+.node-label { font-size: 11px; fill: #8b949e; pointer-events: none; text-shadow: 0 1px 2px #0d1117, 0 -1px 2px #0d1117, 1px 0 2px #0d1117, -1px 0 2px #0d1117; }
+.node.highlighted .node-label { fill: #c9d1d9; font-weight: 600; }
+.link.highlighted { stroke-opacity: 0.8; }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="toolbar">
+    <label>Search:</label>
+    <input type="text" id="search" placeholder="Search nodes..." oninput="filterGraph(this.value)">
+    <label>Filter:</label>
+    <select id="filterType" onchange="filterByType(this.value)">
+      <option value="all">All</option>
+      <option value="file">Files</option>
+      <option value="class">Classes</option>
+      <option value="function">Functions</option>
+    </select>
+  </div>
+  <div id="legend">
+    <div class="legend-item"><div class="legend-dot" style="background:#58a6ff"></div> File</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#d29922"></div> Class</div>
+    <div class="legend-item"><div class="legend-dot" style="background:#3fb950"></div> Function</div>
+    <div class="legend-item"><svg width="20" height="2"><line x1="0" y1="1" x2="20" y2="1" stroke="#58a6ff" stroke-width="1.5" stroke-dasharray="4,2"/></svg> Import</div>
+    <div class="legend-item"><svg width="20" height="2"><line x1="0" y1="1" x2="20" y2="1" stroke="#3fb950" stroke-width="1.5" stroke-dasharray="2,2"/></svg> Call</div>
+  </div>
+  <div id="stats"></div>
+  <div id="tooltip">
+    <div class="tt-name"></div>
+    <div class="tt-type"></div>
+    <div class="tt-summary"></div>
+  </div>
+<svg width="100%" height="100%"></svg>
+</div>
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+const graphData = /* GRAPH_DATA */;
+const width = window.innerWidth;
+const height = window.innerHeight;
+
+const svg = d3.select("svg");
+svg.attr("width", width).attr("height", height);
+svg.attr("viewBox", `0 0 ${width} ${height}`);
+
+const g = svg.append("g");
+
+const zoom = d3.zoom()
+  .scaleExtent([0.1, 4])
+  .on("zoom", (event) => g.attr("transform", event.transform));
+
+svg.call(zoom);
+
+const colorMap = { file: "#58a6ff", class: "#d29922", function: "#3fb950", module: "#bc8cff" };
+
+const simulation = d3.forceSimulation(graphData.nodes)
+  .force("link", d3.forceLink(graphData.links).id(d => d.id).distance(d => {
+    return d.relation === "imports" ? 100 : 80;
+  }))
+  .force("charge", d3.forceManyBody().strength(-200))
+  .force("center", d3.forceCenter(width / 2, height / 2))
+  .force("collision", d3.forceCollide(20));
+
+const link = g.append("g")
+  .selectAll("line")
+  .data(graphData.links)
+  .join("line")
+  .attr("class", d => `link ${d.relation}`)
+  .attr("stroke-width", 1.5);
+
+const node = g.append("g")
+  .selectAll("g")
+  .data(graphData.nodes)
+  .join("g")
+  .attr("class", "node")
+  .call(d3.drag()
+    .on("start", (event, d) => {
+      if (!event.active) simulation.alphaTarget(0.3).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    })
+    .on("drag", (event, d) => {
+      d.fx = event.x;
+      d.fy = event.y;
+    })
+    .on("end", (event, d) => {
+      if (!event.active) simulation.alphaTarget(0);
+      d.fx = null;
+      d.fy = null;
+    })
+  );
+
+node.append("circle")
+  .attr("r", d => 5 + (d.importance || 0.5) * 8)
+  .attr("fill", d => colorMap[d.type] || "#8b949e")
+  .attr("stroke", "#161b22")
+  .attr("stroke-width", 1.5);
+
+node.append("text")
+  .attr("class", "node-label")
+  .text(d => d.label)
+  .attr("dx", d => 10 + (d.importance || 0.5) * 5)
+  .attr("dy", 4);
+
+node.on("mouseover", function(event, d) {
+  const tt = d3.select("#tooltip");
+  tt.style("display", "block");
+  tt.select(".tt-name").text(d.label);
+  tt.select(".tt-type").text(`Type: ${d.type}`);
+  tt.select(".tt-summary").text(d.summary || "");
+
+  const connected = new Set();
+  graphData.links.forEach(l => {
+    const sid = typeof l.source === 'object' ? l.source.id : l.source;
+    const tid = typeof l.target === 'object' ? l.target.id : l.target;
+    if (sid === d.id) connected.add(tid);
+    if (tid === d.id) connected.add(sid);
+  });
+
+  d3.selectAll(".node").each(function(n) {
+    if (n.id === d.id || connected.has(n.id)) {
+      d3.select(this).classed("highlighted", true);
+      d3.select(this).select("circle").attr("opacity", 1);
+      d3.select(this).select("text").attr("opacity", 1);
+    } else {
+      d3.select(this).select("circle").attr("opacity", 0.15);
+      d3.select(this).select("text").attr("opacity", 0.15);
+    }
+  });
+
+  d3.selectAll(".link").each(function(l) {
+    const sid = typeof l.source === 'object' ? l.source.id : l.source;
+    const tid = typeof l.target === 'object' ? l.target.id : l.target;
+    if (sid === d.id || tid === d.id) {
+      d3.select(this).classed("highlighted", true);
+    }
+  });
+})
+.on("mousemove", function(event) {
+  d3.select("#tooltip")
+    .style("left", (event.pageX + 12) + "px")
+    .style("top", (event.pageY - 10) + "px");
+})
+.on("mouseout", function() {
+  d3.select("#tooltip").style("display", "none");
+  d3.selectAll(".node").each(function(n) {
+    d3.select(this).classed("highlighted", false);
+    d3.select(this).select("circle").attr("opacity", 1);
+    d3.select(this).select("text").attr("opacity", 1);
+  });
+  d3.selectAll(".link").classed("highlighted", false);
+});
+
+simulation.on("tick", () => {
+  link
+    .attr("x1", d => d.source.x)
+    .attr("y1", d => d.source.y)
+    .attr("x2", d => d.target.x)
+    .attr("y2", d => d.target.y);
+  node.attr("transform", d => `translate(${d.x},${d.y})`);
+});
+
+d3.select("#stats").text(`Nodes: ${graphData.nodes.length} | Edges: ${graphData.links.length}`);
+
+window.filterGraph = function(query) {
+  const q = query.toLowerCase();
+  d3.selectAll(".node").each(function(d) {
+    const match = !q || d.label.toLowerCase().includes(q) || (d.summary && d.summary.toLowerCase().includes(q));
+    d3.select(this).style("display", match ? null : "none");
+  });
+};
+
+window.filterByType = function(type) {
+  d3.selectAll(".node").each(function(d) {
+    const match = type === "all" || d.type === type;
+    d3.select(this).style("display", match ? null : "none");
+  });
+};
+
+window.addEventListener("resize", () => {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  svg.attr("width", w).attr("height", h);
+  svg.attr("viewBox", `0 0 ${w} ${h}`);
+});
+});
+</script>
+</body>
+</html>"""

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/src/ctxgraph_code.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: ctxgraph-code
-Version: 0.1.1
+Version: 0.1.3
 Summary: Code knowledge graph for Claude Code. Build a relationship graph of your Python codebase and query it during coding sessions.
 Author: ctxgraph-code contributors
 License: MIT
@@ -162,6 +162,21 @@ ctxgraph-code context "add pagination to the users endpoint"
 
 Generates a focused context summary: relevant files, their symbols, and dependency/call edges between them. This is the closest equivalent to `ctxgraph`'s capsule format.
 
+### `view`
+
+```bash
+ctxgraph-code view                 # generates interactive D3.js HTML and opens browser
+ctxgraph-code view --no-open       # generate HTML without opening browser
+ctxgraph-code view --tree          # show text tree instead (useful in terminal)
+ctxgraph-code view --output graph.html  # save to custom path
+```
+
+Opens an **interactive D3.js force-directed graph** in the browser. Drag nodes, zoom/pan, search by name, filter by type (File/Class/Function). Hover to highlight connected nodes and see summaries.
+
+The HTML is self-contained (loads D3.js from CDN) and saved to `.ctxgraph/graph.html`.
+
+Use `--tree` for a terminal-friendly text view of the directory hierarchy with symbols and edges.
+
 ### `info`
 
 ```bash
@@ -272,10 +287,10 @@ Built-in default exclusion patterns (always applied): `__pycache__`, `*.pyc`, `.
 
 | Feature | ctxgraph | ctxgraph-code |
 |---------|----------|---------------|
-| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 8 (init, build, query, deps, usedby, overview, symbols, context, setup, info) |
+| CLI commands | 9 (build, capsule, query, view, serve, info, init, ask, chat, history, skill) | 9 (init, build, query, deps, usedby, overview, symbols, context, setup, view, info) |
 | LLM integration | Built-in (Ollama, Claude, OpenAI, Azure) | None (delegates to Claude Code) |
 | Chat sessions | Yes | No |
-| Visualizer | D3.js HTML + SVG | No |
+| Visualizer | D3.js HTML + SVG | D3.js HTML (`view` opens in browser, `--tree` for text) |
 | Skills system | Yes (customizable skill TOML files) | No |
 | MCP server | Yes | No |
 | Token savings | Yes (capsule DSL compression) | No |

{ctxgraph_code-0.1.1 → ctxgraph_code-0.1.3}/src/ctxgraph_code.egg-info/SOURCES.txt

@@ -24,4 +24,6 @@ src/ctxgraph_code/graph/__init__.py
 src/ctxgraph_code/graph/builder.py
 src/ctxgraph_code/graph/models.py
 src/ctxgraph_code/graph/query.py
-src/ctxgraph_code/graph/storage.py
+src/ctxgraph_code/graph/storage.py
+src/ctxgraph_code/view/__init__.py
+src/ctxgraph_code/view/visualizer.py