# Phase 10: Quick Deploy & Settings Pages

**Status:** ⬜ Not Started
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** frontend

## Objective
Build the Quick Deploy page (paste image, auto-inspect, one-click deploy) and all Settings pages (registries, credentials, global settings, webhook URL).

## Tasks

- [ ] Task 1: Quick Deploy page (`routes/deploy/+page.svelte`) — image URL input, inspect button
- [ ] Task 2: Quick Deploy inspect flow — call /api/deploy/inspect, display auto-filled form (project name, port, stage, subdomain)
- [ ] Task 3: Quick Deploy submit — user reviews defaults, clicks Deploy, calls /api/deploy/quick
- [ ] Task 4: Settings layout (`routes/settings/+layout.svelte`) — sub-navigation for settings sections
- [ ] Task 5: Global settings page (`routes/settings/+page.svelte`) — domain, server IP, network, subdomain pattern, polling interval
- [ ] Task 6: Registries page (`routes/settings/registries/+page.svelte`) — list, add, edit, delete, test connection
- [ ] Task 7: Credentials page (`routes/settings/credentials/+page.svelte`) — NPM credentials, registry tokens (masked display)
- [ ] Task 8: Webhook URL display and regenerate button in settings
- [ ] Task 9: Projects config page (`routes/projects/config/+page.svelte` or integrated into project detail) — add/edit/delete projects, configure stages
- [ ] Task 10: Stage configuration form — tag patterns, auto_deploy toggle, max_instances, subdomain override
- [ ] Task 11: Form validation on all input pages — required fields, URL format, port range
- [ ] Task 12: Success/error toast notifications for all form submissions

## Files to Modify/Create
- `web/src/routes/deploy/+page.svelte` — quick deploy
- `web/src/routes/settings/+layout.svelte` — settings layout
- `web/src/routes/settings/+page.svelte` — global settings
- `web/src/routes/settings/registries/+page.svelte` — registry management
- `web/src/routes/settings/credentials/+page.svelte` — credential management
- `web/src/lib/components/Toast.svelte` — toast notifications
- `web/src/lib/components/FormField.svelte` — reusable form field with validation

## Acceptance Criteria
- Quick Deploy: paste image URL → inspect → review defaults → deploy works end-to-end
- All settings are editable and saved via API
- Registry test connection shows success/failure
- Credentials are masked in display (`••••••••`)
- Webhook URL is shown with copy button and regenerate option
- Form validation prevents bad submissions

## Notes
- Quick Deploy is the zero-config entry point — should be dead simple UX
- Credential fields: show mask, edit replaces entirely (no partial edit)
- Registry test: calls POST /api/registries/:id/test, shows connection result
- Toast component: appears top-right, auto-dismiss after 5s, color-coded (green/red)

## Review Checklist
- [ ] All tasks completed
- [ ] Quick deploy flow is intuitive (minimal clicks)
- [ ] Credentials never shown in plaintext in UI
- [ ] Form validation covers required fields and formats
- [ ] Error states are handled with user-friendly messages

## Handoff to Next Phase
<!-- Filled in by the implementation agent after completing this phase. -->