working companion prototype

resources/iracing-hosted-sessions/README.md

@@ -0,0 +1,2 @@
+THE HTML FILES I DUMPED ARE JUST STUPID HTML FILES!!!! THEY ARE JUST TO HELP WITH HTML STRUCTURE!!
+THEY DO NOT REPRESENT THE REAL IRACING WEBSITE!!!!

resources/mock-fixtures/README.md

@@ -0,0 +1,113 @@
+# Mock HTML Fixtures
+
+Simplified HTML fixtures for E2E testing of the iRacing hosted session automation workflow.
+
+## Purpose
+
+These fixtures replace full-page iRacing dumps with lightweight, testable HTML pages that simulate the iRacing hosted session wizard. They are designed for use with the `FixtureServer` to test browser automation adapters in isolation.
+
+## Files
+
+| File | Step | Description |
+|------|------|-------------|
+| `step-02-hosted-racing.html` | 2 | Landing page with "Create a Race" button |
+| `step-03-create-race.html` | 3 | Race Information - session name, password, description |
+| `step-04-race-information.html` | 4 | Server Details - region, start time |
+| `step-05-server-details.html` | 5 | Set Admins - admin list management |
+| `step-06-set-admins.html` | 7 | Time Limits - practice, qualify, race durations |
+| `step-07-add-admin.html` | 6 | Add Admin Modal - search and select admin |
+| `step-08-time-limits.html` | 8 | Set Cars - car list management |
+| `step-09-set-cars.html` | 10 | Set Car Classes - multi-class configuration |
+| `step-10-add-car.html` | 9 | Add Car Modal - search and select cars |
+| `step-11-set-car-classes.html` | 11 | Set Track - track selection |
+| `step-12-set-track.html` | 13 | Track Options - configuration, dynamic track |
+| `step-13-add-track.html` | 12 | Add Track Modal - search and select track |
+| `step-14-track-options.html` | 14 | Time of Day - time slider, date, simulated time |
+| `step-15-time-of-day.html` | 15 | Weather - type, temperature, humidity |
+| `step-16-weather.html` | 16 | Race Options - max drivers, start type, cautions |
+| `step-17-race-options.html` | 17 | Team Driving - enable teams, min/max drivers |
+| `step-18-track-conditions.html` | 18 | Track Conditions - track state, marbles, rubber |
+| `common.css` | - | Shared styles for all fixtures |
+
+## Data Attributes
+
+All fixtures use consistent `data-*` attributes for reliable automation:
+
+### Navigation
+- `data-action="create"` - Create a Race button (step 2)
+- `data-action="next"` - Next step button
+- `data-action="back"` - Previous step button
+- `data-action="confirm"` - Confirm modal action
+- `data-action="cancel"` - Cancel modal action
+- `data-action="select"` - Select item from list
+
+### Step Identification
+- `data-step="N"` - Step number on body element
+- `data-indicator="name"` - Step indicator element
+
+### Form Fields
+- `data-field="name"` - Text/number inputs and textareas
+- `data-dropdown="name"` - Select dropdowns
+- `data-toggle="name"` - Checkbox toggles
+- `data-slider="name"` - Range slider inputs
+
+### Modals
+- `data-modal="true"` - Modal container (on body)
+- `data-modal-trigger="type"` - Button that opens a modal
+
+### Lists
+- `data-list="name"` - List container
+- `data-item="id"` - Selectable list item
+
+## Usage with FixtureServer
+
+```typescript
+import { FixtureServer } from '@infrastructure/adapters/automation/FixtureServer';
+
+const server = new FixtureServer({ fixturesPath: 'resources/mock-fixtures' });
+await server.start();
+
+// Navigate to step 2
+await page.goto(`${server.baseUrl}/step-02-hosted-racing.html`);
+
+// Use data attributes for automation
+await page.click('[data-action="create"]');
+await page.fill('[data-field="sessionName"]', 'My Race');
+await page.click('[data-action="next"]');
+```
+
+## Selector Strategy
+
+Use attribute selectors for reliable automation:
+
+```typescript
+const SELECTORS = {
+  stepContainer: (step: number) => `[data-step="${step}"]`,
+  nextButton: '[data-action="next"]',
+  backButton: '[data-action="back"]',
+  field: (name: string) => `[data-field="${name}"]`,
+  dropdown: (name: string) => `[data-dropdown="${name}"]`,
+  toggle: (name: string) => `[data-toggle="${name}"]`,
+  slider: (name: string) => `[data-slider="${name}"]`,
+  modal: '[data-modal="true"]',
+  modalTrigger: (type: string) => `[data-modal-trigger="${type}"]`,
+};
+```
+
+## Design Principles
+
+1. **Explicit Test Attributes**: Every interactive element has stable `data-*` attributes
+2. **Minimal HTML**: Only essential structure, no framework artifacts
+3. **Self-Contained**: Each fixture includes shared CSS via `common.css`
+4. **Navigation-Aware**: Buttons link to appropriate next/previous fixtures
+5. **Form Fields Match Domain**: Field names align with `HostedSessionConfig` entity
+
+## Testing Verification
+
+For each fixture, verify:
+- [ ] `data-step` attribute present on body
+- [ ] `data-indicator` present for step identification
+- [ ] All navigation buttons have `data-action`
+- [ ] All form fields have appropriate `data-*` attributes
+- [ ] Modal fixtures have `data-modal="true"`
+- [ ] Navigation links point to correct fixtures

