# 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:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```
   - Import in `frontend/src/routes/+layout.svelte`:
     ```svelte
     <script>
       import '../app.css';
     </script>
     ```

2. **WebSocket Configuration**:
   - Create/Update `.env` in `frontend/`:
     ```env
     PUBLIC_WS_URL=ws://localhost:8000
     ```
   - Use in Svelte components:
     ```javascript
     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):
     ```python
     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.