From db13cfa496270f6d605679e403ded9bb75c0ff1d Mon Sep 17 00:00:00 2001
From: Sebby1770 <274013474+Sebby1770@users.noreply.github.com>
Date: Sat, 11 Jul 2026 01:14:39 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20add=20Pathfinding=20Lab=20=E2=80=94=206?=
 =?UTF-8?q?=20algorithms,=20grid=20editor,=20mazes,=20live=20re-path=20(v5?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Turns Sort Lab into Algorithm Lab with a second visualizer mode:

- BFS, DFS, Dijkstra, A*, Greedy Best-First, and Bidirectional BFS on an
  interactive grid with walls, weighted terrain (cost x5), and draggable
  start/goal markers that re-solve the path live after a run
- Recursive-division maze generator (odd-lattice walls, even-lattice gaps
  and endpoints, so every maze is guaranteed solvable), plus random
  scatter and weighted-terrain generators
- Optional diagonal movement with octile heuristic and no corner-cutting
- Per-algorithm profile panel (guarantee, complexity, weight-awareness)
  and live metrics (visited, steps, cost, compute time)
- Mode tabs with per-mode keyboard shortcuts; sorting shortcuts no longer
  fire in pathfinding mode
- Fix: workspaces with the hidden attribute now actually hide (the
  .workspace display:grid rule was overriding the UA [hidden] style)
- SW cache bumped to v4, precaches pathfinding.js; manifest/README/
  CHANGELOG rebranded to Algorithm Lab

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 CHANGELOG.md   |  23 +-
 README.md      |  38 ++-
 index.html     | 115 +++++++-
 manifest.json  |   6 +-
 pathfinding.js | 770 +++++++++++++++++++++++++++++++++++++++++++++++++
 script.js      |   1 +
 style.css      | 188 +++++++++++-
 sw.js          |   5 +-
 8 files changed, 1127 insertions(+), 19 deletions(-)
 create mode 100644 pathfinding.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 157e1ae..16d4d5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,27 @@
 # Changelog
 
-All notable changes to Sort Lab (Algorithm Visualizer).
+All notable changes to Algorithm Lab (formerly Sort Lab).
+
+## [2026-07-11] — v5 Pathfinding Lab
+
+### Added
+- **Pathfinding mode** — a second visualizer alongside sorting, switchable via new topbar tabs
+- **Six pathfinding algorithms**: Breadth-First Search, Depth-First Search, Dijkstra's Algorithm, A* Search, Greedy Best-First, and Bidirectional BFS
+- **Interactive grid editor** — drag to draw walls, weighted cells (cost ×5), or erase; drag the start/goal markers; after a run the path re-solves live while dragging
+- **Maze & terrain generators** — recursive-division maze (guaranteed solvable), random scatter walls, and scattered weights
+- **Diagonal movement** option with octile heuristic and no corner-cutting
+- **Algorithm profile panel** — shortest-path guarantee, complexity, and weight-awareness badges per algorithm
+- **Live metrics** — visited cells, path steps, path cost, and compute time
+- **Pathfinding keyboard shortcuts**: `V` visualize · `C` clear path · `B` clear board · `M` maze
+- Three grid sizes (25×15, 37×21, 49×27) with full touch support
+
+### Changed
+- Rebranded **Sort Lab → Algorithm Lab**; PWA manifest, title, and README updated
+- Service worker cache bumped to v4 and now precaches `pathfinding.js`
+- Sorting keyboard shortcuts are scoped to sorting mode so the two modes don't clash
+
+### Fixed
+- `hidden` attribute on workspaces is now honored (explicit `display: none` override)
 
 ## [2026-07-05] — v4 Feature Expansion
 
diff --git a/README.md b/README.md
index b029969..e397af5 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,31 @@
-# Sort Lab — Sorting Algorithm Visualizer
+# Algorithm Lab — Sorting & Pathfinding Visualizer
 
-An interactive, animated sorting algorithm visualizer built with pure HTML, CSS, and vanilla JavaScript — no frameworks, no build step.
+An interactive, animated algorithm visualizer built with pure HTML, CSS, and vanilla JavaScript — no frameworks, no build step. Two labs in one app: **Sorting** and **Pathfinding**, switchable from the topbar.
 
-![Sort Lab](https://img.shields.io/badge/algorithms-8-blue) ![PWA](https://img.shields.io/badge/PWA-offline-purple)
+![Algorithms](https://img.shields.io/badge/sorting_algorithms-10-blue) ![Pathfinding](https://img.shields.io/badge/pathfinding_algorithms-6-teal) ![PWA](https://img.shields.io/badge/PWA-offline-purple)
 
-## Features
+## Pathfinding Lab
 
-### Algorithms (8)
+- **Six algorithms** — BFS, DFS, Dijkstra, A*, Greedy Best-First, Bidirectional BFS
+- **Interactive grid** — drag to draw walls or weighted terrain (cost ×5), drag the start/goal markers, and watch the path re-solve live after a run
+- **Mazes & terrain** — recursive-division maze (always solvable), random scatter, scattered weights
+- **Diagonal movement** option (octile heuristic, no corner-cutting)
+- **Per-algorithm profile** — shortest-path guarantee, complexity, weight-awareness
+- **Live metrics** — visited cells, path steps, path cost, compute time
+- Shortcuts: `V` visualize · `C` clear path · `B` clear board · `M` maze
+
+| Algorithm | Weighted | Shortest path | Complexity |
+|-----------|----------|---------------|------------|
+| BFS | No | ✅ (unweighted) | O(V + E) |
+| DFS | No | ❌ | O(V + E) |
+| Dijkstra | Yes | ✅ | O((V + E) log V) |
+| A* | Yes | ✅ | O((V + E) log V) |
+| Greedy Best-First | Yes | ❌ | O((V + E) log V) |
+| Bidirectional BFS | No | ✅ (unweighted) | O(V + E) |
+
+## Sorting Lab
+
+### Algorithms (10)
 - Bubble Sort
 - Selection Sort
 - Insertion Sort
@@ -15,6 +34,8 @@ An interactive, animated sorting algorithm visualizer built with pure HTML, CSS,
 - Heap Sort
 - **Shell Sort** — gap-based insertion with diminishing gaps
 - **Radix Sort** — LSD digit passes with bucket visualization
+- **Counting Sort** — counting-array panel visualization
+- **Cocktail Shaker Sort** — bidirectional bubble sweep
 
 ### Dataset Generators
 | Type | Description |
@@ -53,9 +74,10 @@ An interactive, animated sorting algorithm visualizer built with pure HTML, CSS,
 
 ```
 algorithm-visualiser/
-├── index.html      # Lab UI layout
-├── style.css       # Theming, sidebar, race mode, responsive
-├── script.js       # Algorithms, metrics, race mode, tournament, teaching
+├── index.html      # Lab UI layout (sorting + pathfinding views)
+├── style.css       # Theming, sidebar, race mode, pathfinding grid, responsive
+├── script.js       # Sorting: algorithms, metrics, race mode, tournament, teaching
+├── pathfinding.js  # Pathfinding: grid editor, 6 algorithms, mazes, live re-path
 ├── sw.js           # Service worker for offline caching
 ├── manifest.json   # PWA manifest
 ├── CHANGELOG.md    # Version history
diff --git a/index.html b/index.html
index eced353..76a982f 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Interactive sorting algorithm visualizer with race mode, quiz mode, teaching mode, tournament benchmarks, and offline support." />
+  <meta name="description" content="Interactive algorithm visualizer: 10 sorting algorithms with race, quiz, and tournament modes, plus a pathfinding lab with BFS, DFS, Dijkstra, A*, and mazes. Offline-capable PWA." />
   <meta name="theme-color" content="#0b1220" />
-  <title>Sort Lab — Algorithm Visualizer</title>
+  <title>Algorithm Lab — Sorting &amp; Pathfinding Visualizer</title>
   <link rel="manifest" href="manifest.json" />
   <link rel="stylesheet" href="style.css" />
 </head>
@@ -15,10 +15,14 @@
       <div class="brand">
         <span class="brand-mark" aria-hidden="true">⚗</span>
         <div>
-          <h1>Sort Lab</h1>
+          <h1>Algorithm Lab</h1>
           <p class="brand-sub">Sorting Algorithm Visualizer</p>
         </div>
       </div>
+      <nav class="mode-tabs" role="tablist" aria-label="Visualizer mode">
+        <button id="modeSortBtn" class="mode-tab active" type="button" role="tab" aria-selected="true">Sorting</button>
+        <button id="modePathBtn" class="mode-tab" type="button" role="tab" aria-selected="false">Pathfinding</button>
+      </nav>
       <div class="topbar-actions">
         <button id="shareUrlBtn" class="btn btn-ghost btn-sm" type="button" title="Copy shareable URL">🔗 Share</button>
         <button id="presentationBtn" class="btn btn-ghost btn-sm" type="button" title="Presentation mode (Esc to exit)">🖥 Present</button>
@@ -30,7 +34,7 @@ <h1>Sort Lab</h1>
       </div>
     </header>
 
-    <div class="workspace">
+    <div class="workspace" id="sortWorkspace">
       <aside class="sidebar">
         <section class="panel">
           <h2 class="panel-title">Controls</h2>
@@ -243,6 +247,108 @@ <h3>Race</h3>
         </section>
       </main>
     </div>
+
+    <div class="workspace" id="pathWorkspace" hidden>
+      <aside class="sidebar">
+        <section class="panel">
+          <h2 class="panel-title">Pathfinding Controls</h2>
+
+          <div class="field">
+            <label for="pfAlgorithm">Algorithm</label>
+            <select id="pfAlgorithm">
+              <option value="bfs">Breadth-First Search</option>
+              <option value="dfs">Depth-First Search</option>
+              <option value="dijkstra">Dijkstra's Algorithm</option>
+              <option value="astar" selected>A* Search</option>
+              <option value="greedy">Greedy Best-First</option>
+              <option value="bibfs">Bidirectional BFS</option>
+            </select>
+          </div>
+
+          <div class="field">
+            <label for="pfBrush">Draw Tool</label>
+            <select id="pfBrush">
+              <option value="wall">Wall (impassable)</option>
+              <option value="weight">Weight (cost ×5)</option>
+              <option value="erase">Eraser</option>
+            </select>
+          </div>
+
+          <div class="field">
+            <label for="pfGridSize">Grid Size</label>
+            <select id="pfGridSize">
+              <option value="small">Small (25 × 15)</option>
+              <option value="medium" selected>Medium (37 × 21)</option>
+              <option value="large">Large (49 × 27)</option>
+            </select>
+          </div>
+
+          <div class="field">
+            <label for="pfSpeed">Speed: <span id="pfSpeedValue">60</span></label>
+            <input type="range" id="pfSpeed" min="1" max="100" value="60" />
+          </div>
+
+          <div class="field">
+            <label class="checkbox-row">
+              <input type="checkbox" id="pfDiagonal" />
+              <span>Allow diagonal movement</span>
+            </label>
+          </div>
+
+          <div class="btn-grid">
+            <button id="pfVisualizeBtn" class="btn btn-primary" title="Shortcut: V">Visualize</button>
+            <button id="pfClearPathBtn" class="btn btn-secondary" title="Shortcut: C">Clear Path</button>
+            <button id="pfClearBoardBtn" class="btn btn-danger" title="Shortcut: B">Clear Board</button>
+          </div>
+
+          <div class="field">
+            <label for="pfMazeType">Maze / Terrain</label>
+            <select id="pfMazeType">
+              <option value="division">Recursive Division Maze</option>
+              <option value="scatter">Random Scatter Walls</option>
+              <option value="weights">Scattered Weights</option>
+            </select>
+            <button id="pfMazeBtn" type="button" class="btn btn-accent btn-full" title="Shortcut: M">🧱 Generate Maze</button>
+          </div>
+
+          <p class="shortcut-hint">V visualize · C clear path · B clear board · M maze</p>
+        </section>
+
+        <section class="panel" id="pfProfile" aria-live="polite"></section>
+
+        <section class="panel">
+          <h2 class="panel-title">How to Use</h2>
+          <p class="panel-sub">
+            Drag on the grid to draw with the selected tool. Drag the <strong>start</strong> or
+            <strong>goal</strong> marker to move it — after a run, the path re-solves live as you drag.
+            Weighted cells cost ×5 to enter: compare Dijkstra or A* (weight-aware) against BFS (weight-blind).
+          </p>
+        </section>
+      </aside>
+
+      <main class="main-stage">
+        <p id="pfStatus" class="status-bar" aria-live="polite" role="status">Ready</p>
+
+        <section class="viz-pane">
+          <div class="pane-header">
+            <h3>Grid</h3>
+            <div id="pfMetrics" class="metrics-strip"></div>
+          </div>
+          <div class="pf-grid-wrap">
+            <div id="pfGrid" class="pf-grid" role="img" aria-label="Pathfinding grid visualization"></div>
+          </div>
+        </section>
+
+        <section class="legend">
+          <div class="legend-item"><span class="swatch pf-start"></span> Start</div>
+          <div class="legend-item"><span class="swatch pf-end"></span> Goal</div>
+          <div class="legend-item"><span class="swatch pf-wall"></span> Wall</div>
+          <div class="legend-item"><span class="swatch pf-weight"></span> Weight (×5)</div>
+          <div class="legend-item"><span class="swatch pf-visited"></span> Visited</div>
+          <div class="legend-item"><span class="swatch pf-path"></span> Shortest path</div>
+        </section>
+      </main>
+    </div>
   </div>
 
   <div id="presentationOverlay" class="presentation-overlay hidden" role="dialog" aria-modal="true" aria-label="Presentation mode">
@@ -259,5 +365,6 @@ <h3>Race</h3>
   <div id="a11yAnnouncer" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
 
   <script src="script.js"></script>
+  <script src="pathfinding.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 372fa8a..10f0340 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
-  "name": "Sort Lab — Algorithm Visualizer",
-  "short_name": "Sort Lab",
-  "description": "Interactive sorting algorithm visualizer with 8 algorithms, teaching mode, tournament benchmarks, and offline support.",
+  "name": "Algorithm Lab — Sorting & Pathfinding Visualizer",
+  "short_name": "Algorithm Lab",
+  "description": "Interactive algorithm visualizer: 10 sorting algorithms with race, quiz, and tournament modes, plus a pathfinding lab with BFS, DFS, Dijkstra, A*, and mazes. Offline-capable.",
   "start_url": "./index.html",
   "display": "standalone",
   "background_color": "#0b1220",
diff --git a/pathfinding.js b/pathfinding.js
new file mode 100644
index 0000000..93b2064
--- /dev/null
+++ b/pathfinding.js
@@ -0,0 +1,770 @@
+/* ============================================================
+   Path Lab — Pathfinding visualizer mode
+   BFS, DFS, Dijkstra, A*, Greedy Best-First, Bidirectional BFS
+   ============================================================ */
+"use strict";
+
+(() => {
+  const $ = (id) => document.getElementById(id);
+
+  const WEIGHT_COST = 5;
+
+  const PATH_ALGORITHMS = {
+    bfs: {
+      name: "Breadth-First Search",
+      weighted: false,
+      guarantee: "Shortest path guaranteed (unweighted)",
+      complexity: "O(V + E)",
+      description:
+        "Expands outward level by level from the start. Ignores cell weights, but always finds the path with the fewest steps.",
+    },
+    dfs: {
+      name: "Depth-First Search",
+      weighted: false,
+      guarantee: "No shortest-path guarantee",
+      complexity: "O(V + E)",
+      description:
+        "Dives as deep as possible before backtracking. Fast to implement, but the path it finds can be wildly suboptimal.",
+    },
+    dijkstra: {
+      name: "Dijkstra's Algorithm",
+      weighted: true,
+      guarantee: "Shortest path guaranteed (weighted)",
+      complexity: "O((V + E) log V)",
+      description:
+        "Always settles the cheapest unvisited cell next. Respects weights, and is the gold standard for weighted shortest paths.",
+    },
+    astar: {
+      name: "A* Search",
+      weighted: true,
+      guarantee: "Shortest path guaranteed (admissible heuristic)",
+      complexity: "O((V + E) log V)",
+      description:
+        "Dijkstra plus a distance-to-goal heuristic. Explores far fewer cells while keeping the shortest-path guarantee.",
+    },
+    greedy: {
+      name: "Greedy Best-First",
+      weighted: true,
+      guarantee: "No shortest-path guarantee",
+      complexity: "O((V + E) log V)",
+      description:
+        "Chases the goal using only the heuristic. Very fast and very focused — but happily walks into traps and detours.",
+    },
+    bibfs: {
+      name: "Bidirectional BFS",
+      weighted: false,
+      guarantee: "Shortest path guaranteed (unweighted)",
+      complexity: "O(V + E)",
+      description:
+        "Runs one BFS from the start and one from the goal until the frontiers meet — often exploring far less than one-sided BFS.",
+    },
+  };
+
+  const GRID_PRESETS = {
+    small: { cols: 25, rows: 15 },
+    medium: { cols: 37, rows: 21 },
+    large: { cols: 49, rows: 27 },
+  };
+
+  /* ---------- Binary min-heap keyed by priority ---------- */
+  class MinHeap {
+    constructor() {
+      this.items = [];
+    }
+
+    get size() {
+      return this.items.length;
+    }
+
+    push(node, priority) {
+      this.items.push({ node, priority });
+      let i = this.items.length - 1;
+      while (i > 0) {
+        const parent = (i - 1) >> 1;
+        if (this.items[parent].priority <= this.items[i].priority) break;
+        [this.items[parent], this.items[i]] = [this.items[i], this.items[parent]];
+        i = parent;
+      }
+    }
+
+    pop() {
+      const top = this.items[0];
+      const last = this.items.pop();
+      if (this.items.length > 0) {
+        this.items[0] = last;
+        let i = 0;
+        for (;;) {
+          const left = i * 2 + 1;
+          const right = left + 1;
+          let smallest = i;
+          if (left < this.items.length && this.items[left].priority < this.items[smallest].priority) smallest = left;
+          if (right < this.items.length && this.items[right].priority < this.items[smallest].priority) smallest = right;
+          if (smallest === i) break;
+          [this.items[smallest], this.items[i]] = [this.items[i], this.items[smallest]];
+          i = smallest;
+        }
+      }
+      return top.node;
+    }
+  }
+
+  /* ---------- Path Lab application ---------- */
+  class PathLabApp {
+    constructor() {
+      this.dom = {
+        workspace: $("pathWorkspace"),
+        algorithm: $("pfAlgorithm"),
+        gridSize: $("pfGridSize"),
+        speed: $("pfSpeed"),
+        speedValue: $("pfSpeedValue"),
+        brush: $("pfBrush"),
+        diagonal: $("pfDiagonal"),
+        visualizeBtn: $("pfVisualizeBtn"),
+        clearPathBtn: $("pfClearPathBtn"),
+        clearBoardBtn: $("pfClearBoardBtn"),
+        mazeType: $("pfMazeType"),
+        mazeBtn: $("pfMazeBtn"),
+        grid: $("pfGrid"),
+        status: $("pfStatus"),
+        metrics: $("pfMetrics"),
+        profile: $("pfProfile"),
+        toast: $("toast"),
+      };
+
+      this.cols = 0;
+      this.rows = 0;
+      this.walls = null; // Uint8Array
+      this.weights = null; // Uint8Array of 1 | WEIGHT_COST
+      this.cellEls = [];
+      this.start = 0;
+      this.end = 0;
+      this.runId = 0;
+      this.isRunning = false;
+      this.lastRunAlgorithm = null;
+      this.pointer = { painting: false, brush: null, dragging: null, lastIndex: -1 };
+
+      this.bindEvents();
+      this.buildGrid(this.dom.gridSize.value);
+      this.renderProfile();
+      this.setStatus("Draw walls, drop weights, then hit Visualize.");
+    }
+
+    /* ---------- Grid construction ---------- */
+    buildGrid(preset) {
+      const { cols, rows } = GRID_PRESETS[preset] || GRID_PRESETS.medium;
+      this.cols = cols;
+      this.rows = rows;
+      this.walls = new Uint8Array(cols * rows);
+      this.weights = new Uint8Array(cols * rows).fill(1);
+      // Even coordinates are room cells in recursive-division mazes (walls
+      // only occupy odd rows/cols), so even endpoints are never sealed in.
+      const even = (n) => n - (n % 2);
+      const midRow = even(Math.floor(rows / 2));
+      this.start = this.index(midRow, even(Math.floor(cols / 5)));
+      this.end = this.index(midRow, even(cols - 1 - Math.floor(cols / 5)));
+      this.lastRunAlgorithm = null;
+
+      this.dom.grid.style.setProperty("--pf-cols", cols);
+      this.dom.grid.innerHTML = "";
+      this.cellEls = new Array(cols * rows);
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < cols * rows; i++) {
+        const cell = document.createElement("div");
+        cell.className = "pf-cell";
+        cell.dataset.index = i;
+        this.cellEls[i] = cell;
+        fragment.appendChild(cell);
+      }
+      this.dom.grid.appendChild(fragment);
+      this.paintEndpoints();
+      this.updateMetrics(null);
+    }
+
+    index(row, col) {
+      return row * this.cols + col;
+    }
+
+    rowOf(i) {
+      return Math.floor(i / this.cols);
+    }
+
+    colOf(i) {
+      return i % this.cols;
+    }
+
+    paintEndpoints() {
+      this.cellEls.forEach((el, i) => {
+        el.classList.toggle("start", i === this.start);
+        el.classList.toggle("end", i === this.end);
+      });
+    }
+
+    /* ---------- Event wiring ---------- */
+    bindEvents() {
+      this.dom.gridSize.addEventListener("change", () => {
+        this.cancelRun();
+        this.buildGrid(this.dom.gridSize.value);
+        this.setStatus("Fresh grid ready.");
+      });
+
+      this.dom.speed.addEventListener("input", () => {
+        this.dom.speedValue.textContent = this.dom.speed.value;
+      });
+
+      this.dom.algorithm.addEventListener("change", () => {
+        this.renderProfile();
+        this.instantRepath();
+      });
+
+      this.dom.diagonal.addEventListener("change", () => this.instantRepath());
+
+      this.dom.visualizeBtn.addEventListener("click", () => this.visualize());
+      this.dom.clearPathBtn.addEventListener("click", () => {
+        this.cancelRun();
+        this.clearSearchArtifacts();
+        this.lastRunAlgorithm = null;
+        this.updateMetrics(null);
+        this.setStatus("Path cleared — walls kept.");
+      });
+      this.dom.clearBoardBtn.addEventListener("click", () => {
+        this.cancelRun();
+        this.buildGrid(this.dom.gridSize.value);
+        this.setStatus("Board cleared.");
+      });
+      this.dom.mazeBtn.addEventListener("click", () => this.generateMaze());
+
+      const grid = this.dom.grid;
+      grid.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+      grid.addEventListener("pointermove", (e) => this.onPointerMove(e));
+      window.addEventListener("pointerup", () => this.onPointerUp());
+      grid.addEventListener("contextmenu", (e) => e.preventDefault());
+
+      document.addEventListener("keydown", (e) => {
+        if (document.body.dataset.mode !== "path") return;
+        if (e.target.matches("input, select, textarea")) return;
+        switch (e.code) {
+          case "KeyV":
+            this.visualize();
+            break;
+          case "KeyC":
+            this.dom.clearPathBtn.click();
+            break;
+          case "KeyB":
+            this.dom.clearBoardBtn.click();
+            break;
+          case "KeyM":
+            this.generateMaze();
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
+    cellFromEvent(e) {
+      // Mouse: the event target is the cell. Touch: implicit pointer capture
+      // pins the target to the first cell, so hit-test the coordinates.
+      let cell = e.target && e.target.closest ? e.target.closest(".pf-cell") : null;
+      if (!cell) {
+        const el = document.elementFromPoint(e.clientX, e.clientY);
+        cell = el && el.closest ? el.closest(".pf-cell") : null;
+      }
+      return cell ? parseInt(cell.dataset.index, 10) : -1;
+    }
+
+    onPointerDown(e) {
+      if (this.isRunning) return;
+      const i = this.cellFromEvent(e);
+      if (i < 0) return;
+      e.preventDefault();
+      if (e.target.releasePointerCapture && e.pointerId !== undefined) {
+        try {
+          e.target.releasePointerCapture(e.pointerId);
+        } catch (_) {
+          /* pointer already released */
+        }
+      }
+
+      if (i === this.start) {
+        this.pointer.dragging = "start";
+      } else if (i === this.end) {
+        this.pointer.dragging = "end";
+      } else {
+        this.pointer.painting = true;
+        const brush = this.dom.brush.value;
+        // First cell decides paint vs erase for the whole stroke
+        if (brush === "wall") this.pointer.brush = this.walls[i] ? "erase" : "wall";
+        else if (brush === "weight") this.pointer.brush = this.weights[i] > 1 ? "erase" : "weight";
+        else this.pointer.brush = "erase";
+        this.applyBrush(i);
+      }
+      this.pointer.lastIndex = i;
+    }
+
+    onPointerMove(e) {
+      if (!this.pointer.painting && !this.pointer.dragging) return;
+      const i = this.cellFromEvent(e);
+      if (i < 0 || i === this.pointer.lastIndex) return;
+      this.pointer.lastIndex = i;
+
+      if (this.pointer.dragging) {
+        if (this.walls[i]) return;
+        if (this.pointer.dragging === "start" && i !== this.end) this.start = i;
+        if (this.pointer.dragging === "end" && i !== this.start) this.end = i;
+        this.paintEndpoints();
+        this.instantRepath();
+      } else {
+        this.applyBrush(i);
+      }
+    }
+
+    onPointerUp() {
+      const wasEditing = this.pointer.painting;
+      this.pointer.painting = false;
+      this.pointer.dragging = null;
+      this.pointer.brush = null;
+      this.pointer.lastIndex = -1;
+      if (wasEditing) this.instantRepath();
+    }
+
+    applyBrush(i) {
+      if (i === this.start || i === this.end) return;
+      const el = this.cellEls[i];
+      if (this.pointer.brush === "wall") {
+        this.walls[i] = 1;
+        this.weights[i] = 1;
+      } else if (this.pointer.brush === "weight") {
+        this.walls[i] = 0;
+        this.weights[i] = WEIGHT_COST;
+      } else {
+        this.walls[i] = 0;
+        this.weights[i] = 1;
+      }
+      el.classList.toggle("wall", this.walls[i] === 1);
+      el.classList.toggle("weight", this.weights[i] > 1);
+    }
+
+    /* ---------- Neighbors ---------- */
+    neighbors(i, allowDiagonal) {
+      const r = this.rowOf(i);
+      const c = this.colOf(i);
+      const out = [];
+      const open = (rr, cc) =>
+        rr >= 0 && rr < this.rows && cc >= 0 && cc < this.cols && !this.walls[this.index(rr, cc)];
+
+      const orth = [
+        [r - 1, c],
+        [r, c + 1],
+        [r + 1, c],
+        [r, c - 1],
+      ];
+      for (const [rr, cc] of orth) {
+        if (open(rr, cc)) out.push({ node: this.index(rr, cc), diagonal: false });
+      }
+
+      if (allowDiagonal) {
+        const diag = [
+          [r - 1, c + 1, r - 1, c, r, c + 1],
+          [r + 1, c + 1, r + 1, c, r, c + 1],
+          [r + 1, c - 1, r + 1, c, r, c - 1],
+          [r - 1, c - 1, r - 1, c, r, c - 1],
+        ];
+        for (const [rr, cc, ar, ac, br, bc] of diag) {
+          // No corner cutting: both orthogonal sides must be open
+          if (open(rr, cc) && open(ar, ac) && open(br, bc)) {
+            out.push({ node: this.index(rr, cc), diagonal: true });
+          }
+        }
+      }
+      return out;
+    }
+
+    stepCost(target, diagonal) {
+      return this.weights[target] * (diagonal ? Math.SQRT2 : 1);
+    }
+
+    heuristic(i, allowDiagonal) {
+      const dr = Math.abs(this.rowOf(i) - this.rowOf(this.end));
+      const dc = Math.abs(this.colOf(i) - this.colOf(this.end));
+      // Octile distance with diagonals, Manhattan without — both admissible
+      if (allowDiagonal) return Math.max(dr, dc) + (Math.SQRT2 - 1) * Math.min(dr, dc);
+      return dr + dc;
+    }
+
+    /* ---------- Search algorithms ----------
+       Each returns { visited: number[], path: number[]|null, cost: number } */
+    runAlgorithm(id, allowDiagonal) {
+      switch (id) {
+        case "bfs":
+          return this.searchFrontier(allowDiagonal, { useStack: false });
+        case "dfs":
+          return this.searchFrontier(allowDiagonal, { useStack: true });
+        case "dijkstra":
+          return this.searchHeap(allowDiagonal, { useCost: true, useHeuristic: false });
+        case "astar":
+          return this.searchHeap(allowDiagonal, { useCost: true, useHeuristic: true });
+        case "greedy":
+          return this.searchHeap(allowDiagonal, { useCost: false, useHeuristic: true });
+        case "bibfs":
+          return this.searchBidirectional(allowDiagonal);
+        default:
+          return { visited: [], path: null, cost: 0 };
+      }
+    }
+
+    searchFrontier(allowDiagonal, { useStack }) {
+      const visited = [];
+      const prev = new Int32Array(this.cols * this.rows).fill(-1);
+      const seen = new Uint8Array(this.cols * this.rows);
+      const frontier = [this.start];
+      seen[this.start] = 1;
+
+      while (frontier.length > 0) {
+        const current = useStack ? frontier.pop() : frontier.shift();
+        visited.push(current);
+        if (current === this.end) return this.finishSearch(visited, prev);
+        for (const { node } of this.neighbors(current, allowDiagonal)) {
+          if (!seen[node]) {
+            seen[node] = 1;
+            prev[node] = current;
+            frontier.push(node);
+          }
+        }
+      }
+      return { visited, path: null, cost: 0 };
+    }
+
+    searchHeap(allowDiagonal, { useCost, useHeuristic }) {
+      const total = this.cols * this.rows;
+      const visited = [];
+      const prev = new Int32Array(total).fill(-1);
+      const dist = new Float64Array(total).fill(Infinity);
+      const settled = new Uint8Array(total);
+      const heap = new MinHeap();
+
+      dist[this.start] = 0;
+      heap.push(this.start, useHeuristic ? this.heuristic(this.start, allowDiagonal) : 0);
+
+      while (heap.size > 0) {
+        const current = heap.pop();
+        if (settled[current]) continue;
+        settled[current] = 1;
+        visited.push(current);
+        if (current === this.end) return this.finishSearch(visited, prev);
+
+        for (const { node, diagonal } of this.neighbors(current, allowDiagonal)) {
+          if (settled[node]) continue;
+          const candidate = dist[current] + this.stepCost(node, diagonal);
+          if (candidate < dist[node]) {
+            dist[node] = candidate;
+            prev[node] = current;
+            const h = useHeuristic ? this.heuristic(node, allowDiagonal) : 0;
+            heap.push(node, (useCost ? candidate : 0) + h);
+          }
+        }
+      }
+      return { visited, path: null, cost: 0 };
+    }
+
+    searchBidirectional(allowDiagonal) {
+      if (this.start === this.end) return { visited: [this.start], path: [this.start], cost: 0 };
+      const total = this.cols * this.rows;
+      const visited = [];
+      const prevA = new Int32Array(total).fill(-1);
+      const prevB = new Int32Array(total).fill(-1);
+      const sideOf = new Int8Array(total); // 0 unseen, 1 from start, 2 from end
+      let frontA = [this.start];
+      let frontB = [this.end];
+      sideOf[this.start] = 1;
+      sideOf[this.end] = 2;
+
+      const expand = (frontier, side, prev) => {
+        const next = [];
+        for (const current of frontier) {
+          visited.push(current);
+          for (const { node } of this.neighbors(current, allowDiagonal)) {
+            if (sideOf[node] === 0) {
+              sideOf[node] = side;
+              prev[node] = current;
+              next.push(node);
+            } else if (sideOf[node] !== side) {
+              return { next, meet: node, from: current };
+            }
+          }
+        }
+        return { next, meet: -1, from: -1 };
+      };
+
+      while (frontA.length > 0 && frontB.length > 0) {
+        const expandFromStart = frontA.length <= frontB.length;
+        const result = expandFromStart
+          ? expand(frontA, 1, prevA)
+          : expand(frontB, 2, prevB);
+
+        if (result.meet !== -1) {
+          if (expandFromStart) prevA[result.meet] = result.from;
+          else prevB[result.meet] = result.from;
+          // Stitch: walk prevA back to start, prevB forward to end
+          const left = [];
+          for (let n = result.meet; n !== -1; n = prevA[n]) left.push(n);
+          left.reverse();
+          const right = [];
+          for (let n = prevB[result.meet]; n !== -1; n = prevB[n]) right.push(n);
+          const path = left.concat(right);
+          return { visited, path, cost: this.pathCost(path) };
+        }
+        if (expandFromStart) frontA = result.next;
+        else frontB = result.next;
+      }
+      return { visited, path: null, cost: 0 };
+    }
+
+    finishSearch(visited, prev) {
+      const path = [];
+      for (let n = this.end; n !== -1; n = prev[n]) path.push(n);
+      path.reverse();
+      return { visited, path, cost: this.pathCost(path) };
+    }
+
+    pathCost(path) {
+      let cost = 0;
+      for (let i = 1; i < path.length; i++) {
+        const diagonal =
+          this.rowOf(path[i]) !== this.rowOf(path[i - 1]) &&
+          this.colOf(path[i]) !== this.colOf(path[i - 1]);
+        cost += this.stepCost(path[i], diagonal);
+      }
+      return cost;
+    }
+
+    /* ---------- Visualization ---------- */
+    speedDelay() {
+      const speed = parseInt(this.dom.speed.value, 10);
+      return Math.max(0, Math.round((100 - speed) * 0.6));
+    }
+
+    visitsPerTick() {
+      const speed = parseInt(this.dom.speed.value, 10);
+      if (speed > 90) return 6;
+      if (speed > 70) return 3;
+      if (speed > 40) return 2;
+      return 1;
+    }
+
+    clearSearchArtifacts() {
+      this.dom.grid.classList.remove("instant");
+      this.cellEls.forEach((el) => el.classList.remove("visited", "path"));
+    }
+
+    cancelRun() {
+      this.runId += 1;
+      this.isRunning = false;
+      this.dom.visualizeBtn.disabled = false;
+    }
+
+    async visualize() {
+      if (this.isRunning) return;
+      this.clearSearchArtifacts();
+      const algorithmId = this.dom.algorithm.value;
+      const allowDiagonal = this.dom.diagonal.checked;
+      const myRun = ++this.runId;
+      this.isRunning = true;
+      this.dom.visualizeBtn.disabled = true;
+      this.setStatus(`Running ${PATH_ALGORITHMS[algorithmId].name}…`);
+
+      const t0 = performance.now();
+      const result = this.runAlgorithm(algorithmId, allowDiagonal);
+      const elapsed = performance.now() - t0;
+
+      const delay = this.speedDelay();
+      const batch = this.visitsPerTick();
+      const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+      for (let i = 0; i < result.visited.length; i += batch) {
+        if (this.runId !== myRun) return;
+        for (let j = i; j < Math.min(i + batch, result.visited.length); j++) {
+          const node = result.visited[j];
+          if (node !== this.start && node !== this.end) this.cellEls[node].classList.add("visited");
+        }
+        await sleep(delay);
+      }
+
+      if (this.runId !== myRun) return;
+
+      if (result.path) {
+        for (const node of result.path) {
+          if (this.runId !== myRun) return;
+          if (node !== this.start && node !== this.end) this.cellEls[node].classList.add("path");
+          await sleep(Math.max(delay, 12));
+        }
+        this.setStatus(
+          `${PATH_ALGORITHMS[algorithmId].name}: path found — ${result.path.length - 1} steps, cost ${result.cost.toFixed(1)}.`
+        );
+      } else {
+        this.setStatus(`${PATH_ALGORITHMS[algorithmId].name}: no path — the goal is walled off.`);
+      }
+
+      this.updateMetrics({ ...result, elapsed });
+      this.lastRunAlgorithm = algorithmId;
+      this.isRunning = false;
+      this.dom.visualizeBtn.disabled = false;
+    }
+
+    /* Re-run the last algorithm instantly (no animation) after board edits */
+    instantRepath() {
+      if (!this.lastRunAlgorithm || this.isRunning) return;
+      this.clearSearchArtifacts();
+      this.dom.grid.classList.add("instant");
+      const t0 = performance.now();
+      const result = this.runAlgorithm(this.lastRunAlgorithm, this.dom.diagonal.checked);
+      const elapsed = performance.now() - t0;
+      for (const node of result.visited) {
+        if (node !== this.start && node !== this.end) this.cellEls[node].classList.add("visited");
+      }
+      if (result.path) {
+        for (const node of result.path) {
+          if (node !== this.start && node !== this.end) this.cellEls[node].classList.add("path");
+        }
+      }
+      this.updateMetrics({ ...result, elapsed });
+    }
+
+    /* ---------- Mazes ---------- */
+    generateMaze() {
+      if (this.isRunning) return;
+      this.cancelRun();
+      this.buildGrid(this.dom.gridSize.value);
+      const type = this.dom.mazeType.value;
+
+      if (type === "division") {
+        this.recursiveDivision(0, 0, this.cols, this.rows);
+        this.setStatus("Recursive division maze built.");
+      } else if (type === "scatter") {
+        for (let i = 0; i < this.walls.length; i++) {
+          if (i !== this.start && i !== this.end && Math.random() < 0.28) this.walls[i] = 1;
+        }
+        this.setStatus("Random scatter field built.");
+      } else {
+        for (let i = 0; i < this.weights.length; i++) {
+          if (i !== this.start && i !== this.end && Math.random() < 0.3) this.weights[i] = WEIGHT_COST;
+        }
+        this.setStatus("Weighted terrain built — try Dijkstra vs A*.");
+      }
+
+      this.cellEls.forEach((el, i) => {
+        el.classList.toggle("wall", this.walls[i] === 1);
+        el.classList.toggle("weight", this.weights[i] > 1);
+      });
+    }
+
+    recursiveDivision(x, y, width, height) {
+      if (width < 3 || height < 3) return;
+
+      // Walls live on odd global rows/cols, gaps on even ones — a gap can
+      // never be covered by a later perpendicular wall, so the maze stays
+      // fully connected.
+      const pick = (list) => list[Math.floor(Math.random() * list.length)];
+      const horizontal = height > width || (height === width && Math.random() < 0.5);
+
+      if (horizontal) {
+        const wallRows = [];
+        for (let r = y + 1; r < y + height - 1; r++) if (r % 2 === 1) wallRows.push(r);
+        const gapCols = [];
+        for (let c = x; c < x + width; c++) if (c % 2 === 0) gapCols.push(c);
+        if (wallRows.length === 0 || gapCols.length === 0) return;
+        const wallRow = pick(wallRows);
+        const gapCol = pick(gapCols);
+        for (let c = x; c < x + width; c++) {
+          const i = this.index(wallRow, c);
+          if (c !== gapCol && i !== this.start && i !== this.end) this.walls[i] = 1;
+        }
+        this.recursiveDivision(x, y, width, wallRow - y);
+        this.recursiveDivision(x, wallRow + 1, width, y + height - wallRow - 1);
+      } else {
+        const wallCols = [];
+        for (let c = x + 1; c < x + width - 1; c++) if (c % 2 === 1) wallCols.push(c);
+        const gapRows = [];
+        for (let r = y; r < y + height; r++) if (r % 2 === 0) gapRows.push(r);
+        if (wallCols.length === 0 || gapRows.length === 0) return;
+        const wallCol = pick(wallCols);
+        const gapRow = pick(gapRows);
+        for (let r = y; r < y + height; r++) {
+          const i = this.index(r, wallCol);
+          if (r !== gapRow && i !== this.start && i !== this.end) this.walls[i] = 1;
+        }
+        this.recursiveDivision(x, y, wallCol - x, height);
+        this.recursiveDivision(wallCol + 1, y, x + width - wallCol - 1, height);
+      }
+    }
+
+    /* ---------- UI panels ---------- */
+    renderProfile() {
+      const profile = PATH_ALGORITHMS[this.dom.algorithm.value];
+      this.dom.profile.innerHTML = `
+        <h2 class="panel-title">${profile.name}</h2>
+        <p class="panel-sub">${profile.description}</p>
+        <div class="pf-profile-facts">
+          <span class="pf-fact ${profile.guarantee.startsWith("Shortest") ? "good" : "warn"}">${profile.guarantee}</span>
+          <span class="pf-fact">${profile.complexity}</span>
+          <span class="pf-fact">${profile.weighted ? "Respects weights" : "Ignores weights"}</span>
+        </div>`;
+    }
+
+    updateMetrics(result) {
+      if (!result) {
+        this.dom.metrics.innerHTML = "";
+        return;
+      }
+      const items = [
+        ["Visited", result.visited.length],
+        ["Path steps", result.path ? result.path.length - 1 : "—"],
+        ["Path cost", result.path ? result.cost.toFixed(1) : "—"],
+        ["Compute", `${result.elapsed.toFixed(2)} ms`],
+      ];
+      this.dom.metrics.innerHTML = items
+        .map(([label, value]) => `<span class="metric"><strong>${value}</strong> ${label}</span>`)
+        .join("");
+    }
+
+    setStatus(text) {
+      this.dom.status.textContent = text;
+    }
+  }
+
+  /* ---------- Mode switching (Sorting ⇄ Pathfinding) ---------- */
+  const MODE_KEY = "algoLabMode";
+
+  function setMode(mode, { persist = true } = {}) {
+    const isPath = mode === "path";
+    document.body.dataset.mode = isPath ? "path" : "sort";
+    $("sortWorkspace").hidden = isPath;
+    $("pathWorkspace").hidden = !isPath;
+    $("modeSortBtn").classList.toggle("active", !isPath);
+    $("modeSortBtn").setAttribute("aria-selected", String(!isPath));
+    $("modePathBtn").classList.toggle("active", isPath);
+    $("modePathBtn").setAttribute("aria-selected", String(isPath));
+    const sub = document.querySelector(".brand-sub");
+    if (sub) sub.textContent = isPath ? "Pathfinding Visualizer" : "Sorting Algorithm Visualizer";
+    if (persist) {
+      try {
+        localStorage.setItem(MODE_KEY, isPath ? "path" : "sort");
+      } catch (_) {
+        /* private browsing */
+      }
+    }
+  }
+
+  $("modeSortBtn").addEventListener("click", () => setMode("sort"));
+  $("modePathBtn").addEventListener("click", () => setMode("path"));
+
+  const urlMode = new URLSearchParams(window.location.search).get("mode");
+  let savedMode = null;
+  try {
+    savedMode = localStorage.getItem(MODE_KEY);
+  } catch (_) {
+    /* private browsing */
+  }
+  setMode(urlMode || savedMode || "sort", { persist: false });
+
+  window.pathLab = new PathLabApp();
+})();
diff --git a/script.js b/script.js
index 9894edc..faf037d 100644
--- a/script.js
+++ b/script.js
@@ -1365,6 +1365,7 @@ class SortLabApp {
   }
 
   handleKeyboard(e) {
+    if (document.body.dataset.mode === "path") return;
     if (e.code === "Escape" && this.presentationActive) {
       e.preventDefault();
       this.exitPresentation();
diff --git a/style.css b/style.css
index 99d5ad0..91deb28 100644
--- a/style.css
+++ b/style.css
@@ -181,6 +181,10 @@ body {
   align-items: start;
 }
 
+.workspace[hidden] {
+  display: none;
+}
+
 .sidebar {
   display: flex;
   flex-direction: column;
@@ -1112,4 +1116,186 @@ body.presentation-active {
     flex-direction: column;
     align-items: flex-start;
   }
-}
\ No newline at end of file
+}
+/* ============================================================
+   Path Lab — pathfinding mode
+   ============================================================ */
+
+.mode-tabs {
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  background: var(--secondary);
+  border-radius: 999px;
+}
+
+.mode-tab {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 7px 18px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.mode-tab:hover {
+  color: var(--text);
+}
+
+.mode-tab.active {
+  background: var(--surface);
+  color: var(--primary);
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
+}
+
+.pf-grid-wrap {
+  padding: 14px;
+  overflow-x: auto;
+}
+
+.pf-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--pf-cols, 37), 1fr);
+  gap: 1px;
+  background: var(--border);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  min-width: 480px;
+}
+
+.pf-cell {
+  aspect-ratio: 1;
+  background: var(--surface);
+  position: relative;
+  cursor: crosshair;
+}
+
+.pf-cell.weight {
+  background: radial-gradient(circle at center, var(--bar-gap) 0 28%, var(--surface) 34%);
+}
+
+.pf-cell.wall {
+  background: var(--text);
+  animation: pf-pop 0.18s ease;
+}
+
+.pf-cell.visited {
+  background: var(--bar-digit);
+  animation: pf-visit 0.5s ease;
+}
+
+.pf-cell.weight.visited {
+  background: radial-gradient(circle at center, var(--bar-gap) 0 28%, var(--bar-digit) 34%);
+}
+
+.pf-cell.path {
+  background: var(--bar-compare);
+  animation: pf-pop 0.3s ease;
+}
+
+.pf-cell.weight.path {
+  background: radial-gradient(circle at center, var(--bar-gap) 0 28%, var(--bar-compare) 34%);
+}
+
+.pf-cell.start,
+.pf-cell.end {
+  cursor: grab;
+}
+
+.pf-cell.start {
+  background: var(--bar-sorted) !important;
+}
+
+.pf-cell.end {
+  background: var(--bar-swap) !important;
+}
+
+.pf-cell.start::after,
+.pf-cell.end::after {
+  content: "";
+  position: absolute;
+  inset: 28%;
+  border-radius: 50%;
+  background: var(--surface);
+  opacity: 0.85;
+}
+
+.pf-grid.instant .pf-cell {
+  animation: none;
+  transition: none;
+}
+
+@keyframes pf-visit {
+  0% {
+    transform: scale(0.4);
+    border-radius: 50%;
+    background: var(--accent);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+    border-radius: 0;
+  }
+}
+
+@keyframes pf-pop {
+  0% {
+    transform: scale(0.5);
+  }
+  70% {
+    transform: scale(1.12);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pf-profile-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.pf-fact {
+  font-size: 0.72rem;
+  font-family: var(--font-mono);
+  padding: 4px 9px;
+  border-radius: 999px;
+  background: var(--secondary);
+  color: var(--text-muted);
+}
+
+.pf-fact.good {
+  background: color-mix(in srgb, var(--bar-sorted) 18%, transparent);
+  color: var(--bar-sorted);
+}
+
+.pf-fact.warn {
+  background: color-mix(in srgb, var(--bar-compare) 20%, transparent);
+  color: var(--bar-gap);
+}
+
+.swatch.pf-start { background: var(--bar-sorted); }
+.swatch.pf-end { background: var(--bar-swap); }
+.swatch.pf-wall { background: var(--text); }
+.swatch.pf-weight { background: radial-gradient(circle at center, var(--bar-gap) 0 32%, var(--surface) 40%); border: 1px solid var(--border); }
+.swatch.pf-visited { background: var(--bar-digit); }
+.swatch.pf-path { background: var(--bar-compare); }
+
+@media (max-width: 640px) {
+  .mode-tabs {
+    order: 3;
+    width: 100%;
+    justify-content: center;
+  }
+}
diff --git a/sw.js b/sw.js
index c0d1292..f51c986 100644
--- a/sw.js
+++ b/sw.js
@@ -1,10 +1,11 @@
-/* Sort Lab — Service Worker v3 */
-const CACHE_NAME = "sort-lab-v3";
+/* Algorithm Lab — Service Worker v4 */
+const CACHE_NAME = "algorithm-lab-v4";
 const ASSETS = [
   "./",
   "./index.html",
   "./style.css",
   "./script.js",
+  "./pathfinding.js",
   "./manifest.json",
 ];