resources/mock-fixtures/common.css

@@ -0,0 +1,354 @@
+/* Common styles for mock fixtures */
+* { 
+  box-sizing: border-box; 
+  margin: 0; 
+  padding: 0; 
+}
+
+body { 
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
+  background: #1a1a2e; 
+  color: #eee; 
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  background: #16213e;
+  padding: 16px 24px;
+  border-bottom: 1px solid #0f3460;
+}
+
+.step-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #888;
+}
+
+.step-indicator .current {
+  color: #e94560;
+  font-weight: bold;
+}
+
+.main {
+  flex: 1;
+  padding: 32px 24px;
+  max-width: 600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.page-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  color: #aaa;
+  margin-bottom: 6px;
+}
+
+.form-label.required::after {
+  content: " *";
+  color: #e94560;
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 12px 16px;
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 4px;
+  color: #eee;
+  font-size: 16px;
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: #e94560;
+}
+
+textarea.form-input {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.footer {
+  background: #16213e;
+  padding: 16px 24px;
+  border-top: 1px solid #0f3460;
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn {
+  padding: 12px 24px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #e94560;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #ff6b6b;
+}
+
+.btn-secondary {
+  background: transparent;
+  color: #aaa;
+  border: 1px solid #0f3460;
+}
+
+.btn-secondary:hover {
+  background: #0f3460;
+  color: #eee;
+}
+
+/* Toggle/Checkbox styles */
+.toggle-group {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.toggle-input {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.toggle-label {
+  font-size: 14px;
+  color: #eee;
+  cursor: pointer;
+}
+
+/* Slider styles */
+.slider-group {
+  margin-bottom: 20px;
+}
+
+.slider-header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.slider-label {
+  font-size: 14px;
+  color: #aaa;
+}
+
+.slider-value {
+  font-size: 14px;
+  color: #e94560;
+  font-weight: bold;
+}
+
+.slider-input {
+  width: 100%;
+  height: 8px;
+  border-radius: 4px;
+  background: #0f3460;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+.slider-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #e94560;
+  cursor: pointer;
+}
+
+/* List styles */
+.list-container {
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 4px;
+  min-height: 120px;
+  margin-bottom: 16px;
+  padding: 12px;
+}
+
+.list-empty {
+  color: #666;
+  text-align: center;
+  padding: 24px;
+  font-style: italic;
+}
+
+.list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  background: #1a1a2e;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.list-item:hover {
+  background: #0f3460;
+}
+
+.list-item:last-child {
+  margin-bottom: 0;
+}
+
+.list-item.selected {
+  border: 2px solid #e94560;
+}
+
+/* Modal styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: #1a1a2e;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  border: 1px solid #0f3460;
+}
+
+.modal-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid #0f3460;
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.modal-body {
+  padding: 24px;
+}
+
+.modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #0f3460;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+/* Search input */
+.search-group {
+  margin-bottom: 16px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 12px 16px;
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 4px;
+  color: #eee;
+  font-size: 16px;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #e94560;
+}
+
+/* Grid layout for cars/tracks */
+.grid-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.grid-item {
+  padding: 16px;
+  background: #16213e;
+  border: 1px solid #0f3460;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.grid-item:hover {
+  border-color: #e94560;
+}
+
+.grid-item.selected {
+  border-color: #e94560;
+  background: #0f3460;
+}
+
+/* Center layout for landing page */
+.center-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 32px;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.hero-subtitle {
+  font-size: 16px;
+  color: #888;
+  margin-bottom: 32px;
+}
+
+.btn-large {
+  padding: 16px 48px;
+  font-size: 18px;
+}
+
+/* Display field (read-only) */
+.display-field {
+  padding: 12px 16px;
+  background: #0f3460;
+  border: 1px solid #0f3460;
+  border-radius: 4px;
+  color: #aaa;
+  font-size: 16px;
+}

resources/mock-fixtures/step-02-hosted-racing.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Hosted Racing</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="2">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="hosted-racing">
+      <span>Step</span>
+      <span class="current">2</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Hosted Racing</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <div class="center-content">
+      <h1 class="hero-title">Hosted Racing</h1>
+      <p class="hero-subtitle">Create and manage your own racing sessions</p>
+      <button 
+        type="button" 
+        class="btn btn-primary btn-large"
+        data-action="create"
+        onclick="window.location.href='step-03-create-race.html'"
+      >
+        Create a Race
+      </button>
+    </div>
+  </main>
+  
+</body>
+</html>

resources/mock-fixtures/step-03-create-race.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Race Information</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="3">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="race-information">
+      <span>Step</span>
+      <span class="current">3</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Race Information</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Race Information</h1>
+    
+    <form id="race-info-form">
+      <div class="form-group">
+        <label class="form-label required" for="sessionName">Session Name</label>
+        <input 
+          type="text" 
+          id="sessionName"
+          class="form-input"
+          data-field="sessionName"
+          placeholder="Enter session name"
+          required
+        />
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label" for="password">Password</label>
+        <input 
+          type="password" 
+          id="password"
+          class="form-input"
+          data-field="password"
+          placeholder="Optional password"
+        />
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label" for="description">Description</label>
+        <textarea 
+          id="description"
+          class="form-input"
+          data-field="description"
+          placeholder="Optional session description"
+        ></textarea>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-02-hosted-racing.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-04-race-information.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-04-race-information.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Server Details</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="4">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="server-details">
+      <span>Step</span>
+      <span class="current">4</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Server Details</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Server Details</h1>
+    
+    <form id="server-details-form">
+      <div class="form-group">
+        <label class="form-label" for="region">Server Region</label>
+        <select 
+          id="region"
+          class="form-select"
+          data-dropdown="region"
+        >
+          <option value="us-east">US East</option>
+          <option value="us-west">US West</option>
+          <option value="eu-central">EU Central</option>
+          <option value="eu-west">EU West</option>
+          <option value="asia">Asia</option>
+          <option value="oceania">Oceania</option>
+        </select>
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="startNow"
+          class="toggle-input"
+          data-toggle="startNow"
+        />
+        <label class="toggle-label" for="startNow">Start session immediately</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-03-create-race.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-05-server-details.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-05-server-details.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Set Admins</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="5">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="set-admins">
+      <span>Step</span>
+      <span class="current">5</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Set Admins</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Set Admins</h1>
+    
+    <p style="color: #888; margin-bottom: 16px;">Add administrators who can manage this session.</p>
+    
+    <div class="list-container" data-list="admins">
+      <div class="list-empty">No admins added yet</div>
+    </div>
+    
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-modal-trigger="admin"
+      onclick="window.location.href='step-07-add-admin.html'"
+    >
+      Add Admin
+    </button>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-04-race-information.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-06-set-admins.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-06-set-admins.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Time Limits</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="7">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="time-limits">
+      <span>Step</span>
+      <span class="current">7</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Time Limits</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Time Limits</h1>
+    
+    <form id="time-limits-form">
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Practice Length</span>
+          <span class="slider-value">15 min</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="practice"
+          min="0"
+          max="120"
+          value="15"
+        />
+      </div>
+      
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Qualify Length</span>
+          <span class="slider-value">10 min</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="qualify"
+          min="0"
+          max="60"
+          value="10"
+        />
+      </div>
+      
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Race Length</span>
+          <span class="slider-value">20 laps</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="race"
+          min="1"
+          max="500"
+          value="20"
+        />
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="unlimitedTime"
+          class="toggle-input"
+          data-toggle="unlimitedTime"
+        />
+        <label class="toggle-label" for="unlimitedTime">Unlimited time</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-05-server-details.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-08-time-limits.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-07-add-admin.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Add Admin</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="6" data-modal="true">
+  
+  <div class="modal-overlay">
+    <div class="modal-content">
+      <header class="modal-header">
+        <h2 class="modal-title" data-indicator="add-admin">Add an Admin</h2>
+      </header>
+      
+      <div class="modal-body">
+        <div class="search-group">
+          <input 
+            type="text" 
+            class="search-input"
+            data-field="adminSearch"
+            placeholder="Search for admin by name..."
+          />
+        </div>
+        
+        <div class="list-container" data-list="adminResults">
+          <div class="list-item" data-item="admin-001">
+            <span>John Smith</span>
+            <button type="button" class="btn btn-secondary" data-action="select">Select</button>
+          </div>
+          <div class="list-item" data-item="admin-002">
+            <span>Jane Doe</span>
+            <button type="button" class="btn btn-secondary" data-action="select">Select</button>
+          </div>
+          <div class="list-item" data-item="admin-003">
+            <span>Bob Wilson</span>
+            <button type="button" class="btn btn-secondary" data-action="select">Select</button>
+          </div>
+        </div>
+      </div>
+      
+      <footer class="modal-footer">
+        <button 
+          type="button" 
+          class="btn btn-secondary"
+          data-action="cancel"
+          onclick="window.location.href='step-05-server-details.html'"
+        >
+          Cancel
+        </button>
+        <button 
+          type="button" 
+          class="btn btn-primary"
+          data-action="confirm"
+          onclick="window.location.href='step-05-server-details.html'"
+        >
+          Add Selected
+        </button>
+      </footer>
+    </div>
+  </div>
+  
+</body>
+</html>

resources/mock-fixtures/step-08-time-limits.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Set Cars</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="8">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="set-cars">
+      <span>Step</span>
+      <span class="current">8</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Set Cars</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Set Cars</h1>
+    
+    <p style="color: #888; margin-bottom: 16px;">Select the cars available for this session.</p>
+    
+    <div class="list-container" data-list="cars">
+      <div class="list-empty">No cars selected yet</div>
+    </div>
+    
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-modal-trigger="car"
+      onclick="window.location.href='step-10-add-car.html'"
+    >
+      Add Car
+    </button>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-06-set-admins.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-09-set-cars.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-09-set-cars.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Set Car Classes</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="10">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="car-classes">
+      <span>Step</span>
+      <span class="current">10</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Set Car Classes</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Set Car Classes</h1>
+    
+    <p style="color: #888; margin-bottom: 16px;">Configure multi-class race settings.</p>
+    
+    <form id="car-classes-form">
+      <div class="form-group">
+        <label class="form-label" for="carClass">Car Class</label>
+        <select 
+          id="carClass"
+          class="form-select"
+          data-dropdown="carClass"
+        >
+          <option value="gt3">GT3</option>
+          <option value="gt4">GT4</option>
+          <option value="lmp2">LMP2</option>
+          <option value="lmp3">LMP3</option>
+          <option value="prototype">Prototype</option>
+        </select>
+      </div>
+      
+      <div class="list-container" data-list="classAssignments">
+        <div class="list-empty">No class assignments yet</div>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-08-time-limits.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-11-set-car-classes.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-10-add-car.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Add Car</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="9" data-modal="true">
+  
+  <div class="modal-overlay">
+    <div class="modal-content">
+      <header class="modal-header">
+        <h2 class="modal-title" data-indicator="add-car">Add a Car</h2>
+      </header>
+      
+      <div class="modal-body">
+        <div class="search-group">
+          <input 
+            type="text" 
+            class="search-input"
+            data-field="carSearch"
+            placeholder="Search for cars..."
+          />
+        </div>
+        
+        <div class="grid-list" data-list="carResults">
+          <div class="grid-item" data-item="car-001">
+            <strong>Porsche 911 GT3 R</strong>
+            <span style="color: #888; font-size: 12px;">GT3</span>
+          </div>
+          <div class="grid-item" data-item="car-002">
+            <strong>Ferrari 488 GT3</strong>
+            <span style="color: #888; font-size: 12px;">GT3</span>
+          </div>
+          <div class="grid-item" data-item="car-003">
+            <strong>BMW M4 GT3</strong>
+            <span style="color: #888; font-size: 12px;">GT3</span>
+          </div>
+          <div class="grid-item" data-item="car-004">
+            <strong>Mercedes AMG GT3</strong>
+            <span style="color: #888; font-size: 12px;">GT3</span>
+          </div>
+        </div>
+      </div>
+      
+      <footer class="modal-footer">
+        <button 
+          type="button" 
+          class="btn btn-secondary"
+          data-action="cancel"
+          onclick="window.location.href='step-08-time-limits.html'"
+        >
+          Cancel
+        </button>
+        <button 
+          type="button" 
+          class="btn btn-primary"
+          data-action="confirm"
+          onclick="window.location.href='step-08-time-limits.html'"
+        >
+          Add Selected
+        </button>
+      </footer>
+    </div>
+  </div>
+  
+</body>
+</html>

resources/mock-fixtures/step-11-set-car-classes.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Set Track</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="11">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="set-track">
+      <span>Step</span>
+      <span class="current">11</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Set Track</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Set Track</h1>
+    
+    <p style="color: #888; margin-bottom: 16px;">Select the track for this session.</p>
+    
+    <div class="form-group">
+      <label class="form-label">Selected Track</label>
+      <div class="display-field" data-field="selectedTrack">No track selected</div>
+    </div>
+    
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-modal-trigger="track"
+      onclick="window.location.href='step-13-add-track.html'"
+    >
+      Select Track
+    </button>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-09-set-cars.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-12-set-track.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-12-set-track.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Track Options</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="13">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="track-options">
+      <span>Step</span>
+      <span class="current">13</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Track Options</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Track Options</h1>
+    
+    <form id="track-options-form">
+      <div class="form-group">
+        <label class="form-label" for="trackConfig">Track Configuration</label>
+        <select 
+          id="trackConfig"
+          class="form-select"
+          data-dropdown="trackConfig"
+        >
+          <option value="full">Full Course</option>
+          <option value="short">Short Course</option>
+          <option value="oval">Oval</option>
+          <option value="rallycross">Rallycross</option>
+        </select>
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="dynamicTrack"
+          class="toggle-input"
+          data-toggle="dynamicTrack"
+        />
+        <label class="toggle-label" for="dynamicTrack">Dynamic track</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-11-set-car-classes.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-14-track-options.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-13-add-track.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Add Track</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="12" data-modal="true">
+  
+  <div class="modal-overlay">
+    <div class="modal-content">
+      <header class="modal-header">
+        <h2 class="modal-title" data-indicator="add-track">Add a Track</h2>
+      </header>
+      
+      <div class="modal-body">
+        <div class="search-group">
+          <input 
+            type="text" 
+            class="search-input"
+            data-field="trackSearch"
+            placeholder="Search for tracks..."
+          />
+        </div>
+        
+        <div class="grid-list" data-list="trackResults">
+          <div class="grid-item" data-item="track-001">
+            <strong>Spa-Francorchamps</strong>
+            <span style="color: #888; font-size: 12px;">Belgium</span>
+          </div>
+          <div class="grid-item" data-item="track-002">
+            <strong>Nürburgring</strong>
+            <span style="color: #888; font-size: 12px;">Germany</span>
+          </div>
+          <div class="grid-item" data-item="track-003">
+            <strong>Daytona International</strong>
+            <span style="color: #888; font-size: 12px;">USA</span>
+          </div>
+          <div class="grid-item" data-item="track-004">
+            <strong>Suzuka Circuit</strong>
+            <span style="color: #888; font-size: 12px;">Japan</span>
+          </div>
+        </div>
+      </div>
+      
+      <footer class="modal-footer">
+        <button 
+          type="button" 
+          class="btn btn-secondary"
+          data-action="cancel"
+          onclick="window.location.href='step-11-set-car-classes.html'"
+        >
+          Cancel
+        </button>
+        <button 
+          type="button" 
+          class="btn btn-primary"
+          data-action="confirm"
+          onclick="window.location.href='step-11-set-car-classes.html'"
+        >
+          Select
+        </button>
+      </footer>
+    </div>
+  </div>
+  
+</body>
+</html>

resources/mock-fixtures/step-14-track-options.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Time of Day</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="14">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="time-of-day">
+      <span>Step</span>
+      <span class="current">14</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Time of Day</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Time of Day</h1>
+    
+    <form id="time-of-day-form">
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Time of Day</span>
+          <span class="slider-value">12:00</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="timeOfDay"
+          min="0"
+          max="24"
+          value="12"
+        />
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label" for="raceDate">Race Date</label>
+        <input 
+          type="date" 
+          id="raceDate"
+          class="form-input"
+          data-field="raceDate"
+        />
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="simulatedTime"
+          class="toggle-input"
+          data-toggle="simulatedTime"
+        />
+        <label class="toggle-label" for="simulatedTime">Simulated time progression</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-12-set-track.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-15-time-of-day.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-15-time-of-day.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Weather</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="15">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="weather">
+      <span>Step</span>
+      <span class="current">15</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Weather</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Weather</h1>
+    
+    <form id="weather-form">
+      <div class="form-group">
+        <label class="form-label" for="weatherType">Weather Type</label>
+        <select 
+          id="weatherType"
+          class="form-select"
+          data-dropdown="weatherType"
+        >
+          <option value="clear">Clear</option>
+          <option value="partly-cloudy">Partly Cloudy</option>
+          <option value="mostly-cloudy">Mostly Cloudy</option>
+          <option value="overcast">Overcast</option>
+        </select>
+      </div>
+      
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Temperature</span>
+          <span class="slider-value">20°C</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="temperature"
+          min="-10"
+          max="45"
+          value="20"
+        />
+      </div>
+      
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Humidity</span>
+          <span class="slider-value">50%</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="humidity"
+          min="0"
+          max="100"
+          value="50"
+        />
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="dynamicWeather"
+          class="toggle-input"
+          data-toggle="dynamicWeather"
+        />
+        <label class="toggle-label" for="dynamicWeather">Dynamic weather</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-14-track-options.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-16-weather.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-16-weather.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Race Options</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="16">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="race-options">
+      <span>Step</span>
+      <span class="current">16</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Race Options</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Race Options</h1>
+    
+    <form id="race-options-form">
+      <div class="form-group">
+        <label class="form-label" for="maxDrivers">Maximum Drivers</label>
+        <input 
+          type="number" 
+          id="maxDrivers"
+          class="form-input"
+          data-field="maxDrivers"
+          value="32"
+          min="1"
+          max="60"
+        />
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="rollingStart"
+          class="toggle-input"
+          data-toggle="rollingStart"
+        />
+        <label class="toggle-label" for="rollingStart">Rolling start</label>
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="fullCourseCautions"
+          class="toggle-input"
+          data-toggle="fullCourseCautions"
+        />
+        <label class="toggle-label" for="fullCourseCautions">Full course cautions</label>
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="fastRepairs"
+          class="toggle-input"
+          data-toggle="fastRepairs"
+        />
+        <label class="toggle-label" for="fastRepairs">Fast repairs</label>
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-15-time-of-day.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-17-race-options.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-17-race-options.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Team Driving</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="17">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="team-driving">
+      <span>Step</span>
+      <span class="current">17</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Team Driving</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Team Driving</h1>
+    
+    <form id="team-driving-form">
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="teamDriving"
+          class="toggle-input"
+          data-toggle="teamDriving"
+        />
+        <label class="toggle-label" for="teamDriving">Enable team driving</label>
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label" for="minDrivers">Min Drivers per Team</label>
+        <input 
+          type="number" 
+          id="minDrivers"
+          class="form-input"
+          data-field="minDrivers"
+          value="1"
+          min="1"
+          max="16"
+        />
+      </div>
+      
+      <div class="form-group">
+        <label class="form-label" for="maxDriversTeam">Max Drivers per Team</label>
+        <input 
+          type="number" 
+          id="maxDriversTeam"
+          class="form-input"
+          data-field="maxDrivers"
+          value="4"
+          min="1"
+          max="16"
+        />
+      </div>
+    </form>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-16-weather.html'"
+    >
+      Back
+    </button>
+    <button 
+      type="button" 
+      class="btn btn-primary"
+      data-action="next"
+      onclick="window.location.href='step-18-track-conditions.html'"
+    >
+      Next
+    </button>
+  </footer>
+  
+</body>
+</html>

resources/mock-fixtures/step-18-track-conditions.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>iRacing - Track Conditions</title>
+  <link rel="stylesheet" href="common.css">
+</head>
+<body data-step="18">
+  
+  <header class="header">
+    <div class="step-indicator" data-indicator="track-conditions">
+      <span>Step</span>
+      <span class="current">18</span>
+      <span>of 18</span>
+      <span>—</span>
+      <span>Track Conditions</span>
+    </div>
+  </header>
+  
+  <main class="main">
+    <h1 class="page-title">Track Conditions</h1>
+    
+    <form id="track-conditions-form">
+      <div class="form-group">
+        <label class="form-label" for="trackState">Track State</label>
+        <select 
+          id="trackState"
+          class="form-select"
+          data-dropdown="trackState"
+        >
+          <option value="auto-generated">Auto-generated</option>
+          <option value="clean">Clean</option>
+          <option value="low-rubber">Low Rubber</option>
+          <option value="medium-rubber">Medium Rubber</option>
+          <option value="high-rubber">High Rubber</option>
+        </select>
+      </div>
+      
+      <div class="toggle-group">
+        <input 
+          type="checkbox" 
+          id="marbles"
+          class="toggle-input"
+          data-toggle="marbles"
+        />
+        <label class="toggle-label" for="marbles">Marbles simulation</label>
+      </div>
+      
+      <div class="slider-group">
+        <div class="slider-header">
+          <span class="slider-label">Rubber Level</span>
+          <span class="slider-value">50%</span>
+        </div>
+        <input 
+          type="range" 
+          class="slider-input"
+          data-slider="rubberLevel"
+          min="0"
+          max="100"
+          value="50"
+        />
+      </div>
+    </form>
+    
+    <div style="background: #0f3460; border-radius: 4px; padding: 16px; margin-top: 24px;">
+      <p style="color: #e94560; font-weight: bold; margin-bottom: 8px;">⚠️ Final Step</p>
+      <p style="color: #888; font-size: 14px;">Review your settings before creating the session. No submit button - automation stops here for manual review.</p>
+    </div>
+  </main>
+  
+  <footer class="footer">
+    <button 
+      type="button" 
+      class="btn btn-secondary"
+      data-action="back"
+      onclick="window.location.href='step-17-race-options.html'"
+    >
+      Back
+    </button>
+    <!-- No Next/Submit button on final step - automation stops here for manual review -->
+  </footer>
+  
+</body>
+</html>