# 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](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)

```text
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)

```text
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 |
