fixed css

specs/001-fix-ui-ws-validation/quickstart.md

@@ -0,0 +1,53 @@
+# 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.