DEV Community

Cover image for Building Tracewood: Multi-Select Project Filtering, MCP Server Integration & Supply Chain Blast Radius Graph Engine
Harish Kotra (he/him)
Harish Kotra (he/him)

Posted on

Building Tracewood: Multi-Select Project Filtering, MCP Server Integration & Supply Chain Blast Radius Graph Engine

#ai #programming #hydradb #dailybuild2026

Day 226 Update on Tracewood: Taking developer observability from flat dashboards to a queryable 3D graph context engine with HydraDB.

Yesterday, we introduced Tracewood—a local-first application that transforms multi-agent developer telemetry into a living, procedural 3D forest.

Today, we expanded Tracewood’s graph engine and user controls to turn it into a comprehensive graph-native developer observability platform. Here is a breakdown of what we built today and how it works under the hood.

1. Multi-Select Project Scene Filtering

As your workspace grows to dozens of repositories, rendering every tree simultaneously can obscure focused exploration. Today, we added Multi-Select Scene Filtering.

How It Works Under the Hood

We introduced selectedProjectIds into our global Zustand state (src/store/forestStore.ts). When a developer toggles projects via the new ProjectSelectorModal, the 3D phyllotaxis (golden angle spiral) layout dynamically recalculates position vectors [x, 0, z] only for visibleProjects:

const visibleProjects = useMemo(() => {
  return projects.filter(p => selectedProjectIds.includes(p.id));
}, [projects, selectedProjectIds]);

// Recalculate 3D camera radius & phyllotaxis spiral dynamically
const projectPositions = useMemo(() => {
  const positions: Record<string, [number, number, number]> = {};
  const goldenAngle = 137.5 * (Math.PI / 180);
  const spacing = 3.6;

  visibleProjects.forEach((p, idx) => {
    const r = Math.sqrt(idx + 1) * spacing;
    const theta = idx * goldenAngle;
    positions[p.id] = [Math.cos(theta) * r, 0, Math.sin(theta) * r];
  });
  return positions;
}, [visibleProjects]);
Enter fullscreen mode Exit fullscreen mode

2. Robust Agent Harness Detection & Permissioning

Rather than blindly parsing local file paths, Tracewood now features a dedicated detection engine (src/ingestion/detector.ts) that inspects machine directories for 10 distinct agent families:

  • Claude Code CLI (~/.claude)
  • Cursor IDE (workspaceStorage)
  • GitHub Copilot (~/.copilot)
  • Windsurf / Codeium (~/.codeium)
  • Cline & Roo Code (globalStorage/saoudrizwan.claude-dev)
  • Aider CLI, Continue.dev, Gemini / Antigravity, and Pi / CommandCode / Factory

During onboarding, developers see a clean detection panel where they can explicitly review and grant permission per agent harness before telemetry ingestion begins.

3. Model Context Protocol (MCP) Integration

Developer context should flow both ways: Tracewood shouldn't just visualize agent telemetry; agents should be able to query Tracewood's memory while you code.

We added an official MCP Server (src/mcp/server.ts) operating over stdio JSON-RPC 2.0. IDE assistants like Cursor and Claude Code can now invoke tools directly:

  • tracewood_query_memory: Search cross-repository session solutions, summaries, and intent.
  • tracewood_get_project_context: Retrieve full architectural topic history for a repository.
  • tracewood_find_decision_history: Inspect when previous design constraints were overwritten.
  • tracewood_get_dependency_blast_radius: Perform reverse dependency checks prior to adding npm/PyPI packages.

4. Reverse Transitive Dependency Closures & Typosquat Detection in HydraDB

Supply chain attacks are a growing threat in modern software engineering. In HydraDB (src/database/hydra.ts), we added graph-native reverse transitive closures and Levenshtein distance typosquat checks:

// Transitive Reverse Dependency Closure
public getDependencyBlastRadius(packageName: string): BlastRadiusResult {
  const cleanPkg = packageName.toLowerCase();
  const affectedProjectIds: string[] = [];

  for (const edge of this.edges.values()) {
    if (edge.type === 'DEPENDS_ON') {
      const targetNode = this.nodes.get(edge.target);
      if (targetNode?.label?.toLowerCase() === cleanPkg) {
        const sourceProj = this.nodes.get(edge.source);
        if (sourceProj && !affectedProjectIds.includes(sourceProj.id)) {
          affectedProjectIds.push(sourceProj.id);
        }
      }
    }
  }
  return { packageName, affectedProjectIds, blastPercentage };
}
Enter fullscreen mode Exit fullscreen mode

In the 3D canvas, triggering a simulation fires a bioluminescent shockwave particle pulse originating from affected trees across your forest!

5. Live HydraDB Graph Traversal Explorer

Finally, we shipped the Graph Traversal Explorer Modal (src/components/GraphExplorerModal.tsx), giving developers a query console to filter nodes (Project, Topic, Session, DecisionNode, Package) and directional edges (CONTAINS, DEPENDS_ON, OVERWROTE) in real time.

What's Next

With local multi-agent discovery, interactive 3D WebGL rendering, MCP tools, and graph-native supply chain analysis powered by HydraDB, Tracewood offers a peek into the future of developer observability.

Code & more: https://www.dailybuild.xyz/project/226-tracewood

Top comments (0)