alexei.dolgolyov/tiny-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
777cafb62280228f88fe15a0c06c8a00900bf086
tiny-forge/plans/docker-watcher-core/phase-9-dashboard.md
T
alexei.dolgolyov 09d185d94e feat(docker-watcher): phase 9 - SvelteKit dashboard & project views 
SvelteKit project with Svelte 5, TypeScript, Tailwind CSS v4.
Dashboard with project cards, project detail with stage/instance
management, deploy history, instance controls. Shared API client
and reusable components (StatusBadge, InstanceCard, ProjectCard,
ConfirmDialog). Add Phase 14 (Volumes & Environment) to plan.
2026-03-27 22:15:54 +03:00

5.4 KiB
Raw Blame History

Phase 9: SvelteKit Dashboard & Project Views

Status: ✅ Complete 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 v4 with @tailwindcss/vite plugin
  • 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 with Dashboard, Projects, Deploy, Settings links
  • Task 6: Dashboard page (routes/+page.svelte) — project overview cards with instance counts, status indicators
  • 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

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.

Reference in New Issue View Git Blame Copy Permalink