Move Dashboard and Teams from navbar to user dropdown menu

Cleaner navbar with just Projects and Docs links.
Dashboard and Teams are now in the user menu dropdown.

backend/app/dependencies.py

@@ -698,6 +698,8 @@ def resolve_dependencies(
     # Track visiting/visited for cycle detection
     visiting: Set[str] = set()
     visited: Set[str] = set()
+    # Track the current path for cycle reporting (artifact_id -> pkg_key)
+    current_path: Dict[str, str] = {}
     # Resolution order (topological)
     resolution_order: List[str] = []
 
@@ -719,8 +721,10 @@ def resolve_dependencies(
 
         # Cycle detection (at artifact level)
         if artifact_id in visiting:
-            # Build cycle path
+            # Build cycle path from current_path
-            raise CircularDependencyError([pkg_key, pkg_key])
+            cycle_start = current_path.get(artifact_id, pkg_key)
+            cycle = [cycle_start, pkg_key]
+            raise CircularDependencyError(cycle)
 
         # Conflict detection - check if we've seen this package before with a different version
         if pkg_key in version_requirements:
@@ -751,6 +755,7 @@ def resolve_dependencies(
             return
 
         visiting.add(artifact_id)
+        current_path[artifact_id] = pkg_key
 
         # Track version requirement
         if pkg_key not in version_requirements:
@@ -791,6 +796,11 @@ def resolve_dependencies(
                 continue
 
             dep_artifact_id, dep_version, dep_size = resolved_dep
+
+            # Skip if resolved to same artifact (self-dependency at artifact level)
+            if dep_artifact_id == artifact_id:
+                continue
+
             _resolve_recursive(
                 dep_artifact_id,
                 dep.dependency_project,
@@ -802,6 +812,7 @@ def resolve_dependencies(
             )
 
         visiting.remove(artifact_id)
+        del current_path[artifact_id]
         visited.add(artifact_id)
 
         # Add to resolution order (dependencies before dependents)

frontend/package-lock.json

@@ -8,9 +8,12 @@
       "name": "orchard-frontend",
       "version": "1.0.0",
       "dependencies": {
+        "@types/dagre": "^0.7.53",
+        "dagre": "^0.8.5",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "6.28.0"
+        "react-router-dom": "6.28.0",
+        "reactflow": "^11.11.4"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.4.2",
@@ -943,6 +946,102 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@reactflow/background": {
+      "version": "11.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
+      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
+      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
+      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.7.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
+      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
+      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
+      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
@@ -1437,6 +1536,233 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw=="
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw=="
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA=="
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA=="
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/dagre": {
+      "version": "0.7.53",
+      "resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.53.tgz",
+      "integrity": "sha512-f4gkWqzPZvYmKhOsDnhq/R8mO4UMcKdxZo+i5SCkOU1wvGeHJeUXGIHeE9pnwGyPMDof1Vx5ZQo4nxpeg2TTVQ=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1444,18 +1770,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.15",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
       "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.27",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -1963,6 +2294,11 @@
         "node": "*"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2063,9 +2399,114 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -2592,6 +3033,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -3197,6 +3646,11 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -3786,6 +4240,23 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/reactflow": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
+      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
+      "dependencies": {
+        "@reactflow/background": "11.3.14",
+        "@reactflow/controls": "11.2.14",
+        "@reactflow/core": "11.11.4",
+        "@reactflow/minimap": "11.7.14",
+        "@reactflow/node-resizer": "2.2.14",
+        "@reactflow/node-toolbar": "1.3.14"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -4344,6 +4815,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -4712,6 +5191,33 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

frontend/package.json

@@ -12,9 +12,12 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@types/dagre": "^0.7.53",
+    "dagre": "^0.8.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "6.28.0"
+    "react-router-dom": "6.28.0",
+    "reactflow": "^11.11.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",

frontend/src/components/DependencyGraph.css

@@ -76,171 +76,115 @@
   color: var(--text-primary);
 }
 
-.dependency-graph-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--border-primary);
-  background: var(--bg-secondary);
-}
-
-.zoom-level {
-  margin-left: auto;
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  font-family: 'JetBrains Mono', monospace;
-}
-
 .dependency-graph-container {
   flex: 1;
   overflow: hidden;
   position: relative;
-  background:
+  background: var(--bg-primary);
-    linear-gradient(90deg, var(--border-primary) 1px, transparent 1px),
-    linear-gradient(var(--border-primary) 1px, transparent 1px);
-  background-size: 20px 20px;
-  background-position: center center;
 }
 
-.graph-canvas {
+/* React Flow Customization */
-  padding: 40px;
+.react-flow__background {
-  min-width: 100%;
+  background-color: var(--bg-primary) !important;
-  min-height: 100%;
-  transform-origin: center center;
-  transition: transform 0.1s ease-out;
 }
 
-/* Graph Nodes */
+.react-flow__controls {
-.graph-node-container {
+  background: var(--bg-tertiary);
-  display: flex;
+  border: 1px solid var(--border-primary);
-  flex-direction: column;
+  border-radius: var(--radius-md);
-  align-items: flex-start;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
-.graph-node {
+.react-flow__controls-button {
+  background: var(--bg-tertiary);
+  border: none;
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+  width: 28px;
+  height: 28px;
+}
+
+.react-flow__controls-button:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.react-flow__controls-button:last-child {
+  border-bottom: none;
+}
+
+.react-flow__controls-button svg {
+  fill: currentColor;
+}
+
+.react-flow__attribution {
+  background: transparent !important;
+}
+
+.react-flow__attribution a {
+  color: var(--text-muted) !important;
+  font-size: 10px;
+}
+
+/* Custom Flow Nodes */
+.flow-node {
   background: var(--bg-tertiary);
   border: 2px solid var(--border-primary);
   border-radius: var(--radius-md);
   padding: 12px 16px;
-  min-width: 200px;
+  min-width: 160px;
   cursor: pointer;
   transition: all var(--transition-fast);
-  position: relative;
+  text-align: center;
 }
 
-.graph-node:hover {
+.flow-node:hover {
   border-color: var(--accent-primary);
   box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
 }
 
-.graph-node--root {
+.flow-node--root {
   background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
   border-color: var(--accent-primary);
 }
 
-.graph-node--hovered {
+.flow-node__name {
-  transform: scale(1.02);
-}
-
-.graph-node__header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.graph-node__name {
   font-weight: 600;
   color: var(--accent-primary);
   font-family: 'JetBrains Mono', monospace;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
+  margin-bottom: 4px;
+  word-break: break-word;
 }
 
-.graph-node__toggle {
+.flow-node__details {
-  background: var(--bg-hover);
-  border: 1px solid var(--border-primary);
-  border-radius: 4px;
-  width: 20px;
-  height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
+  gap: 8px;
-  font-size: 0.875rem;
+  font-size: 0.6875rem;
-  color: var(--text-secondary);
-  font-weight: 600;
-  margin-left: auto;
-}
-
-.graph-node__toggle:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.graph-node__details {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 0.75rem;
   color: var(--text-muted);
 }
 
-.graph-node__version {
+.flow-node__version {
   font-family: 'JetBrains Mono', monospace;
   color: var(--text-secondary);
 }
 
-.graph-node__size {
+.flow-node__size {
   color: var(--text-muted);
 }
 
-/* Graph Children / Tree Structure */
+/* Flow Handles (connection points) */
-.graph-children {
+.flow-handle {
-  display: flex;
+  width: 8px !important;
-  padding-left: 24px;
+  height: 8px !important;
-  margin-top: 8px;
+  background: var(--border-primary) !important;
-  position: relative;
+  border: 2px solid var(--bg-tertiary) !important;
 }
 
-.graph-connector {
+.flow-node:hover .flow-handle {
-  position: absolute;
+  background: var(--accent-primary) !important;
-  left: 12px;
-  top: 0;
-  bottom: 50%;
-  width: 12px;
-  border-left: 2px solid var(--border-primary);
-  border-bottom: 2px solid var(--border-primary);
-  border-bottom-left-radius: 8px;
-}
-
-.graph-children-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  position: relative;
-}
-
-.graph-children-list::before {
-  content: '';
-  position: absolute;
-  left: -12px;
-  top: 20px;
-  bottom: 20px;
-  border-left: 2px solid var(--border-primary);
-}
-
-.graph-children-list > .graph-node-container {
-  position: relative;
-}
-
-.graph-children-list > .graph-node-container::before {
-  content: '';
-  position: absolute;
-  left: -12px;
-  top: 20px;
-  width: 12px;
-  border-top: 2px solid var(--border-primary);
 }
 
 /* Loading, Error, Empty States */
@@ -283,41 +227,6 @@
   line-height: 1.5;
 }
 
-/* Tooltip */
-.graph-tooltip {
-  position: fixed;
-  bottom: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--bg-tertiary);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-md);
-  padding: 12px 16px;
-  font-size: 0.8125rem;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-  z-index: 1001;
-}
-
-.graph-tooltip strong {
-  display: block;
-  color: var(--accent-primary);
-  font-family: 'JetBrains Mono', monospace;
-  margin-bottom: 4px;
-}
-
-.graph-tooltip div {
-  color: var(--text-secondary);
-  margin-top: 2px;
-}
-
-.tooltip-hint {
-  margin-top: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border-primary);
-  color: var(--text-muted);
-  font-size: 0.75rem;
-}
-
 /* Missing Dependencies */
 .missing-dependencies {
   border-top: 1px solid var(--border-primary);

frontend/src/components/DependencyGraph.tsx

@@ -1,5 +1,19 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
+import ReactFlow, {
+  Node,
+  Edge,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  MarkerType,
+  NodeProps,
+  Handle,
+  Position,
+} from 'reactflow';
+import dagre from 'dagre';
+import 'reactflow/dist/style.css';
 import { ResolvedArtifact, DependencyResolutionResponse, Dependency } from '../types';
 import { resolveDependencies, getArtifactDependencies } from '../api';
 import './DependencyGraph.css';
@@ -11,15 +25,14 @@ interface DependencyGraphProps {
   onClose: () => void;
 }
 
-interface GraphNode {
+interface NodeData {
-  id: string;
+  label: string;
   project: string;
   package: string;
   version: string | null;
   size: number;
-  depth: number;
+  isRoot: boolean;
-  children: GraphNode[];
+  onNavigate: (project: string, pkg: string) => void;
-  isRoot?: boolean;
 }
 
 function formatBytes(bytes: number): string {
@@ -30,29 +43,89 @@ function formatBytes(bytes: number): string {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
 }
 
+// Custom node component
+function DependencyNode({ data }: NodeProps<NodeData>) {
+  return (
+    <div
+      className={`flow-node ${data.isRoot ? 'flow-node--root' : ''}`}
+      onClick={() => data.onNavigate(data.project, data.package)}
+    >
+      <Handle type="target" position={Position.Top} className="flow-handle" />
+      <div className="flow-node__name">{data.package}</div>
+      <div className="flow-node__details">
+        {data.version && <span className="flow-node__version">{data.version}</span>}
+        <span className="flow-node__size">{formatBytes(data.size)}</span>
+      </div>
+      <Handle type="source" position={Position.Bottom} className="flow-handle" />
+    </div>
+  );
+}
+
+const nodeTypes = { dependency: DependencyNode };
+
+// Dagre layout function
+function getLayoutedElements(
+  nodes: Node<NodeData>[],
+  edges: Edge[],
+  direction: 'TB' | 'LR' = 'TB'
+) {
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const nodeWidth = 180;
+  const nodeHeight = 60;
+
+  dagreGraph.setGraph({ rankdir: direction, nodesep: 50, ranksep: 80 });
+
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      },
+    };
+  });
+
+  return { nodes: layoutedNodes, edges };
+}
+
 function DependencyGraph({ projectName, packageName, tagName, onClose }: DependencyGraphProps) {
   const navigate = useNavigate();
-  const containerRef = useRef<HTMLDivElement>(null);
 
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [resolution, setResolution] = useState<DependencyResolutionResponse | null>(null);
-  const [graphRoot, setGraphRoot] = useState<GraphNode | null>(null);
+  const [nodes, setNodes, onNodesChange] = useNodesState<NodeData>([]);
-  const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const [zoom, setZoom] = useState(1);
+
-  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const handleNavigate = useCallback((project: string, pkg: string) => {
-  const [isDragging, setIsDragging] = useState(false);
+    navigate(`/project/${project}/${pkg}`);
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    onClose();
-  const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set());
+  }, [navigate, onClose]);
 
   // Build graph structure from resolution data
-  const buildGraph = useCallback(async (resolutionData: DependencyResolutionResponse) => {
+  const buildFlowGraph = useCallback(async (
+    resolutionData: DependencyResolutionResponse,
+    onNavigate: (project: string, pkg: string) => void
+  ) => {
     const artifactMap = new Map<string, ResolvedArtifact>();
     resolutionData.resolved.forEach(artifact => {
       artifactMap.set(artifact.artifact_id, artifact);
     });
 
-    // Fetch dependencies for each artifact to build the tree
+    // Fetch dependencies for each artifact
     const depsMap = new Map<string, Dependency[]>();
 
     for (const artifact of resolutionData.resolved) {
@@ -64,50 +137,82 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
       }
     }
 
-    // Find the root artifact (the requested one)
+    // Find the root artifact
     const rootArtifact = resolutionData.resolved.find(
       a => a.project === resolutionData.requested.project &&
            a.package === resolutionData.requested.package
     );
 
     if (!rootArtifact) {
-      return null;
+      return { nodes: [], edges: [] };
     }
 
-    // Build tree recursively
+    const flowNodes: Node<NodeData>[] = [];
+    const flowEdges: Edge[] = [];
     const visited = new Set<string>();
+    const nodeIdMap = new Map<string, string>(); // artifact_id -> node id
+
+    // Build nodes and edges recursively
+    const processNode = (artifact: ResolvedArtifact, isRoot: boolean) => {
+      if (visited.has(artifact.artifact_id)) {
+        return nodeIdMap.get(artifact.artifact_id);
+      }
 
-    const buildNode = (artifact: ResolvedArtifact, depth: number): GraphNode => {
-      const nodeId = `${artifact.project}/${artifact.package}`;
       visited.add(artifact.artifact_id);
+      const nodeId = `node-${flowNodes.length}`;
+      nodeIdMap.set(artifact.artifact_id, nodeId);
+
+      flowNodes.push({
+        id: nodeId,
+        type: 'dependency',
+        position: { x: 0, y: 0 }, // Will be set by dagre
+        data: {
+          label: `${artifact.project}/${artifact.package}`,
+          project: artifact.project,
+          package: artifact.package,
+          version: artifact.version || artifact.tag,
+          size: artifact.size,
+          isRoot,
+          onNavigate,
+        },
+      });
 
       const deps = depsMap.get(artifact.artifact_id) || [];
-      const children: GraphNode[] = [];
 
       for (const dep of deps) {
-        // Find the resolved artifact for this dependency
         const childArtifact = resolutionData.resolved.find(
           a => a.project === dep.project && a.package === dep.package
         );
 
-        if (childArtifact && !visited.has(childArtifact.artifact_id)) {
+        if (childArtifact) {
-          children.push(buildNode(childArtifact, depth + 1));
+          const childNodeId = processNode(childArtifact, false);
+          if (childNodeId) {
+            flowEdges.push({
+              id: `edge-${nodeId}-${childNodeId}`,
+              source: nodeId,
+              target: childNodeId,
+              markerEnd: {
+                type: MarkerType.ArrowClosed,
+                width: 15,
+                height: 15,
+                color: 'var(--accent-primary)',
+              },
+              style: {
+                stroke: 'var(--border-primary)',
+                strokeWidth: 2,
+              },
+            });
+          }
         }
       }
 
-      return {
+      return nodeId;
-        id: nodeId,
-        project: artifact.project,
-        package: artifact.package,
-        version: artifact.version || artifact.tag,
-        size: artifact.size,
-        depth,
-        children,
-        isRoot: depth === 0,
-      };
     };
 
-    return buildNode(rootArtifact, 0);
+    processNode(rootArtifact, true);
+
+    // Apply dagre layout
+    return getLayoutedElements(flowNodes, flowEdges);
   }, []);
 
   useEffect(() => {
@@ -117,13 +222,21 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
 
       try {
         const result = await resolveDependencies(projectName, packageName, tagName);
+
+        // If only the root package (no dependencies) and no missing deps, close the modal
+        const hasDeps = result.artifact_count > 1 || (result.missing && result.missing.length > 0);
+        if (!hasDeps) {
+          onClose();
+          return;
+        }
+
         setResolution(result);
 
-        const graph = await buildGraph(result);
+        const { nodes: layoutedNodes, edges: layoutedEdges } = await buildFlowGraph(result, handleNavigate);
-        setGraphRoot(graph);
+        setNodes(layoutedNodes);
+        setEdges(layoutedEdges);
       } catch (err) {
         if (err instanceof Error) {
-          // Check if it's a resolution error
           try {
             const errorData = JSON.parse(err.message);
             if (errorData.error === 'circular_dependency') {
@@ -145,95 +258,9 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
     }
 
     loadData();
-  }, [projectName, packageName, tagName, buildGraph]);
+  }, [projectName, packageName, tagName, buildFlowGraph, handleNavigate, onClose, setNodes, setEdges]);
 
-  const handleNodeClick = (node: GraphNode) => {
+  const defaultViewport = useMemo(() => ({ x: 50, y: 50, zoom: 0.8 }), []);
-    navigate(`/project/${node.project}/${node.package}`);
-    onClose();
-  };
-
-  const handleNodeToggle = (node: GraphNode, e: React.MouseEvent) => {
-    e.stopPropagation();
-    setCollapsedNodes(prev => {
-      const next = new Set(prev);
-      if (next.has(node.id)) {
-        next.delete(node.id);
-      } else {
-        next.add(node.id);
-      }
-      return next;
-    });
-  };
-
-  const handleWheel = (e: React.WheelEvent) => {
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-    setZoom(z => Math.max(0.25, Math.min(2, z + delta)));
-  };
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (e.target === containerRef.current || (e.target as HTMLElement).classList.contains('graph-canvas')) {
-      setIsDragging(true);
-      setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
-    }
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (isDragging) {
-      setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
-    }
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
-  const resetView = () => {
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  };
-
-  const renderNode = (node: GraphNode, index: number = 0): JSX.Element => {
-    const isCollapsed = collapsedNodes.has(node.id);
-    const hasChildren = node.children.length > 0;
-
-    return (
-      <div key={`${node.id}-${index}`} className="graph-node-container">
-        <div
-          className={`graph-node ${node.isRoot ? 'graph-node--root' : ''} ${hoveredNode?.id === node.id ? 'graph-node--hovered' : ''}`}
-          onClick={() => handleNodeClick(node)}
-          onMouseEnter={() => setHoveredNode(node)}
-          onMouseLeave={() => setHoveredNode(null)}
-        >
-          <div className="graph-node__header">
-            <span className="graph-node__name">{node.project}/{node.package}</span>
-            {hasChildren && (
-              <button
-                className="graph-node__toggle"
-                onClick={(e) => handleNodeToggle(node, e)}
-                title={isCollapsed ? 'Expand' : 'Collapse'}
-              >
-                {isCollapsed ? '+' : '-'}
-              </button>
-            )}
-          </div>
-          <div className="graph-node__details">
-            {node.version && <span className="graph-node__version">@ {node.version}</span>}
-            <span className="graph-node__size">{formatBytes(node.size)}</span>
-          </div>
-        </div>
-
-        {hasChildren && !isCollapsed && (
-          <div className="graph-children">
-            <div className="graph-connector"></div>
-            <div className="graph-children-list">
-              {node.children.map((child, i) => renderNode(child, i))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  };
 
   return (
     <div className="dependency-graph-modal" onClick={onClose}>
@@ -260,28 +287,7 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
           </button>
         </div>
 
-        <div className="dependency-graph-toolbar">
+        <div className="dependency-graph-container">
-          <button className="btn btn-secondary btn-small" onClick={() => setZoom(z => Math.min(2, z + 0.25))}>
-            Zoom In
-          </button>
-          <button className="btn btn-secondary btn-small" onClick={() => setZoom(z => Math.max(0.25, z - 0.25))}>
-            Zoom Out
-          </button>
-          <button className="btn btn-secondary btn-small" onClick={resetView}>
-            Reset View
-          </button>
-          <span className="zoom-level">{Math.round(zoom * 100)}%</span>
-        </div>
-
-        <div
-          ref={containerRef}
-          className="dependency-graph-container"
-          onWheel={handleWheel}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-        >
           {loading ? (
             <div className="graph-loading">
               <div className="spinner"></div>
@@ -296,16 +302,23 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
               </svg>
               <p>{error}</p>
             </div>
-          ) : graphRoot ? (
+          ) : nodes.length > 0 ? (
-            <div
+            <ReactFlow
-              className="graph-canvas"
+              nodes={nodes}
-              style={{
+              edges={edges}
-                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+              onNodesChange={onNodesChange}
-                cursor: isDragging ? 'grabbing' : 'grab',
+              onEdgesChange={onEdgesChange}
-              }}
+              nodeTypes={nodeTypes}
+              defaultViewport={defaultViewport}
+              fitView
+              fitViewOptions={{ padding: 0.2 }}
+              minZoom={0.1}
+              maxZoom={2}
+              attributionPosition="bottom-left"
             >
-              {renderNode(graphRoot)}
+              <Controls />
-            </div>
+              <Background color="var(--border-primary)" gap={20} />
+            </ReactFlow>
           ) : (
             <div className="graph-empty">No dependencies to display</div>
           )}
@@ -326,15 +339,6 @@ function DependencyGraph({ projectName, packageName, tagName, onClose }: Depende
             </ul>
           </div>
         )}
-
-        {hoveredNode && (
-          <div className="graph-tooltip">
-            <strong>{hoveredNode.project}/{hoveredNode.package}</strong>
-            {hoveredNode.version && <div>Version: {hoveredNode.version}</div>}
-            <div>Size: {formatBytes(hoveredNode.size)}</div>
-            <div className="tooltip-hint">Click to navigate</div>
-          </div>
-        )}
       </div>
     </div>
   );

frontend/src/components/Layout.tsx

@@ -84,29 +84,6 @@ function Layout({ children }: LayoutProps) {
               </svg>
               Projects
             </Link>
-            <Link to="/dashboard" className={location.pathname === '/dashboard' ? 'active' : ''}>
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="3" width="7" height="7" rx="1"/>
-                <rect x="14" y="3" width="7" height="7" rx="1"/>
-                <rect x="3" y="14" width="7" height="7" rx="1"/>
-                <rect x="14" y="14" width="7" height="7" rx="1"/>
-              </svg>
-              Dashboard
-            </Link>
-            {user && userTeams.length > 0 && (
-              <Link
-                to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
-                className={location.pathname.startsWith('/teams') ? 'active' : ''}
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-                  <circle cx="9" cy="7" r="4"/>
-                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-                  <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-                </svg>
-                {userTeams.length === 1 ? 'Team' : 'Teams'}
-              </Link>
-            )}
             <a href="/docs" className="nav-link-muted">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -148,6 +125,35 @@ function Layout({ children }: LayoutProps) {
                       )}
                     </div>
                     <div className="user-menu-divider"></div>
+                    <NavLink
+                      to="/dashboard"
+                      className="user-menu-item"
+                      onClick={() => setShowUserMenu(false)}
+                    >
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                        <rect x="3" y="3" width="7" height="7" rx="1"/>
+                        <rect x="14" y="3" width="7" height="7" rx="1"/>
+                        <rect x="3" y="14" width="7" height="7" rx="1"/>
+                        <rect x="14" y="14" width="7" height="7" rx="1"/>
+                      </svg>
+                      Dashboard
+                    </NavLink>
+                    {userTeams.length > 0 && (
+                      <NavLink
+                        to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
+                        className="user-menu-item"
+                        onClick={() => setShowUserMenu(false)}
+                      >
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                          <circle cx="9" cy="7" r="4"/>
+                          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                        </svg>
+                        {userTeams.length === 1 ? 'Team' : 'Teams'}
+                      </NavLink>
+                    )}
+                    <div className="user-menu-divider"></div>
                     <NavLink
                       to="/settings/api-keys"
                       className="user-menu-item"

frontend/src/pages/PackagePage.tsx

@@ -83,7 +83,7 @@ function PackagePage() {
   // Reverse dependencies state
   const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
   const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
-  const [reverseDepsError, setReverseDepsError] = useState<string | null>(null);
+  const [_reverseDepsError, setReverseDepsError] = useState<string | null>(null);
   const [reverseDepsPage, setReverseDepsPage] = useState(1);
   const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
   const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
@@ -690,17 +690,10 @@ function PackagePage() {
         />
       )}
 
-      {/* Used By (Reverse Dependencies) Section */}
+      {/* Used By (Reverse Dependencies) Section - only show if there are reverse deps */}
-      <div className="used-by-section card">
+      {reverseDeps.length > 0 && (
-        <h3>Used By</h3>
+        <div className="used-by-section card">
-
+          <h3>Used By</h3>
-        {reverseDepsLoading ? (
-          <div className="deps-loading">Loading reverse dependencies...</div>
-        ) : reverseDepsError ? (
-          <div className="deps-error">{reverseDepsError}</div>
-        ) : reverseDeps.length === 0 ? (
-          <div className="deps-empty">No packages depend on this package</div>
-        ) : (
           <div className="reverse-deps-list">
             <div className="deps-summary">
               {reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
@@ -743,8 +736,8 @@ function PackagePage() {
               </div>
             )}
           </div>
-        )}
+        </div>
-      </div>
+      )}
 
       <div className="usage-section card">
         <h3>Usage</h3>