feat: real URL routes for tabs (/detection, /court, /trajectory)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/web/app.py

@@ -29,8 +29,9 @@ state = {
 
 
 @app.route('/')
-def index():
+@app.route('/<tab>')
-    return render_template('index.html')
+def index(tab='detection'):
+    return render_template('index.html', active_tab=tab)
 
 
 @app.route('/frame/<int:sensor_id>')

src/web/templates/index.html

@@ -367,7 +367,7 @@
 
 <script>
 // ===================== Tab switching =====================
-var activeTab = 'detection';
+var activeTab = '{{ active_tab | default("detection") }}';
 
 function switchTab(target) {
     activeTab = target;
@@ -378,18 +378,23 @@ function switchTab(target) {
     document.getElementById('infoPanel').style.display = (target === 'trajectory') ? 'flex' : 'none';
     if (target === 'court' && !courtSceneInitialized) initCourtScene();
     if (target === 'trajectory' && !trajSceneInitialized) initTrajectoryScene();
-    history.replaceState(null, '', '#' + target);
+    history.pushState(null, '', '/' + target);
 }
 
 document.querySelectorAll('.tab').forEach(function(tab) {
-    tab.addEventListener('click', function() { switchTab(this.dataset.tab); });
+    tab.addEventListener('click', function(e) {
+        e.preventDefault();
+        switchTab(this.dataset.tab);
+    });
 });
 
-// Init from URL hash
+window.addEventListener('popstate', function() {
-var hash = location.hash.replace('#', '');
+    var path = location.pathname.replace('/', '') || 'detection';
-if (['detection', 'court', 'trajectory'].indexOf(hash) !== -1) {
+    switchTab(path);
-    switchTab(hash);
+});
-}
+
+// Init active tab from server
+if (activeTab !== 'detection') switchTab(activeTab);
 
 // ===================== Calibration =====================
 function doCalibrate() {