alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
50e8519220e1034e5d0c8c279b5b28fb24093071
web-app-launcher/plans/service-integrations/phase-2-widget-ui.md
T
alexei.dolgolyov 50e8519220 feat(service-integrations): phase 2 — integration widget & app form UI 
- Add 6 renderer components: StatCard, Gauge, List, Progress, AlertBanner, Chart
- Add IntegrationWidget container with auto-refresh, loading, error states
- Add IntegrationAlertOverlay for layout-level critical alerts
- Add IntegrationConfigFields for dynamic form generation from Zod schemas
- Register integration type in WidgetRenderer
- Extend WidgetCreationForm with integration app/endpoint pickers
- Extend AppForm with integration config section and test connection button
- Add /api/integrations/alerts endpoint
2026-03-25 22:07:51 +03:00

5.2 KiB
Raw Blame History

Phase 2: Integration Widget & App Form UI

Status: ⬜ Not Started Parent plan: 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

Reference in New Issue View Git Blame Copy Permalink