Implementation Plan: Fix UI Styling, WebSocket Port Mismatch, and URL Validation

Branch: 005-fix-ui-ws-validation | Date: 2025-12-20 | Spec: specs/005-fix-ui-ws-validation/spec.md

Input: Feature specification from /specs/005-fix-ui-ws-validation/spec.md

Summary

This feature addresses three critical issues: unstyled UI due to missing Tailwind CSS imports, broken real-time logs caused by WebSocket port mismatches in development, and strict URL validation that prevents successful connections to external services. The technical approach involves importing Tailwind in the root layout, using environment variables for WebSocket URLs with a fallback, and relaxing URL validation to automatically append version suffixes.

Technical Context

Language/Version: Python 3.9+, Node.js 18+ Primary Dependencies: FastAPI, SvelteKit, Tailwind CSS, Pydantic Storage: N/A (Configuration based) Testing: pytest Target Platform: Linux server Project Type: Web application (frontend + backend) Performance Goals: Real-time updates within 500ms Constraints: SPA-First Architecture (No Node.js in production) Scale/Scope: Targeted fixes for UI, real-time communication, and validation logic.

Constitution Check

GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.

Principle	Status	Notes
I. SPA-First Architecture	PASS	SvelteKit SPA will be built and served by FastAPI. Post-design: Confirmed.
II. API-Driven Communication	PASS	Real-time logs via WebSockets; configuration via REST. Post-design: Confirmed.
III. Modern Stack Consistency	PASS	Uses SvelteKit, FastAPI, and Tailwind CSS. Post-design: Confirmed.
IV. Semantic Protocol Adherence	PASS	Implementation will use anchors and contracts as per `semantic_protocol.md`. Post-design: Confirmed.

Project Structure

Documentation (this feature)

specs/005-fix-ui-ws-validation/
├── plan.md              # This file
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output
├── quickstart.md        # Phase 1 output
├── contracts/           # Phase 1 output
└── tasks.md             # Phase 2 output

Source Code (repository root)

backend/
├── src/
│   ├── models/          # URL validation logic in superset_tool/models.py (or equivalent)
│   ├── services/
│   └── api/             # WebSocket and REST endpoints
└── tests/

frontend/
├── src/
│   ├── components/
│   ├── pages/
│   └── routes/          # +layout.svelte for global styling
└── tests/

Structure Decision: Web application structure (Option 2) is used as both frontend and backend components are modified.

Complexity Tracking

Fill ONLY if Constitution Check has violations that must be justified

Violation	Why Needed	Simpler Alternative Rejected Because
None	N/A	N/A

3.1 KiB Raw Permalink Blame History