feat: Add Graph Traversal visualizer (BFS / DFS)

New /graph route built on React Flow: a hand-positioned starter graph
that users can edit with keyboard controls (N add node, E add edge,
S/F set start/finish, Del delete, drag to move) and run BFS or DFS over.

- Pure planners (bfsActions/dfsActions) return a flat action log; the
  page is a generic executor applying each step with a delay
- Directed/undirected toggle; finish node stops the run and highlights
  the start->finish path
- Floating edges (no handles) with a big mid-edge arrow showing travel
  direction, for both directed and undirected graphs
- Added home card linking to /graph

Author: TamimEhsan

package-lock.json

@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@xyflow/react": "^12.11.0",
     "autoprefixer": "^10.4.20",
     "bootstrap": "^5.3.3",
     "class-variance-authority": "^0.7.1",

package.json

@@ -10,6 +10,11 @@ const algorithms = [
     title: "Pathfinder",
     description: "Visualize graph algorithms like dijkstra, BFS, DFS",
     image: '/AlgorithmVisualizer/images/graph.png?height=200&width=300'
+  },{
+    id: 'graph',
+    title: 'Graph Traversal',
+    description: "Build a graph and watch BFS and DFS explore it node by node",
+    image: '/AlgorithmVisualizer/images/graph-traversal.png?height=200&width=300'
   },
   {
     id: 'recursion-tree',

public/images/graph-traversal.png

@@ -0,0 +1,69 @@
+import { BaseEdge, getStraightPath, useInternalNode } from '@xyflow/react';
+
+// Edge that connects node centers (no handles), trimmed to each node's border.
+// Stroke color encodes the edge state; during traversal a big arrow is drawn at
+// the edge midpoint pointing in the direction of travel.
+
+const R = 22; // node radius (node is 44px)
+
+const STROKE = { tree: '#f59e0b', path: '#10b981', normal: '#64748b' };
+
+function center(node) {
+    const { x, y } = node.internals.positionAbsolute;
+    const w = node.measured?.width ?? 44;
+    const h = node.measured?.height ?? 44;
+    return { x: x + w / 2, y: y + h / 2 };
+}
+
+export default function FloatingEdge({ id, source, target, markerEnd, data }) {
+    const sourceNode = useInternalNode(source);
+    const targetNode = useInternalNode(target);
+    if (!sourceNode || !targetNode) return null;
+
+    const sc = center(sourceNode);
+    const tc = center(targetNode);
+
+    const state = data?.state || 'normal';
+    const travelTo = data?.travelTo;
+
+    // Orient along the travel direction so the midpoint arrow points the way we
+    // move (handles edges stored opposite to the traversal direction).
+    let from = sc;
+    let to = tc;
+    if (travelTo === source) { from = tc; to = sc; }
+
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const ux = dx / len;
+    const uy = dy / len;
+
+    const sx = from.x + ux * R;
+    const sy = from.y + uy * R;
+    const ex = to.x - ux * R;
+    const ey = to.y - uy * R;
+    const [path] = getStraightPath({ sourceX: sx, sourceY: sy, targetX: ex, targetY: ey });
+
+    const stroke = STROKE[state] || STROKE.normal;
+    // Constant width so the directed arrowhead (sized in stroke-width units)
+    // doesn't grow during traversal; state is conveyed by color + the mid arrow.
+    const strokeWidth = 2;
+
+    const showTravelArrow = state === 'tree' || state === 'path';
+    const mx = (sx + ex) / 2;
+    const my = (sy + ey) / 2;
+    const deg = (Math.atan2(uy, ux) * 180) / Math.PI;
+
+    return (
+        <>
+            <BaseEdge id={id} path={path} markerEnd={markerEnd} style={{ stroke, strokeWidth }} />
+            {showTravelArrow && (
+                <path
+                    d="M -7 -6 L 7 0 L -7 6 z"
+                    fill={stroke}
+                    transform={`translate(${mx}, ${my}) rotate(${deg})`}
+                />
+            )}
+        </>
+    );
+}

public/images/graph.png

@@ -0,0 +1,50 @@
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+// Clean circular node. Fill encodes traversal state; an outer ring marks the
+// start/finish role. Hidden handles satisfy React Flow's edge anchoring
+// (edges are floating and created via keyboard, not handle dragging).
+
+const FILL = {
+    normal: ['#0d9488', '#0f766e'],
+    current: ['#f59e0b', '#d97706'],
+    frontier: ['#4f46e5', '#4338ca'],
+    visited: ['#334155', '#475569'],
+    path: ['#10b981', '#059669'],
+};
+
+function GraphNode({ data }) {
+    const [bg, border] = FILL[data.state] || FILL.normal;
+    const ring = data.role === 'start' ? '#10b981' : data.role === 'finish' ? '#f43f5e' : null;
+
+    return (
+        <div
+            style={{
+                position: 'relative',
+                width: 44,
+                height: 44,
+                borderRadius: '50%',
+                background: bg,
+                border: `2px solid ${border}`,
+                color: '#f8fafc',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontWeight: 600,
+                fontSize: 15,
+                boxShadow: ring ? `0 0 0 3px ${ring}` : '0 1px 3px rgba(0,0,0,0.3)',
+            }}
+        >
+            <Handle type="target" position={Position.Top} style={{ opacity: 0 }} isConnectable={false} />
+            {data.label}
+            <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} isConnectable={false} />
+            {ring && (
+                <span style={{ position: 'absolute', top: -15, fontSize: 9, fontWeight: 700, color: ring }}>
+                    {data.role}
+                </span>
+            )}
+        </div>
+    );
+}
+
+export default memo(GraphNode);

