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
parent 114dee57a8
commit 50e8519220
25 changed files with 1360 additions and 1 deletions
@@ -0,0 +1,59 @@
+# Phase 10: Planka Integration + Polish
+
+**Status:** ⬜ Not Started
+**Parent plan:** [PLAN.md](./PLAN.md)
+**Domain:** fullstack
+
+## Objective
+Implement the Planka integration for task/project management visibility, then polish all integration components with proper error states, loading skeletons, empty states, and consistent styling.
+
+## Tasks
+
+### Planka Integration
+- [ ] Task 1: Create `src/lib/server/integrations/planka/schema.ts` — Auth config: `{ email: string, password: string }`.
+- [ ] Task 2: Create `src/lib/server/integrations/planka/client.ts` — HTTP client. Session-based auth (POST `/api/access-tokens` → Bearer token). Endpoints: `/api/cards`, `/api/boards`.
+- [ ] Task 3: Create `src/lib/server/integrations/planka/transform.ts` — My cards → list with board/list context, overdue → list (red highlight), board summary → stat-card (card counts by list).
+- [ ] Task 4: Create `src/lib/server/integrations/planka/index.ts` — Endpoints: `my-cards` (list), `overdue` (list), `board-summary` (stat-card).
+- [ ] Task 5: Register Planka integration in registry.
+
+### Polish & Error Handling
+- [ ] Task 6: Add loading skeleton states to all renderer components (StatCard, Gauge, List, Progress, Chart).
+- [ ] Task 7: Add empty state messaging to all renderers ("No data available", "No active torrents", etc.).
+- [ ] Task 8: Add error state handling to IntegrationWidget — show error message with retry button when fetch fails.
+- [ ] Task 9: Verify all integrations handle network timeouts, invalid credentials, and unexpected response formats gracefully.
+- [ ] Task 10: Add integration type icons to the app form dropdown and widget creation form.
+- [ ] Task 11: Ensure all renderers respect card sizes (compact/medium/large) and are responsive.
+- [ ] Task 12: Review and standardize all integration endpoint refresh intervals (sensible defaults).
+
+## Files to Modify/Create
+- `src/lib/server/integrations/planka/{schema,client,transform,index}.ts` — new (4 files)
+- `src/lib/server/integrations/registry.ts` — modify: register Planka
+- `src/lib/components/widget/integration/*.svelte` — modify: add loading/empty/error states
+- `src/lib/components/widget/integration/IntegrationWidget.svelte` — modify: error handling + retry
+- `src/lib/components/app/AppForm.svelte` — modify: integration type icons
+
+## Acceptance Criteria
+- Planka: my cards list, overdue cards highlighted, board summary
+- All renderers have loading, empty, and error states
+- All integrations handle network errors gracefully
+- Consistent styling across all integration components
+- Responsive layout on mobile
+- Build passes, tests pass, lint clean
+
+## Notes
+- Planka uses session-based auth similar to NPM — reuse the pattern
+- This is the final phase — build and tests MUST pass here (Big Bang strategy final gate)
+- Polish should cover ALL renderers and integrations, not just Planka
+- Overdue detection: compare card due date to current date, highlight in red
+
+## Review Checklist
+- [ ] All tasks completed
+- [ ] Code follows project conventions
+- [ ] No unintended side effects
+- [ ] Build passes
+- [ ] Tests pass (new + existing)
+- [ ] All integrations tested end-to-end
+- [ ] Loading/error/empty states verified
+
+## Handoff to Next Phase
+<!-- Final phase — no handoff needed -->