# Phase 9: SvelteKit Dashboard & Project Views

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Build the SvelteKit frontend with the dashboard overview and project detail views — project list, instance status, controls, and deploy history.

## Tasks

- [ ] Task 1: Initialize SvelteKit project in `web/` directory with TypeScript, static adapter
- [ ] Task 2: Set up Tailwind CSS (or project's preferred styling)
- [ ] Task 3: Create shared API client (`lib/api.ts`) — typed fetch wrapper for all backend endpoints
- [ ] Task 4: Define TypeScript types (`lib/types.ts`) — Project, Stage, Instance, Deploy, Registry, Settings
- [ ] Task 5: Create layout with navigation — sidebar or top nav with Dashboard, Projects, Deploy, Settings links
- [ ] Task 6: Dashboard page (`routes/+page.svelte`) — project overview cards with instance counts, status indicators, latest activity
- [ ] Task 7: Projects list page (`routes/projects/+page.svelte`) — all projects with quick stats, "Add Project" button
- [ ] Task 8: Project detail page (`routes/projects/[id]/+page.svelte`) — stages, instances per stage, controls
- [ ] Task 9: Instance controls — Stop, Start, Restart, Remove buttons with confirmation dialogs
- [ ] Task 10: Deploy history section in project detail — recent deploys with status, timestamp, tag
- [ ] Task 11: "Deploy new version" dropdown — list available tags from registry, trigger deploy
- [ ] Task 12: Create reusable components: StatusBadge, InstanceCard, ProjectCard, ConfirmDialog

## Files to Modify/Create
- `web/package.json` — SvelteKit project config
- `web/svelte.config.js` — SvelteKit config with static adapter
- `web/vite.config.ts` — Vite config with API proxy for dev
- `web/src/app.html` — base HTML
- `web/src/lib/api.ts` — API client
- `web/src/lib/types.ts` — shared TypeScript types
- `web/src/routes/+layout.svelte` — app layout with navigation
- `web/src/routes/+page.svelte` — dashboard
- `web/src/routes/projects/+page.svelte` — project list
- `web/src/routes/projects/[id]/+page.svelte` — project detail
- `web/src/lib/components/StatusBadge.svelte` — status indicator
- `web/src/lib/components/InstanceCard.svelte` — instance display
- `web/src/lib/components/ProjectCard.svelte` — project summary card
- `web/src/lib/components/ConfirmDialog.svelte` — confirmation modal

## Acceptance Criteria
- SvelteKit project builds to static output
- Dashboard shows all projects with live status
- Project detail shows stages, instances, and controls
- Instance controls trigger correct API calls
- Deploy dropdown fetches and displays available tags
- UI is responsive and clean

## Notes
- SvelteKit static adapter for embedding in Go binary
- API proxy in vite.config.ts for dev: proxy `/api` to `http://localhost:8080`
- Use SvelteKit's `fetch` for SSR-compatible data loading
- Status colors: green=running, yellow=starting, red=failed, gray=stopped
- Keep components small and reusable

## Review Checklist
- [ ] All tasks completed
- [ ] TypeScript types match backend API response format
- [ ] API client handles errors gracefully with user feedback
- [ ] No hardcoded API URLs (use relative paths)
- [ ] Components are reusable and well-structured

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->