# 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 -->