Improve visualisation examples and refresh the interface

AGENTS.md

@@ -0,0 +1,5 @@
+# Repository guidance
+
+- Do not use test-driven development in this repository unless the user explicitly requests it.
+- For visualisation content or example-data changes, edit the source directly and run proportionate existing checks afterwards.
+- Update an existing fixture only when the source change would otherwise leave it stale; do not add tests solely for content changes.

README.md

@@ -4,15 +4,19 @@ Interactive, step-by-step traces for common data-structure and algorithm pattern
 visualisation shows the example input and output alongside the changing queue, stack, heap,
 graph, grid, or array state.
 
-[View the live site](https://algorithm-visualisations-nine.vercel.app)
+**[Explore the live visualisations](https://algorithm-visualisations-nine.vercel.app)**
+
+[![Preview of the Algorithm Visualisations website](docs/githubpic.jpg)](https://algorithm-visualisations-nine.vercel.app)
 
 ## Features
 
-- Fourteen interactive traces across trees, graphs, and arrays
+- Fifteen interactive traces across trees, graphs, and arrays
 - Play, pause, previous, next, and restart controls
-- Responsive layouts with light and dark colour schemes
+- Responsive, dark-themed layouts for desktop and mobile
 - Standalone routes suitable for Notion embeds
 - Reference implementations with local syntax highlighting
+- Category filters, direct LeetCode links, and one-click Notion URL copying
+- Privacy-friendly Vercel Analytics
 
 ## Development
 
@@ -37,6 +41,7 @@ npm run build
 src/                    React catalogue and tests
 public/embed/           Trace configurations, runner, and shared styles
 public/<problem>/       Standalone route wrappers
+docs/                   Project preview image
 vercel.json             Routing and browser security headers
 ```
 

public/embed/find-path-exists-in-graph.html

@@ -6,22 +6,34 @@
 {
   "title": "Find if Path Exists in Graph — BFS",
   "url": "https://leetcode.com/problems/find-if-path-exists-in-graph/",
-  "input": "n = 3, edges = [[0, 1], [1, 2]], source = 0, destination = 2",
+  "input": "n = 6, edges = [[0, 1], [0, 2], [1, 3], [2, 4], [3, 4], [4, 5]], source = 0, destination = 5",
   "output": "True",
   "structure": "Queue (front → back)",
   "visual": {
     "type": "graph",
     "positions": {
       "0": [
-        40,
+        30,
         105
       ],
       "1": [
-        225,
-        105
+        150,
+        35
       ],
       "2": [
-        410,
+        150,
+        175
+      ],
+      "3": [
+        285,
+        35
+      ],
+      "4": [
+        285,
+        175
+      ],
+      "5": [
+        420,
         105
       ]
     },
@@ -31,8 +43,24 @@
         1
       ],
       [
-        1,
+        0,
         2
+      ],
+      [
+        1,
+        3
+      ],
+      [
+        2,
+        4
+      ],
+      [
+        3,
+        4
+      ],
+      [
+        4,
+        5
       ]
     ]
   },
@@ -48,40 +76,97 @@
       "map": "visited = {0}"
     },
     {
-      "operation": "Dequeue 0 and discover neighbour 1",
+      "operation": "Dequeue 0 and discover both branches, 1 and 2",
       "active": [
-        "0",
-        "1"
+        "1",
+        "2"
       ],
       "done": [
         "0"
       ],
       "structure": [
+        "1",
+        "2"
+      ],
+      "map": "visited = {0, 1, 2}"
+    },
+    {
+      "operation": "Dequeue 1; skip visited 0 and discover 3",
+      "active": [
+        "3"
+      ],
+      "done": [
+        "0",
         "1"
       ],
-      "map": "visited = {0, 1}"
+      "structure": [
+        "2",
+        "3"
+      ],
+      "map": "visited = {0, 1, 2, 3}"
     },
     {
-      "operation": "Dequeue 1 and discover destination 2",
+      "operation": "Dequeue 2; skip visited 0 and discover 4",
       "active": [
+        "4"
+      ],
+      "done": [
+        "0",
         "1",
         "2"
       ],
+      "structure": [
+        "3",
+        "4"
+      ],
+      "map": "visited = {0, 1, 2, 3, 4}"
+    },
+    {
+      "operation": "Dequeue 3; neighbour 4 is already visited, so do not enqueue it again",
+      "active": [
+        "3",
+        "4"
+      ],
       "done": [
         "0",
-        "1"
+        "1",
+        "2",
+        "3"
       ],
       "structure": [
-        "2"
+        "4"
       ],
-      "map": "visited = {0, 1, 2}"
+      "map": "visited suppression keeps one copy of 4 in the queue"
     },
     {
-      "operation": "Dequeue 2: it is the destination",
+      "operation": "Dequeue 4; skip visited 2 and 3, then discover destination 5",
+      "active": [
+        "5"
+      ],
       "done": [
         "0",
         "1",
-        "2"
+        "2",
+        "3",
+        "4"
+      ],
+      "structure": [
+        "5"
+      ],
+      "map": "visited = {0, 1, 2, 3, 4, 5}"
+    },
+    {
+      "operation": "Dequeue 5: it is the destination",
+      "active": [
+        "5"
+      ],
+      "done": [
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5"
       ],
       "structure": [],
       "map": "return True"

public/embed/graph-valid-tree.html

@@ -6,31 +6,35 @@
 {
   "title": "Graph Valid Tree — BFS",
   "url": "https://leetcode.com/problems/graph-valid-tree/",
-  "input": "n = 5, edges = [[0, 1], [0, 2], [0, 3], [1, 4]]",
-  "output": "True",
+  "input": "n = 6, edges = [[0, 1], [0, 2], [1, 3], [2, 3], [4, 5]]",
+  "output": "False",
   "structure": "Queue of (node, parent)",
   "visual": {
     "type": "graph",
     "positions": {
       "0": [
-        50,
+        35,
         105
       ],
       "1": [
-        205,
+        170,
         35
       ],
       "2": [
-        205,
-        105
+        170,
+        175
       ],
       "3": [
-        205,
-        175
+        305,
+        105
       ],
       "4": [
-        375,
-        35
+        400,
+        55
+      ],
+      "5": [
+        400,
+        155
       ]
     },
     "edges": [
@@ -43,12 +47,16 @@
         2
       ],
       [
-        0,
+        1,
         3
       ],
       [
-        1,
-        4
+        2,
+        3
+      ],
+      [
+        4,
+        5
       ]
     ]
   },
@@ -64,63 +72,67 @@
       "map": "visited = {0}"
     },
     {
-      "operation": "Visit 0 and enqueue each unseen neighbour",
+      "operation": "Visit 0; fake parent -1 matches no neighbour",
       "active": [
         "0",
         "1",
-        "2",
-        "3"
+        "2"
       ],
       "done": [
         "0"
       ],
       "structure": [
         "(1, 0)",
-        "(2, 0)",
-        "(3, 0)"
+        "(2, 0)"
       ],
-      "map": "the parent prevents treating the return edge as a cycle"
+      "map": "visited = {0, 1, 2}"
     },
     {
-      "operation": "Visit 1 and discover 4",
+      "operation": "Visit 1; skip parent 0, then discover 3",
       "active": [
         "1",
-        "4"
+        "3"
       ],
       "done": [
         "0",
         "1"
       ],
       "structure": [
         "(2, 0)",
-        "(3, 0)",
-        "(4, 1)"
+        "(3, 1)"
       ],
-      "map": "visited = {0, 1, 2, 3, 4}"
+      "map": "visited = {0, 1, 2, 3}"
     },
     {
-      "operation": "Drain remaining nodes without seeing a non-parent repeat",
+      "operation": "Visit 2; skip parent 0, then inspect neighbour 3",
+      "active": [
+        "2",
+        "3"
+      ],
       "done": [
         "0",
         "1",
-        "2",
-        "3",
-        "4"
+        "2"
+      ],
+      "structure": [
+        "(3, 1)"
       ],
-      "structure": [],
-      "map": "no cycle found"
+      "map": "3 is already visited and is not 2's parent"
     },
     {
-      "operation": "All n nodes were visited",
+      "operation": "A non-parent repeat proves the 0–1–3–2–0 cycle",
+      "active": [
+        "3"
+      ],
       "done": [
         "0",
         "1",
-        "2",
-        "3",
-        "4"
+        "2"
+      ],
+      "structure": [
+        "(3, 1)"
       ],
-      "structure": [],
-      "map": "len(visited) = n → True"
+      "map": "return False; disconnected nodes 4 and 5 were never reached"
     }
   ]
 }