diff --git a/src/lib/chess.js b/src/lib/chess.js
new file mode 100644
index 0000000..40f3edc
--- /dev/null
+++ b/src/lib/chess.js
@@ -0,0 +1,344 @@
+export const PIECES = {
+  wK: '/icons/wK.svg', wQ: '/icons/wQ.svg', wR: '/icons/wR.svg', wB: '/icons/wB.svg', wN: '/icons/wN.svg', wP: '/icons/wP.svg',
+  bK: '/icons/bK.svg', bQ: '/icons/bQ.svg', bR: '/icons/bR.svg', bB: '/icons/bB.svg', bN: '/icons/bN.svg', bP: '/icons/bP.svg'
+};
+
+export const INIT = [
+  ['bR','bN','bB','bQ','bK','bB','bN','bR'],
+  ['bP','bP','bP','bP','bP','bP','bP','bP'],
+  [null,null,null,null,null,null,null,null],
+  [null,null,null,null,null,null,null,null],
+  [null,null,null,null,null,null,null,null],
+  [null,null,null,null,null,null,null,null],
+  ['wP','wP','wP','wP','wP','wP','wP','wP'],
+  ['wR','wN','wB','wQ','wK','wB','wN','wR'],
+];
+
+export function deepClone(b) {
+  return b.map(r => [...r]);
+}
+
+export function createInitialPieceIds() {
+  let ids = [];
+  let count = 0;
+  for (let r = 0; r < 8; r++) {
+    let row = [];
+    for (let c = 0; c < 8; c++) {
+      if (INIT[r][c]) {
+        row.push(`piece-${INIT[r][c]}-${count++}`);
+      } else {
+        row.push(null);
+      }
+    }
+    ids.push(row);
+  }
+  return ids;
+}
+
+export function buildTree(moves) {
+  let root = { move: null, children: [], note: null };
+  let cur = root;
+  for (let m of moves) {
+    let node = { move: m.san, children: [], note: m.note || null };
+    cur.children.push(node);
+    cur = node;
+  }
+  return root;
+}
+
+export function walkTree(tree, moves) {
+  let cur = tree;
+  for (let m of moves) {
+    let child = cur.children.find(c => c.move === m);
+    if (!child) return null;
+    cur = child;
+  }
+  return cur;
+}
+
+export function getNoteForHistory(historyPrefix, customNotes, currentRep, currentRepertoireObj) {
+  let line = historyPrefix.join(' ');
+
+  if (customNotes[currentRep] && customNotes[currentRep][line] !== undefined) {
+    return customNotes[currentRep][line];
+  }
+  for (let op of currentRepertoireObj.openings) {
+    let opMoves = op.pgn.split(' ').filter(Boolean);
+    if (opMoves.slice(0, historyPrefix.length).join(' ') === line) {
+      let node = walkTree(op.tree, historyPrefix);
+      if (node && node.note) {
+        return node.note;
+      }
+    }
+  }
+  return null;
+}
+
+export function buildTreePreservingNotes(historyMoves, oldTree, customNotes, currentRep, currentRepertoireObj) {
+  let root = { move: null, children: [], note: null };
+  let cur = root;
+  
+  for (let i = 0; i < historyMoves.length; i++) {
+    let m = historyMoves[i];
+    let prefix = historyMoves.slice(0, i + 1);
+    
+    let existingNote = null;
+    if (oldTree) {
+      let node = walkTree(oldTree, prefix);
+      if (node && node.note) {
+        existingNote = node.note;
+      }
+    }
+    
+    if (!existingNote) {
+      existingNote = getNoteForHistory(prefix, customNotes, currentRep, currentRepertoireObj);
+    }
+    
+    let node = { move: m, children: [], note: existingNote };
+    cur.children.push(node);
+    cur = node;
+  }
+  return root;
+}
+
+export function getBoardSignature(b, t) {
+  let pieces = [];
+  for (let r = 0; r < 8; r++) {
+    for (let c = 0; c < 8; c++) {
+      pieces.push(b[r][c] || '.');
+    }
+  }
+  return pieces.join(',') + ' ' + t;
+}
+
+export function getMoves(board, r, c) {
+  let p = board[r][c];
+  if (!p) return [];
+  let color = p[0], type = p[1];
+  let moves = [];
+  function inBounds(r,c){return r>=0&&r<8&&c>=0&&c<8;}
+  function friendly(r,c){return inBounds(r,c)&&board[r][c]&&board[r][c][0]===color;}
+  function enemy(r,c){return inBounds(r,c)&&board[r][c]&&board[r][c][0]!==color;}
+  function empty(r,c){return inBounds(r,c)&&!board[r][c];}
+  function slide(dirs){for(let [dr,dc] of dirs){let nr=r+dr,nc=c+dc;while(inBounds(nr,nc)){if(friendly(nr,nc))break;moves.push([nr,nc]);if(board[nr][nc])break;nr+=dr;nc+=dc;}}}
+  function jump(drs){for(let [dr,dc] of drs){let nr=r+dr,nc=c+dc;if(inBounds(nr,nc)&&!friendly(nr,nc))moves.push([nr,nc]);}}
+  if(type==='R')slide([[1,0],[-1,0],[0,1],[0,-1]]);
+  else if(type==='B')slide([[1,1],[1,-1],[-1,1],[-1,-1]]);
+  else if(type==='Q')slide([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
+  else if(type==='N')jump([[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2],[-1,-2]]);
+  else if(type==='K')jump([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
+  else if(type==='P'){
+    let dir=color==='w'?-1:1, start=color==='w'?6:1;
+    if(empty(r+dir,c)){moves.push([r+dir,c]);if(r===start&&empty(r+2*dir,c))moves.push([r+2*dir,c]);}
+    if(enemy(r+dir,c-1))moves.push([r+dir,c-1]);
+    if(enemy(r+dir,c+1))moves.push([r+dir,c+1]);
+  }
+  return moves;
+}
+
+export function moveToSAN(board, fr, fc, tr, tc) {
+  let p = board[fr][fc];
+  let type = p[1];
+  let files='abcdefgh', target=files[tc]+(8-tr);
+  let capture = board[tr][tc] ? 'x':'';
+  if(type==='P') return capture ? files[fc]+'x'+target : target;
+  if(type==='K') return 'K'+capture+target;
+  return type+capture+target;
+}
+
+export function playMoveOnBoard(b, t, san) {
+  for (let r = 0; r < 8; r++) {
+    for (let c = 0; c < 8; c++) {
+      let p = b[r][c];
+      if (!p || p[0] !== t) continue;
+      let moves = getMoves(b, r, c);
+      for (let [tr, tc] of moves) {
+        if (moveToSAN(b, r, c, tr, tc) === san) {
+          b[tr][tc] = p;
+          b[r][c] = null;
+          if (p[1] === 'P' && (tr === 0 || tr === 7)) {
+            b[tr][tc] = p[0] + 'Q';
+          }
+          return true;
+        }
+      }
+    }
+  }
+  return false;
+}
+
+export function getBoardSignaturesForOpening(op) {
+  let tempBoard = deepClone(INIT);
+  let tempTurn = 'w';
+  let signatures = [];
+  
+  signatures.push({
+    signature: getBoardSignature(tempBoard, tempTurn),
+    history: []
+  });
+  
+  let moves = op.pgn.split(' ').filter(Boolean);
+  for (let i = 0; i < moves.length; i++) {
+    let san = moves[i];
+    let moved = playMoveOnBoard(tempBoard, tempTurn, san);
+    if (!moved) break;
+    tempTurn = tempTurn === 'w' ? 'b' : 'w';
+    signatures.push({
+      signature: getBoardSignature(tempBoard, tempTurn),
+      history: moves.slice(0, i + 1)
+    });
+  }
+  return signatures;
+}
+
+export function getLegalMovesForTurn(board, turn) {
+  let legal = [];
+  for (let r = 0; r < 8; r++) {
+    for (let c = 0; c < 8; c++) {
+      let p = board[r][c];
+      if (!p || p[0] !== turn) continue;
+      let moves = getMoves(board, r, c);
+      for (let [tr, tc] of moves) {
+        let san = moveToSAN(board, r, c, tr, tc);
+        legal.push({
+          san: san,
+          fr: r,
+          fc: c,
+          tr: tr,
+          tc: tc
+        });
+      }
+    }
+  }
+  return legal;
+}
+
+export function canonicalize(str) {
+  let text = str.toLowerCase().trim();
+  
+  // Replace spoken numbers
+  text = text
+    .replace(/\bone\b/g, '1')
+    .replace(/\btwo\b/g, '2')
+    .replace(/\bthree\b/g, '3')
+    .replace(/\bfour\b/g, '4')
+    .replace(/\bfor\b/g, '4')
+    .replace(/\bfive\b/g, '5')
+    .replace(/\bsix\b/g, '6')
+    .replace(/\bseven\b/g, '7')
+    .replace(/\beight\b/g, '8')
+    .replace(/\bate\b/g, '8');
+    
+  // Replace spoken letters/files
+  text = text
+    .replace(/\bsee\b/g, 'c')
+    .replace(/\bsea\b/g, 'c')
+    .replace(/\bbe\b/g, 'b')
+    .replace(/\bbee\b/g, 'b')
+    .replace(/\bgee\b/g, 'g')
+    .replace(/\beff\b/g, 'f')
+    .replace(/\baye\b/g, 'a')
+    .replace(/\bay\b/g, 'a');
+
+  // Replace misheard words
+  text = text
+    .replace(/\bbefore\b/g, 'b4')
+    .replace(/\bdetour\b/g, 'd4')
+    .replace(/\bdeeply\b/g, 'd3')
+    .replace(/\bdefended\b/g, 'd5');
+    
+  // Standard piece mapping
+  text = text
+    .replace(/knight/g, 'n')
+    .replace(/night/g, 'n')
+    .replace(/bishop/g, 'b')
+    .replace(/rook/g, 'r')
+    .replace(/queen/g, 'q')
+    .replace(/king/g, 'k')
+    .replace(/pawn/g, '');
+
+  // Replace e.g. "d to" -> "d2", then strip remaining "to"
+  text = text.replace(/([a-h])\s+to\b/g, '$12');
+
+  // Movement/capture words
+  text = text
+    .replace(/\bto\b/g, '')
+    .replace(/\bthe\b/g, '')
+    .replace(/\bmove\b/g, '')
+    .replace(/\bplay\b/g, '')
+    .replace(/\bsquare\b/g, '')
+    .replace(/takes/g, 'x')
+    .replace(/take/g, 'x')
+    .replace(/captures/g, 'x')
+    .replace(/capture/g, 'x');
+
+  // Strip spaces and all non-alphanumeric characters
+  return text.replace(/[^a-z0-9]/g, '');
+}
+
+export function getSpokenPatternsForMove(san, fr, fc, tr, tc) {
+  let clean = san.replace(/[+#]/g, '');
+  let canon = canonicalize(clean);
+  let patterns = [canon];
+  
+  // Add coordinate patterns
+  let files = 'abcdefgh';
+  let startSquare = files[fc] + (8 - fr);
+  let targetSquare = files[tc] + (8 - tr);
+  patterns.push(startSquare + targetSquare); // e.g. "e2e4"
+  
+  if (clean === 'O-O') {
+    patterns.push('oo', 'castle', 'castles', 'shortcastle', 'kingsidecastle', 'castlekingside');
+  } else if (clean === 'O-O-O') {
+    patterns.push('ooo', 'longcastle', 'queensidecastle', 'castlequeenside');
+  }
+  
+  if (clean.includes('=')) {
+    patterns.push(canonicalize(clean.replace('=', '')));
+  }
+  
+  if (clean.includes('x')) {
+    patterns.push(canonicalize(clean.replace('x', '')));
+  }
+  
+  return patterns;
+}
+
+export function determineParentId(pgnStr, openings) {
+  let moves = pgnStr.split(' ').filter(Boolean);
+  let longestMatchLength = 0;
+  let bestParentId = null;
+  
+  for (let op of openings) {
+    let opMoves = op.pgn.split(' ').filter(Boolean);
+    if (opMoves.length > 0 && opMoves.length < moves.length) {
+      let isPrefix = true;
+      for (let i = 0; i < opMoves.length; i++) {
+        if (opMoves[i] !== moves[i]) {
+          isPrefix = false;
+          break;
+        }
+      }
+      if (isPrefix && opMoves.length > longestMatchLength) {
+        longestMatchLength = opMoves.length;
+        bestParentId = op.id;
+      }
+    }
+  }
+  return bestParentId;
+}
+
+export function validateAndReplayMoves(movesArray) {
+  let tempBoard = deepClone(INIT);
+  let tempTurn = 'w';
+  
+  for (let i = 0; i < movesArray.length; i++) {
+    let san = movesArray[i];
+    let moved = playMoveOnBoard(tempBoard, tempTurn, san);
+    if (!moved) {
+      return { valid: false, error: `Move ${i+1} (${san}) is illegal in this position.` };
+    }
+    tempTurn = tempTurn === 'w' ? 'b' : 'w';
+  }
+  return { valid: true };
+}
diff --git a/src/lib/index.js b/src/lib/index.js
index 856f2b6..004ff81 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+export * from './chess.js';
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0f93bcf..501e354 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,153 +1,25 @@
 <script>
   import { fade, slide, scale } from 'svelte/transition';
   import { onDestroy } from 'svelte';
-
-  const PIECES = {
-    wK: '/icons/wK.svg', wQ: '/icons/wQ.svg', wR: '/icons/wR.svg', wB: '/icons/wB.svg', wN: '/icons/wN.svg', wP: '/icons/wP.svg',
-    bK: '/icons/bK.svg', bQ: '/icons/bQ.svg', bR: '/icons/bR.svg', bB: '/icons/bB.svg', bN: '/icons/bN.svg', bP: '/icons/bP.svg'
-  };
-
-  const INIT = [
-    ['bR','bN','bB','bQ','bK','bB','bN','bR'],
-    ['bP','bP','bP','bP','bP','bP','bP','bP'],
-    [null,null,null,null,null,null,null,null],
-    [null,null,null,null,null,null,null,null],
-    [null,null,null,null,null,null,null,null],
-    [null,null,null,null,null,null,null,null],
-    ['wP','wP','wP','wP','wP','wP','wP','wP'],
-    ['wR','wN','wB','wQ','wK','wB','wN','wR'],
-  ];
-
-  function deepClone(b) {
-    return b.map(r => [...r]);
-  }
-
-  function createInitialPieceIds() {
-    let ids = [];
-    let count = 0;
-    for (let r = 0; r < 8; r++) {
-      let row = [];
-      for (let c = 0; c < 8; c++) {
-        if (INIT[r][c]) {
-          row.push(`piece-${INIT[r][c]}-${count++}`);
-        } else {
-          row.push(null);
-        }
-      }
-      ids.push(row);
-    }
-    return ids;
-  }
-
-  function buildTree(moves) {
-    let root = { move: null, children: [], note: null };
-    let cur = root;
-    for (let m of moves) {
-      let node = { move: m.san, children: [], note: m.note || null };
-      cur.children.push(node);
-      cur = node;
-    }
-    return root;
-  }
-
-  function getNoteForHistory(historyPrefix) {
-    let line = historyPrefix.join(' ');
-    if (customNotes[currentRep] && customNotes[currentRep][line] !== undefined) {
-      return customNotes[currentRep][line];
-    }
-    for (let op of currentRepertoireObj.openings) {
-      let opMoves = op.pgn.split(' ').filter(Boolean);
-      if (opMoves.slice(0, historyPrefix.length).join(' ') === line) {
-        let node = walkTree(op.tree, historyPrefix);
-        if (node && node.note) {
-          return node.note;
-        }
-      }
-    }
-    return null;
-  }
-
-  function buildTreePreservingNotes(historyMoves, oldTree) {
-    let root = { move: null, children: [], note: null };
-    let cur = root;
-    
-    for (let i = 0; i < historyMoves.length; i++) {
-      let m = historyMoves[i];
-      let prefix = historyMoves.slice(0, i + 1);
-      
-      let existingNote = null;
-      if (oldTree) {
-        let node = walkTree(oldTree, prefix);
-        if (node && node.note) {
-          existingNote = node.note;
-        }
-      }
-      
-      if (!existingNote) {
-        existingNote = getNoteForHistory(prefix);
-      }
-      
-      let node = { move: m, children: [], note: existingNote };
-      cur.children.push(node);
-      cur = node;
-    }
-    return root;
-  }
-
-  function getBoardSignature(b, t) {
-    let pieces = [];
-    for (let r = 0; r < 8; r++) {
-      for (let c = 0; c < 8; c++) {
-        pieces.push(b[r][c] || '.');
-      }
-    }
-    return pieces.join(',') + ' ' + t;
-  }
-
-  function playMoveOnBoard(b, t, san) {
-    for (let r = 0; r < 8; r++) {
-      for (let c = 0; c < 8; c++) {
-        let p = b[r][c];
-        if (!p || p[0] !== t) continue;
-        let moves = getMoves(b, r, c);
-        for (let [tr, tc] of moves) {
-          if (moveToSAN(b, r, c, tr, tc) === san) {
-            b[tr][tc] = p;
-            b[r][c] = null;
-            if (p[1] === 'P' && (tr === 0 || tr === 7)) {
-              b[tr][tc] = p[0] + 'Q';
-            }
-            return true;
-          }
-        }
-      }
-    }
-    return false;
-  }
-
-  function getBoardSignaturesForOpening(op) {
-    let tempBoard = deepClone(INIT);
-    let tempTurn = 'w';
-    let signatures = [];
-    
-    signatures.push({
-      signature: getBoardSignature(tempBoard, tempTurn),
-      history: []
-    });
-    
-    let moves = op.pgn.split(' ').filter(Boolean);
-    for (let i = 0; i < moves.length; i++) {
-      let san = moves[i];
-      let moved = playMoveOnBoard(tempBoard, tempTurn, san);
-      if (!moved) break;
-      tempTurn = tempTurn === 'w' ? 'b' : 'w';
-      signatures.push({
-        signature: getBoardSignature(tempBoard, tempTurn),
-        history: moves.slice(0, i + 1)
-      });
-    }
-    return signatures;
-  }
+  import {
+    PIECES,
+    INIT,
+    deepClone,
+    createInitialPieceIds,
+    buildTree,
+    walkTree,
+    getNoteForHistory,
+    buildTreePreservingNotes,
+    getBoardSignature,
+    getBoardSignaturesForOpening,
+    getMoves,
+    moveToSAN,
+    getLegalMovesForTurn,
+    canonicalize,
+    getSpokenPatternsForMove,
+    determineParentId,
+    validateAndReplayMoves
+  } from '$lib';
 
   // Reactive State (Svelte 5 Runes)
   let board = $state(deepClone(INIT));
@@ -445,7 +317,7 @@
     if (list.length === 0) return 0;
     let withNotes = list.filter(op => {
       let moves = op.pgn.split(' ').filter(Boolean);
-      let note = getNoteForHistory(moves);
+      let note = getNoteForHistory(moves, customNotes, currentRep, currentRepertoireObj);
       return note && note.trim().length > 0;
     }).length;
     return Math.min(100, Math.round((withNotes / list.length) * 100)) || 35;
@@ -503,51 +375,6 @@
     return true;
   }
 
-  function walkTree(tree, moves) {
-    let cur = tree;
-    for (let m of moves) {
-      let child = cur.children.find(c => c.move === m);
-      if (!child) return null;
-      cur = child;
-    }
-    return cur;
-  }
-
-  function getMoves(board, r, c) {
-    let p = board[r][c];
-    if (!p) return [];
-    let color = p[0], type = p[1];
-    let moves = [];
-    function inBounds(r,c){return r>=0&&r<8&&c>=0&&c<8;}
-    function friendly(r,c){return inBounds(r,c)&&board[r][c]&&board[r][c][0]===color;}
-    function enemy(r,c){return inBounds(r,c)&&board[r][c]&&board[r][c][0]!==color;}
-    function empty(r,c){return inBounds(r,c)&&!board[r][c];}
-    function slide(dirs){for(let [dr,dc] of dirs){let nr=r+dr,nc=c+dc;while(inBounds(nr,nc)){if(friendly(nr,nc))break;moves.push([nr,nc]);if(board[nr][nc])break;nr+=dr;nc+=dc;}}}
-    function jump(drs){for(let [dr,dc] of drs){let nr=r+dr,nc=c+dc;if(inBounds(nr,nc)&&!friendly(nr,nc))moves.push([nr,nc]);}}
-    if(type==='R')slide([[1,0],[-1,0],[0,1],[0,-1]]);
-    else if(type==='B')slide([[1,1],[1,-1],[-1,1],[-1,-1]]);
-    else if(type==='Q')slide([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
-    else if(type==='N')jump([[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2],[-1,-2]]);
-    else if(type==='K')jump([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
-    else if(type==='P'){
-      let dir=color==='w'?-1:1, start=color==='w'?6:1;
-      if(empty(r+dir,c)){moves.push([r+dir,c]);if(r===start&&empty(r+2*dir,c))moves.push([r+2*dir,c]);}
-      if(enemy(r+dir,c-1))moves.push([r+dir,c-1]);
-      if(enemy(r+dir,c+1))moves.push([r+dir,c+1]);
-    }
-    return moves;
-  }
-
-  function moveToSAN(board, fr, fc, tr, tc) {
-    let p = board[fr][fc];
-    let type = p[1];
-    let files='abcdefgh', target=files[tc]+(8-tr);
-    let capture = board[tr][tc] ? 'x':'';
-    if(type==='P') return capture ? files[fc]+'x'+target : target;
-    if(type==='K') return 'K'+capture+target;
-    return type+capture+target;
-  }
-
   function onSquareClick(r, c) {
     if (drillMode) { handleDrillClick(r, c); return; }
     let p = board[r][c];
@@ -707,120 +534,6 @@
     highlights = [];
   }
 
-  // Voice Mode Functions
-  function canonicalize(str) {
-    let text = str.toLowerCase().trim();
-    
-    // Replace spoken numbers
-    text = text
-      .replace(/\bone\b/g, '1')
-      .replace(/\btwo\b/g, '2')
-      .replace(/\bthree\b/g, '3')
-      .replace(/\bfour\b/g, '4')
-      .replace(/\bfor\b/g, '4')
-      .replace(/\bfive\b/g, '5')
-      .replace(/\bsix\b/g, '6')
-      .replace(/\bseven\b/g, '7')
-      .replace(/\beight\b/g, '8')
-      .replace(/\bate\b/g, '8');
-      
-    // Replace spoken letters/files
-    text = text
-      .replace(/\bsee\b/g, 'c')
-      .replace(/\bsea\b/g, 'c')
-      .replace(/\bbe\b/g, 'b')
-      .replace(/\bbee\b/g, 'b')
-      .replace(/\bgee\b/g, 'g')
-      .replace(/\beff\b/g, 'f')
-      .replace(/\baye\b/g, 'a')
-      .replace(/\bay\b/g, 'a');
-
-    // Replace misheard words
-    text = text
-      .replace(/\bbefore\b/g, 'b4')
-      .replace(/\bdetour\b/g, 'd4')
-      .replace(/\bdeeply\b/g, 'd3')
-      .replace(/\bdefended\b/g, 'd5');
-      
-    // Standard piece mapping
-    text = text
-      .replace(/knight/g, 'n')
-      .replace(/night/g, 'n')
-      .replace(/bishop/g, 'b')
-      .replace(/rook/g, 'r')
-      .replace(/queen/g, 'q')
-      .replace(/king/g, 'k')
-      .replace(/pawn/g, '');
-
-    // Replace e.g. "d to" -> "d2", then strip remaining "to"
-    text = text.replace(/([a-h])\s+to\b/g, '$12');
-
-    // Movement/capture words
-    text = text
-      .replace(/\bto\b/g, '')
-      .replace(/\bthe\b/g, '')
-      .replace(/\bmove\b/g, '')
-      .replace(/\bplay\b/g, '')
-      .replace(/\bsquare\b/g, '')
-      .replace(/takes/g, 'x')
-      .replace(/take/g, 'x')
-      .replace(/captures/g, 'x')
-      .replace(/capture/g, 'x');
-
-    // Strip spaces and all non-alphanumeric characters
-    return text.replace(/[^a-z0-9]/g, '');
-  }
-
-  function getSpokenPatternsForMove(san, fr, fc, tr, tc) {
-    let clean = san.replace(/[+#]/g, '');
-    let canon = canonicalize(clean);
-    let patterns = [canon];
-    
-    // Add coordinate patterns
-    let files = 'abcdefgh';
-    let startSquare = files[fc] + (8 - fr);
-    let targetSquare = files[tc] + (8 - tr);
-    patterns.push(startSquare + targetSquare); // e.g. "e2e4"
-    
-    if (clean === 'O-O') {
-      patterns.push('oo', 'castle', 'castles', 'shortcastle', 'kingsidecastle', 'castlekingside');
-    } else if (clean === 'O-O-O') {
-      patterns.push('ooo', 'longcastle', 'queensidecastle', 'castlequeenside');
-    }
-    
-    if (clean.includes('=')) {
-      patterns.push(canonicalize(clean.replace('=', '')));
-    }
-    
-    if (clean.includes('x')) {
-      patterns.push(canonicalize(clean.replace('x', '')));
-    }
-    
-    return patterns;
-  }
-
-  function getLegalMovesForTurn() {
-    let legal = [];
-    for (let r = 0; r < 8; r++) {
-      for (let c = 0; c < 8; c++) {
-        let p = board[r][c];
-        if (!p || p[0] !== turn) continue;
-        let moves = getMoves(board, r, c);
-        for (let [tr, tc] of moves) {
-          let san = moveToSAN(board, r, c, tr, tc);
-          legal.push({
-            san: san,
-            fr: r,
-            fc: c,
-            tr: tr,
-            tc: tc
-          });
-        }
-      }
-    }
-    return legal;
-  }
-
   function executeMove(bestMatch) {
     if (drillMode) {
       let expected = drillLine[drillStep];
@@ -860,7 +573,7 @@
 
   function processSpokenMove(text) {
     let canonSpoken = canonicalize(text);
-    let legalMoves = getLegalMovesForTurn();
+    let legalMoves = getLegalMovesForTurn(board, turn);
     
     let matches = [];
     for (let m of legalMoves) {
@@ -972,7 +685,7 @@
     let op = currentRepertoireObj.openings.find(o => o.id === activeOpeningId);
     if (!op) return;
     op.pgn = history.join(' ');
-    op.tree = buildTreePreservingNotes(history, op.tree);
+    op.tree = buildTreePreservingNotes(history, op.tree, customNotes, currentRep, currentRepertoireObj);
     repertoires[currentRep].openings = [...repertoires[currentRep].openings];
     saveSuccess = true;
     setTimeout(() => { saveSuccess = false; }, 1200);
@@ -982,37 +695,13 @@
     let op = currentRepertoireObj.openings.find(o => o.id === parentId);
     if (!op) return;
     op.pgn = history.join(' ');
-    op.tree = buildTreePreservingNotes(history, op.tree);
+    op.tree = buildTreePreservingNotes(history, op.tree, customNotes, currentRep, currentRepertoireObj);
     repertoires[currentRep].openings = [...repertoires[currentRep].openings];
     activeOpeningId = op.id;
     saveSuccess = true;
     setTimeout(() => { saveSuccess = false; }, 1200);
   }
 
-  function determineParentId(pgnStr, openings) {
-    let moves = pgnStr.split(' ').filter(Boolean);
-    let longestMatchLength = 0;
-    let bestParentId = null;
-    
-    for (let op of openings) {
-      let opMoves = op.pgn.split(' ').filter(Boolean);
-      if (opMoves.length > 0 && opMoves.length < moves.length) {
-        let isPrefix = true;
-        for (let i = 0; i < opMoves.length; i++) {
-          if (opMoves[i] !== moves[i]) {
-            isPrefix = false;
-            break;
-          }
-        }
-        if (isPrefix && opMoves.length > longestMatchLength) {
-          longestMatchLength = opMoves.length;
-          bestParentId = op.id;
-        }
-      }
-    }
-    return bestParentId;
-  }
-
   function addCurrentLine() {
     let lineStrVal = history.join(' ');
     if (!lineStrVal) return;
@@ -1035,7 +724,7 @@
       parentId: parentId,
       name: name,
       pgn: lineStrVal,
-      tree: buildTreePreservingNotes(history, null)
+      tree: buildTreePreservingNotes(history, null, customNotes, currentRep, currentRepertoireObj)
     };
     currentRepertoireObj.openings.push(newOp);
     repertoires[currentRep].openings = [...repertoires[currentRep].openings];
@@ -1066,7 +755,7 @@
       parentId: parentId,
       name: name, 
       pgn: pgn, 
-      tree: buildTreePreservingNotes(pgn.split(' ').filter(Boolean), parentOp ? parentOp.tree : null) 
+      tree: buildTreePreservingNotes(pgn.split(' ').filter(Boolean), parentOp ? parentOp.tree : null, customNotes, currentRep, currentRepertoireObj) 
     };
     currentRepertoireObj.openings.push(newOp);
     repertoires[currentRep].openings = [...repertoires[currentRep].openings];
@@ -1200,74 +889,6 @@
   let pgnEditVal = $state('');
   let pgnEditError = $state('');
 
-  function validateAndReplayMoves(movesArray) {
-    let tempBoard = deepClone(INIT);
-    let tempTurn = 'w';
-    
-    function getMovesForBoard(b, r, c) {
-      let p = b[r][c];
-      if (!p) return [];
-      let color = p[0], type = p[1];
-      let moves = [];
-      function inBounds(r,c){return r>=0&&r<8&&c>=0&&c<8;}
-      function friendly(r,c){return inBounds(r,c)&&b[r][c]&&b[r][c][0]===color;}
-      function enemy(r,c){return inBounds(r,c)&&b[r][c]&&b[r][c][0]!==color;}
-      function empty(r,c){return inBounds(r,c)&&!b[r][c];}
-      function slide(dirs){for(let [dr,dc] of dirs){let nr=r+dr,nc=c+dc;while(inBounds(nr,nc)){if(friendly(nr,nc))break;moves.push([nr,nc]);if(b[nr][nc])break;nr+=dr;nc+=dc;}}}
-      function jump(drs){for(let [dr,dc] of drs){let nr=r+dr,nc=c+dc;if(inBounds(nr,nc)&&!friendly(nr,nc))moves.push([nr,nc]);}}
-      if(type==='R')slide([[1,0],[-1,0],[0,1],[0,-1]]);
-      else if(type==='B')slide([[1,1],[1,-1],[-1,1],[-1,-1]]);
-      else if(type==='Q')slide([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
-      else if(type==='N')jump([[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2],[-1,-2]]);
-      else if(type==='K')jump([[1,0],[-1,0],[0,1],[0,-1],[1,1],[1,-1],[-1,1],[-1,-1]]);
-      else if(type==='P'){
-        let dir=color==='w'?-1:1, start=color==='w'?6:1;
-        if(empty(r+dir,c)){moves.push([r+dir,c]);if(r===start&&empty(r+2*dir,c))moves.push([r+2*dir,c]);}
-        if(enemy(r+dir,c-1))moves.push([r+dir,c-1]);
-        if(enemy(r+dir,c+1))moves.push([r+dir,c+1]);
-      }
-      return moves;
-    }
-    
-    function moveToSANForBoard(b, fr, fc, tr, tc) {
-      let p = b[fr][fc];
-      let type = p[1];
-      let files='abcdefgh', target=files[tc]+(8-tr);
-      let capture = b[tr][tc] ? 'x':'';
-      if(type==='P') return capture ? files[fc]+'x'+target : target;
-      if(type==='K') return 'K'+capture+target;
-      return type+capture+target;
-    }
-
-    for (let i = 0; i < movesArray.length; i++) {
-      let san = movesArray[i];
-      let moved = false;
-      outer: for (let r = 0; r < 8; r++) {
-        for (let c = 0; c < 8; c++) {
-          let p = tempBoard[r][c];
-          if (!p || p[0] !== tempTurn) continue;
-          let mvs = getMovesForBoard(tempBoard, r, c);
-          for (let [tr, tc] of mvs) {
-            if (moveToSANForBoard(tempBoard, r, c, tr, tc) === san) {
-              tempBoard[tr][tc] = p;
-              tempBoard[r][c] = null;
-              if (p[1] === 'P' && (tr === 0 || tr === 7)) {
-                tempBoard[tr][tc] = p[0] + 'Q';
-              }
-              tempTurn = tempTurn === 'w' ? 'b' : 'w';
-              moved = true;
-              break outer;
-            }
-          }
-        }
-      }
-      if (!moved) {
-        return { valid: false, error: `Move ${i+1} (${san}) is illegal in this position.` };
-      }
-    }
-    return { valid: true };
-  }
-
   function savePgnEdit() {
     let cleanPgn = pgnEditVal.trim().replace(/\s+/g, ' ');
     let moves = cleanPgn === '' ? [] : cleanPgn.split(' ');
@@ -1356,6 +977,51 @@
     moveTags[currentRep] = { ...moveTags[currentRep] };
   }
 
+  let contextMenu = $state({
+    show: false,
+    x: 0,
+    y: 0,
+    movePathStr: ''
+  });
+  let showNoteEdit = $state(false);
+
+  function openContextMenu(e, movePathStr) {
+    e.preventDefault();
+    e.stopPropagation();
+    contextMenu.x = e.clientX;
+    contextMenu.y = e.clientY;
+    contextMenu.movePathStr = movePathStr;
+    contextMenu.show = true;
+  }
+
+  function closeContextMenu() {
+    if (contextMenu.show) {
+      contextMenu.show = false;
+    }
+  }
+
+  function handleEditNoteFromContextMenu() {
+    let targetHistory = contextMenu.movePathStr.split(' ').filter(Boolean);
+    board = deepClone(INIT);
+    pieceIds = createInitialPieceIds();
+    turn = 'w';
+    lastMove = null;
+    for (let m of targetHistory) {
+      playMoveByHistory(m);
+    }
+    history = targetHistory;
+    selected = null;
+    highlights = [];
+    showNoteEdit = true;
+    contextMenu.show = false;
+    
+    // Focus the textarea after Svelte renders it
+    setTimeout(() => {
+      const ta = document.querySelector('textarea');
+      if (ta) ta.focus();
+    }, 100);
+  }
+
   function handleKeyDown(e) {
     if (e.key === 'ArrowLeft') {
       const target = e.target;
@@ -1368,7 +1034,7 @@
   }
 </script>
 
-<svelte:window onkeydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} onmousedown={closeContextMenu} oncontextmenu={closeContextMenu} />
 
 <svelte:head>
   <title>Chess Opening Repertoire Builder</title>
@@ -1376,12 +1042,15 @@
 
 <div class="min-h-screen bg-[#131416] text-[#f1f3f4] flex flex-col font-sans selection:bg-sky-500/30">
 
-  <main class="flex-1 w-full mx-auto px-4 py-6 md:py-12 flex flex-col md:flex-row justify-center items-start gap-0">
-    <!-- Board column (left) -->
-    <div class="z-10 transition-[max-width] duration-300 w-full md:max-w-[480px] lg:max-w-[480px] xl:max-w-[520px] 2xl:max-w-[650px] flex flex-col items-stretch shrink-0">
+  <!-- Centered Header Breadcrumb -->
+  <header class="w-full border-b border-[#2a2e31]/30 bg-[#131416]/80 backdrop-blur-md sticky top-0 z-20">
+    <div class="max-w-7xl mx-auto px-4 h-11 flex items-center justify-between">
+      <!-- Left spacer for horizontal centering balance on larger screens -->
+      <div class="w-[140px] shrink-0 hidden sm:block"></div>
       
-      <!-- Breadcrumb Bar -->
-      <div class="transition-opacity duration-300 opacity-100 min-w-0 h-8 items-center flex flex-row max-w-full text-sm font-bold text-[#78828a] mb-4">
+      <!-- Centered Breadcrumb -->
+      <div class="flex items-center gap-1 sm:gap-1.5 text-xs sm:text-sm font-bold text-[#78828a] overflow-hidden truncate">
+        <!-- Logo -->
         <button type="button" class="shrink-0 cursor-pointer p-1 rounded hover:bg-[#2a2e31]/50" onclick={() => resetBoard(true)} aria-label="Home">
           <div class="w-5 h-5 flex items-center justify-center">
             <svg id="Layer_2" viewBox="0 0 200 164.87" class="w-full h-full fill-current text-[#cbcfd2]">
@@ -1397,35 +1066,35 @@
           </div>
         </button>
 
-        <div class="pointer-events-none mx-2 shrink-0">
-          <i class="ti ti-chevron-right text-[#78828a] text-xs"></i>
+        <div class="pointer-events-none mx-1 sm:mx-2 shrink-0">
+          <i class="ti ti-chevron-right text-[#78828a] text-[10px] sm:text-xs"></i>
         </div>
 
         <!-- Repertoire dropdown/selector style -->
         <button type="button" class="shrink-0 cursor-pointer" onclick={() => switchRep(currentRep === 0 ? 1 : 0)}>
-          <span class="text-sm font-semibold text-[#cbcfd2] hover:text-[#f1f3f4] transition-colors">
+          <span class="text-xs sm:text-sm font-semibold text-[#cbcfd2] hover:text-[#f1f3f4] transition-colors">
             {currentRepertoireObj.side === 'w' ? 'White' : 'Black'}
           </span>
         </button>
 
-        <div class="pointer-events-none mx-2 shrink-0">
-          <i class="ti ti-chevron-right text-[#78828a] text-xs"></i>
+        <div class="pointer-events-none mx-1 sm:mx-2 shrink-0">
+          <i class="ti ti-chevron-right text-[#78828a] text-[10px] sm:text-xs"></i>
         </div>
 
         <!-- Current Tab / Section Title -->
-        <span class="text-sm font-bold text-[#cbcfd2] cursor-default capitalize">{currentTab}</span>
+        <span class="text-xs sm:text-sm font-bold text-[#cbcfd2] cursor-default capitalize">{currentTab}</span>
 
         {#if history.length > 0}
-          <div class="pointer-events-none mx-2 shrink-0">
-            <i class="ti ti-chevron-right text-[#78828a] text-xs"></i>
+          <div class="pointer-events-none mx-1 sm:mx-2 shrink-0">
+            <i class="ti ti-chevron-right text-[#78828a] text-[10px] sm:text-xs"></i>
           </div>
-          <span class="text-sm font-semibold text-sky-400 truncate max-w-[150px]">{repStatus.name.replace(' Cont...', '')}</span>
+          <span class="text-xs sm:text-sm font-semibold text-sky-400 truncate max-w-[120px] sm:max-w-[200px]">{repStatus.name.replace(' Cont...', '')}</span>
         {/if}
+      </div>
 
-        <div class="flex-1"></div>
-
-        <!-- Completion Circle progress -->
-        <div class="row items-center whitespace-nowrap hidden sm:flex text-xs font-semibold text-[#78828a]">
+      <!-- Right: Completion Circle progress -->
+      <div class="w-[140px] shrink-0 flex justify-end items-center text-xs font-semibold text-[#78828a]">
+        <div class="items-center whitespace-nowrap hidden sm:flex">
           <div class="shrink-0 mr-1.5 w-[14px] h-[14px]">
             <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1">
               <circle r="42" cx="50" cy="50" fill="transparent" stroke-dashoffset="0" stroke-width="16px" stroke="#2a2e31"></circle>
@@ -1435,6 +1104,12 @@
           <span class="tabular-nums">{completionPct}% complete</span>
         </div>
       </div>
+    </div>
+  </header>
+
+  <main class="flex-1 w-full mx-auto px-4 pt-1 pb-6 md:pt-2 md:pb-12 flex flex-col md:flex-row justify-center items-start gap-0">
+    <!-- Board column (left) -->
+    <div class="z-10 transition-[max-width] duration-300 w-full md:max-w-[480px] lg:max-w-[480px] xl:max-w-[520px] 2xl:max-w-[650px] flex flex-col items-stretch shrink-0">
 
       <!-- Turn / Status Indicator Card -->
       {#if drillMode}
@@ -1570,46 +1245,66 @@
           </a>
         </div>
       </div>
-      
-      <!-- Board controls -->
-      <div class="flex items-center gap-2 mt-4 self-center">
-        <button 
-          type="button"
-          class="h-10 w-12 rounded-lg bg-[#202325] border border-[#2a2e31] text-[#cbcfd2] hover:text-[#f1f3f4] hover:bg-[#2a2e31] hover:border-[#78828a]/50 active:scale-95 flex items-center justify-center transition-all shadow-md cursor-pointer"
-          onclick={goBack}
-          title="Undo move"
-        >
-          <i class="ti ti-arrow-left text-lg"></i>
-        </button>
-        <button 
-          type="button"
-          class="h-10 w-12 rounded-lg bg-[#202325] border border-[#2a2e31] text-[#cbcfd2] hover:text-[#f1f3f4] hover:bg-[#2a2e31] hover:border-[#78828a]/50 active:scale-95 flex items-center justify-center transition-all shadow-md cursor-pointer"
-          onclick={() => resetBoard(true)}
-          title="Reset board"
-        >
-          <i class="ti ti-home text-lg"></i>
-        </button>
-        <button 
-          type="button"
-          class="h-10 w-12 rounded-lg bg-[#202325] border border-[#2a2e31] text-[#cbcfd2] hover:text-[#f1f3f4] hover:bg-[#2a2e31] hover:border-[#78828a]/50 active:scale-95 flex items-center justify-center transition-all shadow-md cursor-pointer"
-          onclick={flipBoard}
-          title="Flip board orientation"
-        >
-          <i class="ti ti-arrows-exchange-2 text-lg"></i>
-        </button>
-        <button 
-          type="button"
-          class="h-10 w-12 rounded-lg border active:scale-95 flex items-center justify-center transition-all shadow-md cursor-pointer
-                 {voiceModeActive 
-                   ? 'bg-rose-500/20 text-rose-400 border-rose-500/40 animate-pulse' 
-                   : 'bg-[#202325] border-[#2a2e31] text-[#cbcfd2] hover:text-[#f1f3f4] hover:bg-[#2a2e31] hover:border-[#78828a]/50'}"
-          onclick={toggleVoiceRecognition}
-          title={voiceModeActive ? "Stop Voice Mode" : "Start Voice Mode (e.g. speak 'e4', 'Knight f3')"}
-        >
-          <i class="ti {isListening ? 'ti-microphone-off' : 'ti-microphone'} text-lg"></i>
-        </button>
-      </div>
 
+      <!-- Current Line Moves List -->
+      <div class="flex flex-wrap items-center gap-x-3.5 gap-y-1.5 text-sm font-mono text-[#cbcfd2]">
+        {#if history.length === 0}
+          <span class="text-xs text-[#78828a] italic">No moves played yet</span>
+        {:else}
+          {#each Array(Math.ceil(history.length / 2)) as _, turnIndex}
+            {@const wIdx = turnIndex * 2}
+            {@const wSan = history[wIdx]}
+            {@const wPath = history.slice(0, wIdx + 1).join(' ')}
+            {@const wTag = moveTags[currentRep] && moveTags[currentRep][wPath]}
+            {@const bIdx = turnIndex * 2 + 1}
+            {@const bSan = history[bIdx]}
+            {@const bPath = bIdx < history.length ? history.slice(0, bIdx + 1).join(' ') : ''}
+            {@const bTag = bIdx < history.length && moveTags[currentRep] && moveTags[currentRep][bPath]}
+            <div class="flex items-center gap-x-1">
+              <!-- White Move -->
+              <button
+                type="button"
+                class="transition-colors cursor-pointer outline-none hover:text-[#f1f3f4] 
+                       {wIdx === history.length - 1 
+                         ? 'text-sky-400 font-bold border-b border-sky-400/50 pb-0.5' 
+                         : 'text-[#78828a]'}"
+                onclick={() => clickMoveChip(wIdx)}
+                oncontextmenu={(e) => openContextMenu(e, wPath)}
+              >
+                {#if wTag === 'inaccuracy'}
+                  {wSan}<span class="text-amber-500 font-bold font-mono">?</span>
+                {:else if wTag === 'blunder'}
+                  {wSan}<span class="text-rose-500 font-bold font-mono">??</span>
+                {:else}
+                  {wSan}
+                {/if}
+              </button>
+
+              <!-- Black Move (if exists) -->
+              {#if bIdx < history.length}
+                <button
+                  type="button"
+                  class="transition-colors cursor-pointer outline-none hover:text-[#f1f3f4] 
+                         {bIdx === history.length - 1 
+                           ? 'text-sky-400 font-bold border-b border-sky-400/50 pb-0.5' 
+                           : 'text-[#78828a]'}"
+                  onclick={() => clickMoveChip(bIdx)}
+                  oncontextmenu={(e) => openContextMenu(e, bPath)}
+                >
+                  {#if bTag === 'inaccuracy'}
+                    {bSan}<span class="text-amber-500 font-bold font-mono">?</span>
+                  {:else if bTag === 'blunder'}
+                    {bSan}<span class="text-rose-500 font-bold font-mono">??</span>
+                  {:else}
+                    {bSan}
+                  {/if}
+                </button>
+              {/if}
+            </div>
+          {/each}
+        {/if}
+      </div>
+      
       {#if voiceStatusMsg}
         <div class="mt-3 text-center text-xs font-semibold px-4 py-2 rounded-lg bg-[#202325]/40 border border-[#2a2e31] text-[#cbcfd2] transition-all max-w-[280px] self-center">
           <span class={isListening ? 'text-rose-400 animate-pulse' : 'text-sky-400'}>{voiceStatusMsg}</span>
@@ -1617,8 +1312,44 @@
       {/if}
     </div>
     
-    <!-- Spacer -->
-    <div class="hidden md:block shrink-0" style="width: 48px; flex-grow: 0;"></div>
+    <!-- Spacer / Board Controls -->
+    <div class="flex flex-row md:flex-col items-center justify-center md:justify-start shrink-0 gap-2 py-4 md:py-0 md:pt-1 md:w-12" style="flex-grow: 0;">
+      <button 
+        type="button"
+        class="h-10 w-10 rounded-lg text-[#78828a] hover:text-[#cbcfd2] hover:bg-[#202325]/40 active:scale-95 flex items-center justify-center transition-all cursor-pointer"
+        onclick={goBack}
+        title="Undo move"
+      >
+        <i class="ti ti-arrow-left text-lg"></i>
+      </button>
+      <button 
+        type="button"
+        class="h-10 w-10 rounded-lg text-[#78828a] hover:text-[#cbcfd2] hover:bg-[#202325]/40 active:scale-95 flex items-center justify-center transition-all cursor-pointer"
+        onclick={() => resetBoard(true)}
+        title="Reset board"
+      >
+        <i class="ti ti-home text-lg"></i>
+      </button>
+      <button 
+        type="button"
+        class="h-10 w-10 rounded-lg text-[#78828a] hover:text-[#cbcfd2] hover:bg-[#202325]/40 active:scale-95 flex items-center justify-center transition-all cursor-pointer"
+        onclick={flipBoard}
+        title="Flip board orientation"
+      >
+        <i class="ti ti-arrows-exchange-2 text-lg"></i>
+      </button>
+      <button 
+        type="button"
+        class="h-10 w-10 rounded-lg active:scale-95 flex items-center justify-center transition-all cursor-pointer
+               {voiceModeActive 
+                 ? 'bg-rose-500/20 text-rose-400 animate-pulse' 
+                 : 'text-[#78828a] hover:text-[#cbcfd2] hover:bg-[#202325]/40'}"
+        onclick={toggleVoiceRecognition}
+        title={voiceModeActive ? "Stop Voice Mode" : "Start Voice Mode (e.g. speak 'e4', 'Knight f3')"}
+      >
+        <i class="ti {isListening ? 'ti-microphone-off' : 'ti-microphone'} text-lg"></i>
+      </button>
+    </div>
     
     <!-- Sidebar column (right) -->
     <div id="sidebar" class="z-10 relative transition-[max-width] duration-300 w-full md:max-w-[480px] lg:max-w-[500px] xl:max-w-[650px] self-stretch" style="flex-grow: 2; flex-basis: 0px; display: flex; flex-direction: column;">
@@ -1707,46 +1438,7 @@
               </div>
             {/if}
 
-            <div class="flex flex-wrap gap-2 min-h-12 items-center">
-              {#if history.length === 0}
-                <p class="text-sm text-[#78828a] italic">Make a move on the board to start building your opening line...</p>
-              {:else}
-                {#each history as san, i}
-                  {@const pathAtMove = history.slice(0, i + 1).join(' ')}
-                  {@const tagAtMove = moveTags[currentRep] && moveTags[currentRep][pathAtMove]}
-                  {#if i % 2 === 0}
-                    <span class="text-sm font-mono text-[#78828a] font-semibold select-none align-middle">{i / 2 + 1}.</span>
-                  {/if}
-                  <div class="relative group/chip inline-block align-middle">
-                    <button
-                      type="button"
-                      class="font-mono text-sm pl-2.5 pr-7 py-1 rounded-md border transition-all cursor-pointer 
-                             {i === history.length - 1 
-                               ? 'bg-sky-500/20 text-sky-400 border-sky-500/40 font-semibold shadow-md shadow-sky-500/5' 
-                               : 'bg-[#131416] text-[#cbcfd2] border-[#2a2e31] hover:border-[#78828a] hover:text-[#f1f3f4]'}"
-                      onclick={() => clickMoveChip(i)}
-                    >
-                      {#if tagAtMove === 'inaccuracy'}
-                        {san}<span class="text-amber-500 font-bold font-mono">?</span>
-                      {:else if tagAtMove === 'blunder'}
-                        {san}<span class="text-rose-500 font-bold font-mono">??</span>
-                      {:else}
-                        {san}
-                      {/if}
-                    </button>
-                    <!-- Remove/Truncate button -->
-                    <button
-                      type="button"
-                      class="absolute right-1 top-1/2 -translate-y-1/2 text-[#78828a] hover:text-rose-400 transition-colors p-0.5 rounded cursor-pointer"
-                      onclick={(e) => { e.stopPropagation(); truncateMoveHistory(i); }}
-                      title="Remove this move and all following moves"
-                    >
-                      <i class="ti ti-x text-[10px]"></i>
-                    </button>
-                  </div>
-                {/each}
-              {/if}
-            </div>
+
           </div>
           
           <!-- Branches / Continuations Section OR Choose Your Side -->
@@ -1828,7 +1520,7 @@
                   {#each branches as b, i}
                     {@const moveNum = Math.floor((history.length) / 2) + 1}
                     {@const isBlackMove = (history.length) % 2 === 1}
-                    {@const branchNote = getNoteForHistory([...history, b.move])}
+                    {@const branchNote = getNoteForHistory([...history, b.move], customNotes, currentRep, currentRepertoireObj)}
                     {@const hash = b.move.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)}
                     {@const gamesCount = (hash * 17) % 950 + 10}
                     {@const successRate = 45 + (hash % 25)}
@@ -1836,7 +1528,7 @@
                     {@const currentTag = moveTags[currentRep] && moveTags[currentRep][movePathStr]}
                     <!-- Row container -->
                     <div
-                      class="relative isolate w-full rounded-sm py-3 transition-colors group grid items-center hover:bg-[#2a2e31]/20 border-b border-[#2a2e31]/30 last:border-b-0"
+                      class="relative isolate w-full rounded-sm py-3 transition-colors grid items-center hover:bg-[#2a2e31]/20 border-b border-[#2a2e31]/30 last:border-b-0"
                       style="grid-column: 1/-1; grid-template-columns: subgrid; background: none;"
                     >
                       <!-- Clickable Left Area (Move + Continuation Name) -->
@@ -1849,6 +1541,7 @@
                           history.push(b.move);
                           history = history;
                         }}
+                        oncontextmenu={(e) => openContextMenu(e, movePathStr)}
                       >
                         <!-- Column 1: Opponent's Move -->
                         <div class="relative z-1 text-[#cbcfd2] font-semibold text-sm flex items-center min-w-0 pr-6" style="grid-column: 1/span 1;">
@@ -1879,39 +1572,9 @@
                         </div>
                       </button>
 
-                      <!-- Column 3: Stats (Expected) / Tag actions -->
-                      <div class="relative z-1 text-[#cbcfd2] text-xs text-end font-medium tabular-nums flex items-center justify-end gap-1.5" style="grid-column: 3/span 1;">
-                        <span class="text-[#cbcfd2] group-hover:hidden">{gamesCount} games</span>
-                        
-                        <!-- Actions (shown on hover) -->
-                        <div class="hidden group-hover:flex items-center gap-1">
-                          <button
-                            type="button"
-                            class="px-1.5 py-0.5 rounded text-xs bg-[#131416] border border-[#2a2e31] hover:border-amber-500 hover:text-amber-500 transition-colors font-bold cursor-pointer"
-                            onclick={(e) => { e.stopPropagation(); toggleMoveTag(movePathStr, 'inaccuracy'); }}
-                            title="Tag as inaccuracy (?)"
-                          >
-                            ?
-                          </button>
-                          <button
-                            type="button"
-                            class="px-1.5 py-0.5 rounded text-xs bg-[#131416] border border-[#2a2e31] hover:border-rose-500 hover:text-rose-500 transition-colors font-bold cursor-pointer"
-                            onclick={(e) => { e.stopPropagation(); toggleMoveTag(movePathStr, 'blunder'); }}
-                            title="Tag as blunder (??)"
-                          >
-                            ??
-                          </button>
-                          {#if currentTag}
-                            <button
-                              type="button"
-                              class="px-1 py-0.5 rounded text-xs bg-[#131416] border border-[#2a2e31] hover:text-slate-200 transition-colors cursor-pointer"
-                              onclick={(e) => { e.stopPropagation(); toggleMoveTag(movePathStr, null); }}
-                              title="Clear tag"
-                            >
-                              <i class="ti ti-ban text-[10px]"></i>
-                            </button>
-                          {/if}
-                        </div>
+                      <!-- Column 3: Stats (Expected) -->
+                      <div class="relative z-1 text-[#cbcfd2] text-xs text-end font-medium tabular-nums flex items-center justify-end" style="grid-column: 3/span 1;">
+                        <span class="text-[#cbcfd2]">{gamesCount} games</span>
                       </div>
 
                       <!-- Column 4: Popularity / Win % Progress Bar -->
@@ -1931,38 +1594,50 @@
           {/if}
           
           <!-- Move Note Section -->
-          <div class="flex flex-col gap-4">
-            <div class="flex flex-col gap-1 border-b border-[#2a2e31]/60 pb-2">
-              <span class="text-xs font-bold uppercase tracking-wider text-[#78828a] font-outfit">Position Note</span>
-              <span class="text-xs text-[#78828a] truncate font-mono">
-                {#if history.length > 0}
-                  After {lineStr}
-                {:else}
-                  —
-                {/if}
-              </span>
+          {#if showNoteEdit}
+            <div class="flex flex-col gap-4" transition:slide>
+              <div class="flex items-center justify-between border-b border-[#2a2e31]/60 pb-2">
+                <div class="flex flex-col gap-1">
+                  <span class="text-xs font-bold uppercase tracking-wider text-[#78828a] font-outfit">Position Note</span>
+                  <span class="text-xs text-[#78828a] truncate font-mono">
+                    {#if history.length > 0}
+                      After {lineStr}
+                    {:else}
+                      —
+                    {/if}
+                  </span>
+                </div>
+                <button 
+                  type="button"
+                  class="text-[#78828a] hover:text-[#cbcfd2] cursor-pointer p-1 rounded hover:bg-[#2a2e31]/50"
+                  onclick={() => showNoteEdit = false}
+                  title="Hide Note Editor"
+                >
+                  <i class="ti ti-x text-sm"></i>
+                </button>
+              </div>
+              
+              <textarea
+                class="w-full min-h-24 bg-[#131416] border border-[#2a2e31] rounded-lg p-3 text-sm text-[#f1f3f4] placeholder-[#78828a]/40 focus:outline-none focus:border-sky-500/50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                placeholder="Add educational notes, ideas, or tactical motifs for this position..."
+                bind:value={noteText}
+                disabled={history.length === 0}
+              ></textarea>
+              
+              <button
+                type="button"
+                class="self-start px-4 py-2 text-sm font-semibold rounded-lg border flex items-center gap-2 transition-all cursor-pointer
+                       {saveSuccess 
+                         ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30 shadow-md shadow-emerald-500/5' 
+                         : 'bg-[#2a2e31] hover:bg-[#2a2e31]/80 text-[#f1f3f4] border-[#2a2e31]/50 disabled:opacity-40 disabled:cursor-not-allowed'}"
+                onclick={saveNote}
+                disabled={history.length === 0}
+              >
+                <i class="ti {saveSuccess ? 'ti-check' : 'ti-device-floppy'}"></i>
+                {saveSuccess ? 'Note Saved!' : 'Save Note'}
+              </button>
             </div>
-            
-            <textarea
-              class="w-full min-h-24 bg-[#131416] border border-[#2a2e31] rounded-lg p-3 text-sm text-[#f1f3f4] placeholder-[#78828a]/40 focus:outline-none focus:border-sky-500/50 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-              placeholder="Add educational notes, ideas, or tactical motifs for this position..."
-              bind:value={noteText}
-              disabled={history.length === 0}
-            ></textarea>
-            
-            <button
-              type="button"
-              class="self-start px-4 py-2 text-sm font-semibold rounded-lg border flex items-center gap-2 transition-all cursor-pointer
-                     {saveSuccess 
-                       ? 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30 shadow-md shadow-emerald-500/5' 
-                       : 'bg-[#2a2e31] hover:bg-[#2a2e31]/80 text-[#f1f3f4] border-[#2a2e31]/50 disabled:opacity-40 disabled:cursor-not-allowed'}"
-              onclick={saveNote}
-              disabled={history.length === 0}
-            >
-              <i class="ti {saveSuccess ? 'ti-check' : 'ti-device-floppy'}"></i>
-              {saveSuccess ? 'Note Saved!' : 'Save Note'}
-            </button>
-          </div>
+          {/if}
           
           <!-- Transpositions Section -->
           {#if transpositions.length > 0}
@@ -1990,72 +1665,52 @@
             </div>
           {/if}
 
-          <!-- Status Bar -->
-          <div class="bg-[#131416]/60 border border-[#2a2e31] rounded-xl p-4 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-lg">
-            <div class="flex flex-col gap-1 w-full sm:w-auto">
-              <span class="text-xs font-bold uppercase tracking-wider text-[#78828a] font-outfit">Repertoire Status</span>
-              <div class="flex items-center gap-2">
-                {#if history.length === 0}
-                  <span class="text-sm text-[#78828a] italic">No moves played</span>
-                {:else if repStatus.isExact}
-                  <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
-                    <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span> In Repertoire
-                  </span>
-                  <span class="text-sm font-medium text-[#cbcfd2] truncate max-w-48">{repStatus.name}</span>
-                {:else if repStatus.isContinuation}
-                  <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-indigo-500/10 text-indigo-400 border border-indigo-500/20">
-                    {repStatus.parentName} Cont...
-                  </span>
-                {:else}
-                  <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-500/10 text-amber-400 border border-amber-500/20">
-                    Not in Repertoire
-                  </span>
-                {/if}
-              </div>
-            </div>
-            
-            {#if history.length > 0 || activeOpening}
-              <div class="flex flex-wrap items-center gap-2 w-full sm:w-auto">
-                {#if activeOpening}
-                  <button
-                    type="button"
-                    class="flex-1 sm:flex-initial bg-transparent hover:bg-rose-500/10 text-rose-400 border border-rose-500/30 font-bold px-4 py-2 rounded-lg text-sm active:scale-95 transition-all flex items-center justify-center gap-1.5 cursor-pointer font-semibold"
-                    onclick={() => deleteOpening(activeOpening.id)}
-                  >
-                    <i class="ti ti-trash"></i> Delete Line
-                  </button>
-                {/if}
+          <!-- Action Buttons -->
+          {#if history.length > 0 || activeOpening}
+            <div class="flex flex-col gap-2.5 w-full mt-2">
+              {#if activeOpening && lineStr !== activeOpening.pgn}
+                <button
+                  type="button"
+                  class="w-full bg-[#2a2e31] hover:bg-[#2a2e31]/85 border border-[#373c40] text-[#f1f3f4] font-semibold px-4 py-2.5 rounded-lg text-sm active:scale-95 transition-all flex items-center justify-start gap-2.5 cursor-pointer"
+                  onclick={updateActiveOpening}
+                >
+                  <i class="ti ti-device-floppy text-[#78828a]"></i>
+                  <span>Update {activeOpening.name}</span>
+                </button>
+              {:else if repStatus.isContinuation}
+                <button
+                  type="button"
+                  class="w-full bg-[#2a2e31] hover:bg-[#2a2e31]/85 border border-[#373c40] text-[#f1f3f4] font-semibold px-4 py-2.5 rounded-lg text-sm active:scale-95 transition-all flex items-center justify-start gap-2.5 cursor-pointer"
+                  onclick={() => saveToParentOpening(repStatus.parentId)}
+                >
+                  <i class="ti ti-device-floppy text-[#78828a]"></i>
+                  <span>Save to {repStatus.parentName}</span>
+                </button>
+              {/if}
+              
+              {#if history.length > 0 && !repStatus.isExact}
+                <button
+                  type="button"
+                  class="w-full bg-[#2a2e31] hover:bg-[#2a2e31]/85 border border-[#373c40] text-[#f1f3f4] font-semibold px-4 py-2.5 rounded-lg text-sm active:scale-95 transition-all flex items-center justify-start gap-2.5 cursor-pointer"
+                  onclick={addCurrentLine}
+                >
+                  <i class="ti ti-plus text-[#78828a]"></i>
+                  <span>Save as New</span>
+                </button>
+              {/if}
 
-                {#if activeOpening && lineStr !== activeOpening.pgn}
-                  <button
-                    type="button"
-                    class="flex-1 sm:flex-initial bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-4 py-2 rounded-lg text-sm shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center justify-center gap-1.5 cursor-pointer font-semibold"
-                    onclick={updateActiveOpening}
-                  >
-                    <i class="ti ti-device-floppy"></i> Update {activeOpening.name}
-                  </button>
-                {:else if repStatus.isContinuation}
-                  <button
-                    type="button"
-                    class="flex-1 sm:flex-initial bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-4 py-2 rounded-lg text-sm shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center justify-center gap-1.5 cursor-pointer font-semibold"
-                    onclick={() => saveToParentOpening(repStatus.parentId)}
-                  >
-                    <i class="ti ti-device-floppy"></i> Save to {repStatus.parentName}
-                  </button>
-                {/if}
-                
-                {#if history.length > 0 && !repStatus.isExact}
-                  <button
-                    type="button"
-                    class="flex-1 sm:flex-initial bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-400 hover:to-indigo-500 text-slate-950 font-bold px-4 py-2 rounded-lg text-sm shadow-md hover:shadow-lg hover:shadow-sky-500/10 active:scale-95 transition-all flex items-center justify-center gap-1.5 cursor-pointer font-semibold"
-                    onclick={addCurrentLine}
-                  >
-                    <i class="ti ti-plus"></i> Save as New
-                  </button>
-                {/if}
-              </div>
-            {/if}
-          </div>
+              {#if activeOpening}
+                <button
+                  type="button"
+                  class="w-full bg-transparent hover:bg-rose-500/10 text-[#78828a] hover:text-rose-400 border border-[#2a2e31]/60 hover:border-rose-500/30 px-4 py-2.5 rounded-lg text-sm active:scale-95 transition-all flex items-center justify-start gap-2.5 cursor-pointer font-semibold"
+                  onclick={() => deleteOpening(activeOpening.id)}
+                >
+                  <i class="ti ti-trash"></i>
+                  <span>Delete Line</span>
+                </button>
+              {/if}
+            </div>
+          {/if}
         {:else if currentTab === 'openings'}
           <!-- OPENINGS VIEW -->
           <div class="flex flex-col gap-4">
@@ -2267,3 +1922,44 @@
     </div>
   </main>
 </div>
+
+{#if contextMenu.show}
+  <div 
+    class="fixed z-50 bg-[#202325] border border-[#2a2e31]/80 rounded-xl shadow-xl py-1.5 text-xs text-[#cbcfd2] min-w-36 backdrop-blur-md"
+    style="left: {contextMenu.x}px; top: {contextMenu.y}px;"
+    onmousedown={(e) => e.stopPropagation()}
+    role="menu"
+    tabindex="-1"
+  >
+    <button 
+      type="button"
+      class="w-full text-left px-3.5 py-2 hover:bg-[#131416]/65 hover:text-[#f1f3f4] transition-colors flex items-center gap-2 cursor-pointer font-semibold"
+      onclick={() => { toggleMoveTag(contextMenu.movePathStr, 'inaccuracy'); contextMenu.show = false; }}
+    >
+      <span class="font-bold text-amber-500 font-mono text-sm">?</span> Inaccuracy
+    </button>
+    <button 
+      type="button"
+      class="w-full text-left px-3.5 py-2 hover:bg-[#131416]/65 hover:text-[#f1f3f4] transition-colors flex items-center gap-2 cursor-pointer font-semibold"
+      onclick={() => { toggleMoveTag(contextMenu.movePathStr, 'blunder'); contextMenu.show = false; }}
+    >
+      <span class="font-bold text-rose-500 font-mono text-sm">??</span> Blunder
+    </button>
+    <button 
+      type="button"
+      class="w-full text-left px-3.5 py-2 hover:bg-[#131416]/65 hover:text-[#f1f3f4] transition-colors flex items-center gap-2 border-t border-[#2a2e31]/60 cursor-pointer font-semibold"
+      onclick={handleEditNoteFromContextMenu}
+    >
+      <i class="ti ti-notes text-[11px] text-sky-400"></i> Edit Note
+    </button>
+    {#if moveTags[currentRep] && moveTags[currentRep][contextMenu.movePathStr]}
+      <button 
+        type="button"
+        class="w-full text-left px-3.5 py-2 hover:bg-[#131416]/65 hover:text-rose-400 transition-colors flex items-center gap-2 border-t border-[#2a2e31]/60 cursor-pointer font-semibold"
+        onclick={() => { toggleMoveTag(contextMenu.movePathStr, null); contextMenu.show = false; }}
+      >
+        <i class="ti ti-ban text-[10px]"></i> Clear Tag
+      </button>
+    {/if}
+  </div>
+{/if}