1.8 KiB
Research: Fix UI Styling, WebSocket Port Mismatch, and URL Validation
WebSocket Port Mismatch Resolution
Decision
Use SvelteKit's $env/static/public for PUBLIC_WS_URL with a client-side fallback logic.
Rationale
SvelteKit allows exposing environment variables to the frontend. By using a public environment variable, we can explicitly set the WebSocket URL in different environments (dev vs. prod).
Alternatives Considered
- Hardcoding: Rejected as it breaks across different environments.
- Relative URLs: WebSockets (
ws://orwss://) cannot be purely relative in all browser contexts without logic to determine the host and port.
URL Validation Relaxation
Decision
Modify the Pydantic model to use a validator (or field_validator in Pydantic v2) that checks for the /api/v1 suffix and appends it if missing, while still ensuring the base URL is valid.
Rationale
This provides a seamless user experience where they can provide just the base URL, and the system handles the API versioning internally.
Alternatives Considered
- Strict Validation with Error Message: Rejected as it causes user frustration (as noted in the spec).
- Manual Suffixing in Service Clients: Rejected as it's better to have a normalized URL in the data model.
Global Styling (Tailwind CSS)
Decision
Import the global CSS file (which includes @tailwind directives) in src/routes/+layout.svelte.
Rationale
This is the standard SvelteKit pattern for ensuring styles are applied globally across all routes.
Alternatives Considered
- Importing in each page: Rejected as it's redundant and hard to maintain.
- Importing in
app.html: Possible, but importing in+layout.svelteallows for better integration with Svelte's build pipeline.