feat: Add PathRecorder component for recording and managing turtle paths with UI and functionality

client/src/App.jsx

@@ -5,13 +5,14 @@ import VoiceControl from './components/VoiceControl';
 import StatsPanel from './components/StatsPanel';
 import GroupsPanel from './components/GroupsPanel';
 import TaskPanel from './components/TaskPanel';
+import PathRecorder from './components/PathRecorder';
 import { useTurtleStore } from './store/turtleStore';
 import './App.css';
 
 function App() {
   const connect = useTurtleStore((state) => state.connect);
   const [view, setView] = useState('split'); // 'split', 'map', 'panel'
-  const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks'
+  const [panelTab, setPanelTab] = useState('control'); // 'control', 'voice', 'stats', 'groups', 'tasks', 'paths'
   const turtles = useTurtleStore((state) => state.getTurtleArray());
   const selectedTurtle = useTurtleStore((state) => state.getSelectedTurtle());
 
@@ -34,6 +35,8 @@ function App() {
         return <GroupsPanel turtles={turtles} apiUrl={apiUrl} wsUrl={wsUrl} />;
       case 'tasks':
         return <TaskPanel turtles={turtles} apiUrl={apiUrl} />;
+      case 'paths':
+        return <PathRecorder turtles={turtles} selectedTurtle={selectedTurtle} apiUrl={apiUrl} />;
       default:
         return <ControlPanel />;
     }
@@ -106,6 +109,13 @@ function App() {
               >
                 📋 Tasks
               </button>
+              <button 
+                className={panelTab === 'paths' ? 'active' : ''}
+                onClick={() => setPanelTab('paths')}
+                title="Path Recording"
+              >
+                🛤️ Paths
+              </button>
             </div>
             <div className="panel-content-wrapper">
               {renderPanelContent()}