ss-tools/specs/005-fix-ui-ws-validation/quickstart.md

Quickstart: Fix UI Styling, WebSocket Port Mismatch, and URL Validation

Development Setup

1. Frontend Styling:

   • Ensure Tailwind CSS is initialized: cd frontend && npm install
   • Verify frontend/src/app.css contains:

     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

   • Import in frontend/src/routes/+layout.svelte:

     <script>
       import '../app.css';
     </script>
     

2. WebSocket Configuration:

   • Create/Update .env in frontend/:

     PUBLIC_WS_URL=ws://localhost:8000
     

   • Use in Svelte components:

     import { PUBLIC_WS_URL } from '$env/static/public';
     const wsUrl = PUBLIC_WS_URL || `ws://${window.location.hostname}:8000`;
     

3. Backend URL Validation:

   • Update superset_tool/models.py (or relevant model file):

     from pydantic import validator
     
     class ServiceConnection(BaseModel):
         base_url: str
     
         @validator('base_url')
         def normalize_url(cls, v):
             if not v.endswith('/api/v1'):
                 return f"{v.rstrip('/')}/api/v1"
             return v
     

Verification Steps

1. Run backend: cd backend && uvicorn src.app:app --reload
2. Run frontend: cd frontend && npm run dev
3. Open browser and verify:
   • UI is styled (Tailwind classes working).
   • Logs appear in real-time (WebSocket connected).
   • External service connection accepts base URLs.