Add URL rooting

Author: klieret

README.md

@@ -6,6 +6,8 @@ An AI Agent Trajectory Explorer built with Hugo and JavaScript for viewing AI ag
 
 - **Experiment Navigation**: Browse through different experiments with previous/next buttons and dropdown selection
 - **Instance Navigation**: Navigate through instances within each experiment
+- **URL Routing**: Direct links to specific experiments and instances with deep linking support
+- **Browser Navigation**: Full support for browser back/forward buttons and history
 - **Overview Display**: Shows exit status, model statistics, API calls, and costs
 - **Message Formatting**: Displays all conversation messages with proper formatting for different roles (system, user, assistant)
 - **Responsive Design**: Works on desktop and mobile devices
@@ -67,6 +69,33 @@ hugo server
 
 Then open http://localhost:1313 in your browser.
 
+### URL Routing
+
+The trajectory viewer supports direct linking to specific experiments and instances:
+
+**Experiment URLs:**
+- `http://localhost:1313/example-experiemnt` - View specific experiment
+- `http://localhost:1313/experiment-1` - View experiment-1
+- `http://localhost:1313/` - Home page with no experiment selected
+
+**Instance URLs:**
+- `http://localhost:1313/example-experiemnt/example_instance` - View specific experiment and instance
+- `http://localhost:1313/experiment-1/instance_1` - View experiment-1, instance_1
+
+**Features:**
+- **Deep Linking**: Share URLs to specific experiments or instances
+- **Browser Navigation**: Back/forward buttons work correctly
+- **Auto-Selection**: When navigating to an experiment URL, the first instance is automatically selected
+- **URL Updates**: URLs update automatically as you navigate through the interface
+- **Bookmarking**: Bookmark specific trajectories and return to them later
+
+**URL Structure:**
+```
+/                          # Home page (no selection)
+/{experiment-name}         # Experiment with first instance
+/{experiment-name}/{instance-name}  # Specific experiment and instance
+```
+
 ### Adding New Experiments
 
 1. Create a new folder in the `data/` directory with your experiment name

static/js/trajectory-viewer.js

@@ -12,6 +12,7 @@ class TrajectoryViewer {
         this.initTheme();
         await this.loadExperiments();
         this.setupEventListeners();
+        this.initFromURL();
         this.updateUI();
     }
 
@@ -74,6 +75,73 @@ class TrajectoryViewer {
 
         console.log('Discovery complete. Found experiments:', this.experiments);
     }
+
+    initFromURL() {
+        const { experimentName, instanceName } = this.parseURLSegments();
+        if (experimentName && this.experiments.some(exp => exp.name === experimentName)) {
+            this.selectExperiment(experimentName).then(() => {
+                // If instance is specified in URL and exists, select it
+                if (instanceName && this.currentExperiment && 
+                    this.currentExperiment.instances.includes(instanceName)) {
+                    this.selectInstance(instanceName);
+                }
+            });
+        }
+    }
+
+    parseURLSegments() {
+        const path = window.location.pathname;
+        // Remove leading slash and extract segments
+        const segments = path.replace(/^\//, '').split('/').filter(s => s);
+        return {
+            experimentName: segments[0] || null,
+            instanceName: segments[1] || null
+        };
+    }
+
+    parseURLForExperiment() {
+        // Keep this method for backward compatibility
+        return this.parseURLSegments().experimentName;
+    }
+
+    updateURL(experimentName, instanceName = null) {
+        let newPath = '/';
+        if (experimentName) {
+            newPath += experimentName;
+            if (instanceName) {
+                newPath += `/${instanceName}`;
+            }
+        }
+        
+        // Update URL without reloading the page
+        if (window.location.pathname !== newPath) {
+            window.history.pushState(
+                { experiment: experimentName, instance: instanceName }, 
+                '', 
+                newPath
+            );
+        }
+    }
+
+    handlePopState(event) {
+        // Handle browser back/forward navigation
+        const { experimentName, instanceName } = this.parseURLSegments();
+        if (experimentName && this.experiments.some(exp => exp.name === experimentName)) {
+            this.selectExperiment(experimentName).then(() => {
+                // If instance is specified in URL and exists, select it
+                if (instanceName && this.currentExperiment && 
+                    this.currentExperiment.instances.includes(instanceName)) {
+                    this.selectInstance(instanceName);
+                }
+            });
+        } else {
+            // No experiment in URL, clear selection
+            this.currentExperiment = null;
+            this.currentInstance = null;
+            this.trajectoryData = null;
+            this.updateUI();
+        }
+    }
 
     async discoverInstancesForExperiment(experimentName, instancePatterns) {
         const foundInstances = [];
@@ -126,6 +194,11 @@ class TrajectoryViewer {
         document.getElementById('theme-toggle').addEventListener('click', () => {
             this.toggleTheme();
         });
+
+        // Browser navigation (back/forward)
+        window.addEventListener('popstate', (event) => {
+            this.handlePopState(event);
+        });
     }
 
     initTheme() {
@@ -268,12 +341,22 @@ class TrajectoryViewer {
     }
 
     async selectExperiment(experimentName) {
-        if (!experimentName) return;
+        if (!experimentName) {
+            this.currentExperiment = null;
+            this.currentInstance = null;
+            this.trajectoryData = null;
+            this.updateURL('');
+            this.updateUI();
+            return;
+        }
 
         this.currentExperiment = this.experiments.find(exp => exp.name === experimentName);
         this.currentInstance = null;
         this.trajectoryData = null;
 
+        // Update URL with experiment name
+        this.updateURL(experimentName);
+        
         // Auto-select first instance if available
         if (this.currentExperiment && this.currentExperiment.instances.length > 0) {
             await this.selectInstance(this.currentExperiment.instances[0]);
@@ -286,6 +369,10 @@ class TrajectoryViewer {
         if (!instanceName || !this.currentExperiment) return;
 
         this.currentInstance = instanceName;
+        
+        // Update URL with both experiment and instance
+        this.updateURL(this.currentExperiment.name, instanceName);
+        
         await this.loadTrajectoryData();
         this.updateUI();
     }