tiny-forge/plans/docker-watcher-core/phase-9-dashboard.md

# Phase 9: SvelteKit Dashboard & Project Views

**Status:** ✅ Complete
**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

- [x] Task 1: Initialize SvelteKit project in `web/` directory with TypeScript, static adapter
- [x] Task 2: Set up Tailwind CSS v4 with @tailwindcss/vite plugin
- [x] Task 3: Create shared API client (`lib/api.ts`) — typed fetch wrapper for all backend endpoints
- [x] Task 4: Define TypeScript types (`lib/types.ts`) — Project, Stage, Instance, Deploy, Registry, Settings
- [x] Task 5: Create layout with navigation — sidebar with Dashboard, Projects, Deploy, Settings links
- [x] Task 6: Dashboard page (`routes/+page.svelte`) — project overview cards with instance counts, status indicators
- [x] Task 7: Projects list page (`routes/projects/+page.svelte`) — all projects with quick stats, "Add Project" button
- [x] Task 8: Project detail page (`routes/projects/[id]/+page.svelte`) — stages, instances per stage, controls
- [x] Task 9: Instance controls — Stop, Start, Restart, Remove buttons with confirmation dialogs
- [x] Task 10: Deploy history section in project detail — recent deploys with status, timestamp, tag
- [x] Task 11: "Deploy new version" dropdown — list available tags from registry, trigger deploy
- [x] 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

Phase 9 is complete. All 14 files have been created in the `web/` directory:

**Configuration files:**
- `web/package.json` — Svelte 5, SvelteKit 2, Tailwind CSS v4, static adapter, TypeScript
- `web/svelte.config.js` — Static adapter with SPA fallback (`index.html`)
- `web/vite.config.ts` — Tailwind v4 vite plugin + `/api` proxy to `localhost:8080`
- `web/tsconfig.json` — Strict TypeScript, bundler module resolution
- `web/src/app.html` — Base HTML shell
- `web/src/app.css` — Tailwind v4 import
- `web/src/routes/+layout.ts` — Disables SSR, enables prerender for static adapter

**Core library:**
- `web/src/lib/types.ts` — All TypeScript types matching Go backend models exactly (Project, Stage, Instance, Deploy, DeployLog, Registry, Settings, ApiEnvelope)
- `web/src/lib/api.ts` — Full typed API client covering all endpoints (projects, instances, deploys, registries, settings). Unwraps envelope, throws `ApiError` on failure.

**Components (Svelte 5 runes):**
- `StatusBadge.svelte` — Color-coded status pill (green/yellow/red/gray/blue)
- `ConfirmDialog.svelte` — Modal with danger/primary variants
- `InstanceCard.svelte` — Instance display with stop/start/restart/remove controls
- `ProjectCard.svelte` — Project summary card for dashboard grid

**Pages:**
- `+layout.svelte` — Sidebar navigation (Dashboard, Projects, Deploy, Settings)
- `routes/+page.svelte` — Dashboard with stats cards and project grid
- `routes/projects/+page.svelte` — Project table with inline add-project form
- `routes/projects/[id]/+page.svelte` — Full project detail: stages, instances, deploy form, deploy history

**Key decisions:**
- Used Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`) throughout
- Tailwind CSS v4 with `@tailwindcss/vite` plugin (no PostCSS config needed)
- Client-side only rendering (SSR disabled) for static adapter compatibility
- API client uses relative `/api/` paths — works in both dev (vite proxy) and prod (embedded)
- All API calls include loading spinners and error states with retry buttons

**Ready for Phase 10:** Settings pages, Quick Deploy page, and remaining UI routes. The API client already includes all endpoint wrappers needed.