src/app/components/algorithm-cards.jsx

@@ -0,0 +1,95 @@
+import { CustomSelect } from '@/components/custom-select';
+import { CustomSlider } from '@/components/custom-slider';
+import { CustomToggle } from '@/components/custom-toggle';
+import { Button } from '@/components/ui/button';
+import { Play, RotateCcw } from 'lucide-react';
+import { PRESETS } from '@/lib/algorithms/graph';
+
+const CONTROLS = [
+    ['N then click', 'add node'],
+    ['E then 2 nodes', 'add edge'],
+    ['click + Del', 'delete'],
+    ['click + S', 'set start'],
+    ['click + F', 'set finish'],
+    ['drag', 'move node'],
+    ['Esc', 'cancel'],
+];
+
+export default function Menu({
+    disabled,
+    onDirectedChange,
+    onAlgorithmChange,
+    onPresetChange,
+    onSpeedChange,
+    onVisualize,
+    onClear,
+}) {
+    return (
+        <div className="w-64 bg-gray-100 p-4 space-y-6 overflow-auto">
+            <h2 className="text-lg font-semibold">Graph Traversal</h2>
+
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Config</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <CustomToggle
+                    title="Directed"
+                    onCheckedChange={onDirectedChange}
+                    disabled={disabled}
+                />
+                <CustomSelect
+                    title="Algorithm"
+                    options={['BFS', 'DFS']}
+                    onChange={onAlgorithmChange}
+                    disabled={disabled}
+                />
+                <CustomSelect
+                    title="Starter graph"
+                    options={PRESETS.map((p) => p.name)}
+                    onChange={onPresetChange}
+                    disabled={disabled}
+                />
+                <CustomSlider
+                    title="Speed"
+                    defaultValue={50}
+                    min={10}
+                    max={100}
+                    step={1}
+                    onChange={onSpeedChange}
+                />
+            </div>
+
+            <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <Button className="w-full" onClick={onVisualize} disabled={disabled}>
+                    <Play /> Visualize
+                </Button>
+                <Button className="w-full" variant="outline" onClick={onClear} disabled={disabled}>
+                    <RotateCcw /> Clear
+                </Button>
+            </div>
+
+            <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                    <div className="h-px flex-1 bg-gray-300" />
+                    <span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Controls</span>
+                    <div className="h-px flex-1 bg-gray-300" />
+                </div>
+                <dl className="text-xs text-gray-600 space-y-1">
+                    {CONTROLS.map(([key, desc]) => (
+                        <div key={key} className="flex justify-between gap-2">
+                            <dt className="font-mono text-gray-800 whitespace-nowrap">{key}</dt>
+                            <dd className="text-right">{desc}</dd>
+                        </div>
+                    ))}
+                </dl>
+            </div>
+        </div>
+    );
+}