chore: add feature planner setup for docker-watcher-core

Create structured plan files with 12 phases covering the full implementation: scaffold, store, crypto, Docker/NPM clients, registry poller, webhook, deployer, API layer, SvelteKit frontend, embedding, and hardening.
2026-03-27 20:42:42 +03:00
parent 17206933f3
commit 0bb52f9ec6
14 changed files with 768 additions and 0 deletions
@@ -0,0 +1,64 @@
+# 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. -->