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.
65 lines
3.3 KiB
Markdown
65 lines
3.3 KiB
Markdown
# 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. -->
|