UI JavaScript Error: ReferenceError on /agents/default page

[wolff2023]

Bug Report: UI JavaScript Error - ReferenceError on /agents/default

Environment

• Station Version: v0.22.1 (built with embedded UI)
• Build Method: make local-install-ui and make rebuild-all
• Browser: Chrome/Safari (confirmed on macOS)
• Server Mode: Direct serve with STN_DEV_MODE=true

Problem

The Station UI throws a JavaScript ReferenceError when loading the agents page, causing the page to fail to render properly.

Error Details

Uncaught ReferenceError: Cannot access 'Se' before initialization
    at T$n (index-DTtxsQdw-1765375052243.js:487:40712)
    at V8 (index-DTtxsQdw-1765375052243.js:49:34462)
    at uM (index-DTtxsQdw-1765375052243.js:49:63492)
    at zq (index-DTtxsQdw-1765375052243.js:49:74307)
    at dB (index-DTtxsQdw-1765375052243.js:49:108844)
    at FQ (index-DTtxsQdw-1765375052243.js:49:107883)
    at $M (index-DTtxsQdw-1765375052243.js:49:107708)
    at aB (index-DTtxsQdw-1765375052243.js:49:104741)
    at SB (index-DTtxsQdw-1765375052243.js:49:116485)
    at MessagePort.Ne (index-DTtxsQdw-1765375052243.js:26:1702)

Additional Console Output:

selection-detector.js:46 [Selection Detector] Text selection detector loaded for: http://localhost:8585/agents/default
index-DTtxsQdw-1765375052243.js:691 Timeline: Last Day - 0 total runs -> 0 filtered runs
index-DTtxsQdw-1765375052243.js:691 Timeline: Last Day - 0 total runs -> 0 filtered runs
[Then crashes with ReferenceError]

Steps to Reproduce

1. Clone Station repository
2. Run make local-install-ui (builds UI and installs binary)
3. Start Station with dev mode: STN_DEV_MODE=true stn serve --local
4. Open browser to http://localhost:8585
5. Navigate to /agents/default route
6. Check browser console - ReferenceError appears

Expected Behavior

• The agents page should load and display without JavaScript errors
• Timeline component should render with run data

Actual Behavior

• JavaScript crashes with "Cannot access 'Se' before initialization"
• Page fails to render properly
• Timeline component logs show 0 runs but then crashes

Root Cause Analysis

This is a Temporal Dead Zone (TDZ) violation in the bundled JavaScript:

Likely causes:

1. Circular dependency in the React components
2. Variable hoisting issue during Vite bundling process
3. Incorrect import order in the source modules
4. Build configuration issue with Vite's module resolution

The minified variable name Se suggests this is occurring during:

• Component initialization
• Module loading/evaluation
• React hook setup

Build Information

• Vite Version: v7.1.2
• Build Output:
  • index-DTtxsQdw-1765375052243.js (3,253.16 kB)
  • Bundled with chunking warnings for large files
• Build Command: vite build (via Makefile)

Impact

• Severity: High - Agents page is unusable
• Scope: Affects all users with embedded UI build
• Workaround: None - page cannot load

Suggested Fixes

1. Check for circular dependencies in UI source code:

   npx madge --circular --extensions ts,tsx ui/src

2. Review import order in components that use timeline/agents functionality

3. Consider adding Vite build config for better module resolution:

   // vite.config.js
   export default {
     build: {
       rollupOptions: {
         output: {
           manualChunks: // Split problematic dependencies
         }
       }
     }
   }

4. Add "use strict" or adjust transpilation target to avoid TDZ issues

Additional Notes

• This is a separate issue from v0.22.1: HTTP/SSH/MCP servers not starting after sync #81 (HTTP server not starting)
• The HTTP/API server works correctly in DEV MODE
• Error only occurs in production-built UI bundle
• Development mode (npm run dev) may not show this issue

Related Files

• ui/src/** - UI source code
• ui/vite.config.js - Vite build configuration
• Makefile - Build commands (build-ui, local-install-ui)