alexei.dolgolyov
0bb52f9ec6
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.
3.3 KiB
3.3 KiB
Phase 9: SvelteKit Dashboard & Project Views
Status: ⬜ Not Started Parent plan: 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 configweb/svelte.config.js— SvelteKit config with static adapterweb/vite.config.ts— Vite config with API proxy for devweb/src/app.html— base HTMLweb/src/lib/api.ts— API clientweb/src/lib/types.ts— shared TypeScript typesweb/src/routes/+layout.svelte— app layout with navigationweb/src/routes/+page.svelte— dashboardweb/src/routes/projects/+page.svelte— project listweb/src/routes/projects/[id]/+page.svelte— project detailweb/src/lib/components/StatusBadge.svelte— status indicatorweb/src/lib/components/InstanceCard.svelte— instance displayweb/src/lib/components/ProjectCard.svelte— project summary cardweb/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
/apitohttp://localhost:8080 - Use SvelteKit's
fetchfor 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