# Research: SvelteKit Integration

## Decision: SvelteKit SPA with FastAPI Backend

### Rationale
SvelteKit provides a robust file-based routing system and shared layout mechanism that fulfills the requirements (FR-001, FR-002, FR-004, FR-005). By using `adapter-static` in SPA mode, we can generate a set of static files that can be served by the existing FastAPI backend, satisfying the constraint of no Node.js server in production (FR-003, Assumptions).

### Alternatives Considered
- **Vanilla Svelte (Current)**: Lacks built-in routing and layout management, leading to manual implementation overhead.
- **SvelteKit with Node.js Server**: Rejected because the project requires the Python backend to be the primary server.
- **Inertia.js**: Requires more tight coupling between backend and frontend than desired for this project.

## Technical Implementation Details

### SvelteKit Configuration (SPA Mode)
1.  **Adapter**: Use `@sveltejs/adapter-static`.
2.  **Fallback**: Configure `fallback: 'index.html'` in `svelte.config.js`.
3.  **Client-Side Rendering**: Create `src/routes/+layout.ts` with:
    ```typescript
    export const ssr = false;
    export const prerender = false;
    ```
    This ensures the entire app is treated as a SPA.

### FastAPI Backend Integration
1.  **Static Files**: Mount the `frontend/build` (or `dist`) directory using `StaticFiles`.
2.  **SPA Routing**: Implement a catch-all route to serve `index.html` for any non-API request. This allows SvelteKit's client-side router to handle deep links like `/settings`.
    ```python
    @app.get("/{full_path:path}")
    async def serve_spa(full_path: str):
        # Check if path exists in static files, else serve index.html
        ...
    ```

### Migration Strategy
1.  **Layout**: Move shared UI (header, footer) from `App.svelte` to `src/routes/+layout.svelte`.
2.  **Routes**: 
    - `Dashboard.svelte` -> `src/routes/+page.svelte` (or `src/routes/dashboard/+page.svelte`)
    - `Settings.svelte` -> `src/routes/settings/+page.svelte`
3.  **API Client**: Reuse existing `frontend/src/lib/api.js` but ensure it works within SvelteKit's load functions if needed (though for pure SPA, standard `onMount` or reactive statements also work).

## Best Practices
- Use SvelteKit's `$lib` alias for shared components and utilities.
- Leverage `+page.ts` `load` functions for data fetching to ensure data is ready before component mount (User Story 2).
- Use SvelteKit's `goto` for programmatic navigation.