# Phase 2: Integration Widget & App Form UI

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

## Objective
Build the frontend components: IntegrationWidget with all endpoint renderers, extend AppForm with integration configuration UI, and update WidgetCreationForm to support integration widgets.

## Tasks

- [ ] Task 1: Create `src/lib/components/widget/integration/IntegrationWidget.svelte` — Container component that resolves integration type from app, fetches endpoint data via `/api/integrations/[appId]/data/[endpointId]`, handles loading/error states, delegates to appropriate renderer.
- [ ] Task 2: Create `src/lib/components/widget/integration/StatCardRenderer.svelte` — Single big number with label, optional trend arrow (up/down/flat), color-coded by threshold. Used for: query counts, session counts, library stats, etc.
- [ ] Task 3: Create `src/lib/components/widget/integration/GaugeRenderer.svelte` — Circular SVG gauge (0-100%). Color-coded: green (<60%), yellow (60-85%), red (>85%). Used for: battery %, CPU %, disk usage.
- [ ] Task 4: Create `src/lib/components/widget/integration/ListRenderer.svelte` — Scrollable list of items with icon, title, subtitle, optional badge. Used for: recent commits, top blocked domains, container list, etc.
- [ ] Task 5: Create `src/lib/components/widget/integration/ProgressRenderer.svelte` — Multiple progress bars with labels and percentages. Used for: torrent downloads, download queue.
- [ ] Task 6: Create `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — Full-width alert banner with icon, message, severity (info/warning/critical). Used for: UPS on battery, brute force detection.
- [ ] Task 7: Create `src/lib/components/widget/integration/ChartRenderer.svelte` — Simple bar or line chart using SVG. Used for: query history, uptime charts.
- [ ] Task 8: Register `integration` widget type in `src/lib/components/widget/WidgetRenderer.svelte` — Import IntegrationWidget, add case to the type switch.
- [ ] Task 9: Extend `src/lib/components/app/AppForm.svelte` — Add collapsible "Integration" section with: type dropdown (from `/api/integrations`), dynamic auth config fields rendered from Zod schema, "Test Connection" button, enable/disable toggle.
- [ ] Task 10: Create `src/lib/components/app/IntegrationConfigFields.svelte` — Dynamic form field generator that renders input fields based on a Zod schema (string → text input, number → number input, boolean → toggle). Used by AppForm.
- [ ] Task 11: Update `src/lib/components/widget/WidgetCreationForm.svelte` — Add integration widget option: app picker (only apps with integration enabled) → endpoint picker → refresh interval.
- [ ] Task 12: Create `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — Layout-level component that polls for critical alerts (UPS on battery, brute force) and renders AlertBannerRenderer at the top of the page. Add to root layout.

## Files to Modify/Create
- `src/lib/components/widget/integration/IntegrationWidget.svelte` — new
- `src/lib/components/widget/integration/StatCardRenderer.svelte` — new
- `src/lib/components/widget/integration/GaugeRenderer.svelte` — new
- `src/lib/components/widget/integration/ListRenderer.svelte` — new
- `src/lib/components/widget/integration/ProgressRenderer.svelte` — new
- `src/lib/components/widget/integration/AlertBannerRenderer.svelte` — new
- `src/lib/components/widget/integration/ChartRenderer.svelte` — new
- `src/lib/components/widget/integration/IntegrationAlertOverlay.svelte` — new
- `src/lib/components/widget/WidgetRenderer.svelte` — modify: add integration case
- `src/lib/components/app/AppForm.svelte` — modify: add integration section
- `src/lib/components/app/IntegrationConfigFields.svelte` — new
- `src/lib/components/widget/WidgetCreationForm.svelte` — modify: add integration option
- `src/routes/+layout.svelte` — modify: add IntegrationAlertOverlay

## Acceptance Criteria
- IntegrationWidget fetches data and renders correct renderer based on endpoint type
- All 6 renderers handle loading, error, and empty states gracefully
- AppForm shows integration config only when a type is selected
- Dynamic form fields match the integration's auth schema
- Test Connection button validates and shows success/failure
- WidgetCreationForm allows creating integration widgets
- Alert overlay polls and shows critical alerts at layout level

## Notes
- Renderers should be visually consistent with existing widget styles (card sizes, colors, typography)
- Use Svelte 5 runes ($state, $derived) for all reactive state
- Auto-refresh: IntegrationWidget should poll at the endpoint's refreshInterval
- Big Bang: this phase depends on Phase 1 types but the renderers can be built with mock data initially
- ⚠️ Temporary breakage: Integration widget type is registered but no real integrations exist yet — widgets will show "no data" until Phase 3+

## Review Checklist
- [ ] All tasks completed
- [ ] Code follows project conventions
- [ ] No unintended side effects
- [ ] Responsive design (mobile + desktop)
- [ ] Loading/error/empty states handled
- [ ] Accessible (keyboard nav, screen reader labels)

## Handoff to Next Phase
<!-- Filled in after completion -->