# Tasks: Superset-Style UX Redesign

**Input**: Design documents from `/specs/019-superset-ux-redesign/`
**Prerequisites**: plan.md ✅, spec.md ✅, research.md ✅, data-model.md ✅, contracts/ ✅

**Tests**: Not explicitly requested - implementation tasks only.

**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.

## Format: `[ID] [P?] [Story] Description`

- **[P]**: Can run in parallel (different files, no dependencies)
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
- Include exact file paths in descriptions

## Path Conventions

- **Web app**: `backend/src/`, `frontend/src/`

---

## Phase 1: Setup (Shared Infrastructure)

**Purpose**: Create new directory structure and stores for layout state

- [ ] T001 Create `frontend/src/lib/components/layout/` directory for shared layout components
- [ ] T002 Create `frontend/src/lib/components/hubs/` directory for resource hub pages
- [ ] T003 [P] Create `frontend/src/lib/stores/sidebar.js` with persistentStore pattern for sidebar state
- [ ] T004 [P] Create `frontend/src/lib/stores/taskDrawer.js` with resourceTaskMap store
- [ ] T005 [P] Create `frontend/src/lib/stores/activity.js` as derived store from taskDrawer

---

## Phase 2: Foundational (Blocking Prerequisites)

**Purpose**: Core layout components that MUST be complete before ANY user story can be implemented

**⚠️ CRITICAL**: No user story work can begin until this phase is complete

- [ ] T006 Create `frontend/src/lib/components/layout/Sidebar.svelte` with categories: DASHBOARDS, DATASETS, STORAGE, ADMIN
- [ ] T007 Create `frontend/src/lib/components/layout/TopNavbar.svelte` with Logo, Search placeholder, Activity indicator, User menu
- [ ] T008 Create `frontend/src/lib/components/layout/Breadcrumbs.svelte` for page hierarchy navigation
- [ ] T009 Update `frontend/src/routes/+layout.svelte` to include Sidebar, TopNavbar, and main content area
- [ ] T010 Add i18n keys for navigation labels in `frontend/src/lib/i18n/translations/en.json`
- [ ] T011 Add i18n keys for navigation labels in `frontend/src/lib/i18n/translations/ru.json`

**Checkpoint**: Foundation ready - user story implementation can now begin

---

## Phase 3: User Story 1 - Resource-Centric Navigation (Priority: P1) 🎯 MVP

**Goal**: Users can navigate through a persistent left sidebar with resource categories

**Independent Test**: Click "Dashboards" or "Datasets" in sidebar and verify correct hub loads

### Implementation for User Story 1

- [ ] T012 [US1] Implement sidebar collapse/expand toggle with animation in `frontend/src/lib/components/layout/Sidebar.svelte`
- [ ] T013 [US1] Add mobile hamburger menu toggle in `frontend/src/lib/components/layout/TopNavbar.svelte`
- [ ] T014 [US1] Implement active item highlighting in sidebar using `sidebarStore`
- [ ] T015 [US1] Add localStorage persistence for sidebar state (collapsed/expanded)
- [ ] T016 [US1] Implement responsive sidebar (overlay mode on mobile < 768px)
- [ ] T017 [US1] Verify implementation matches ux_reference.md (Sidebar mockups)

**Checkpoint**: Sidebar navigation fully functional and responsive

---

## Phase 4: User Story 2 - Global Task Drawer & Activity Monitoring (Priority: P1) 🎯 MVP

**Goal**: Users can monitor running tasks without losing context via a slide-out drawer

**Independent Test**: Trigger a Backup and verify Task Drawer opens with log stream

### Implementation for User Story 2

- [ ] T018 [US2] Create `frontend/src/lib/components/layout/TaskDrawer.svelte` as slide-out panel from right
- [ ] T019 [US2] Integrate existing `TaskLogViewer` component inside Task Drawer
- [ ] T020 [US2] Implement Activity indicator badge in TopNavbar showing `activeCount` from store
- [ ] T021 [US2] Connect Task Drawer to WebSocket for real-time log streaming
- [ ] T022 [US2] Implement interactive area in drawer for `PasswordPrompt` and other inputs
- [ ] T023 [US2] Add close button that allows task to continue running in background
- [ ] T024 [US2] Implement drawer open trigger from Activity indicator click
- [ ] T025 [US2] Verify implementation matches ux_reference.md (Task Drawer mockup)

**Checkpoint**: Task Drawer fully functional with real-time logs

---

## Phase 5: User Story 5 - Unified Top Navigation Bar (Priority: P1) 🎯 MVP

**Goal**: Consistent top navbar with Logo, Search, Activity, and User menu

**Independent Test**: Navigate to any page and verify top bar shows all elements

### Implementation for User Story 5

- [ ] T026 [US5] Implement Logo/Brand link in TopNavbar that returns to Home
- [ ] T027 [US5] Add Global Search placeholder (non-functional, for future) in TopNavbar
- [ ] T028 [US5] Implement User menu dropdown with Profile, Settings, Logout options
- [ ] T029 [US5] Connect User menu Logout to authentication logout flow
- [ ] T030 [US5] Verify implementation matches ux_reference.md (Top Navigation Bar mockup)

**Checkpoint**: Top navbar complete with all elements

---

## Phase 6: User Story 3 - Dashboard Hub Management (Priority: P2)

**Goal**: Central hub for dashboards with Git status and action triggers

**Independent Test**: Navigate to `/dashboards`, select environment, verify grid displays correctly

### Backend for User Story 3

- [ ] T031 [P] [US3] Create `backend/src/api/routes/dashboards.py` with GET /api/dashboards endpoint
- [ ] T032 [P] [US3] Create `backend/src/services/resource_service.py` for shared resource fetching logic
- [ ] T033 [US3] Implement dashboard list fetching with Git status and last task status

### Frontend for User Story 3

- [ ] T034 [US3] Create `frontend/src/routes/dashboards/+page.svelte` as Dashboard Hub
- [ ] T035 [US3] Implement environment selector dropdown at top of Dashboard Hub
- [ ] T036 [US3] Create dashboard grid with columns: Title, Slug, Git Status, Last Task, Actions
- [ ] T037 [US3] Implement Actions menu with Migrate, Backup, Git Operations options
- [ ] T038 [US3] Connect Actions menu to existing plugin triggers (Migration, Backup, Git)
- [ ] T039 [US3] Implement status badge click to open Task Drawer with correct task
- [ ] T040 [US3] Add empty state when no environments configured or no dashboards found
- [ ] T041 [US3] Verify implementation matches ux_reference.md (Dashboard Hub Grid mockup)

**Checkpoint**: Dashboard Hub fully functional

---

## Phase 7: User Story 4 - Dataset Hub & Semantic Mapping (Priority: P2)

**Goal**: Dedicated hub for datasets with mapping progress

**Independent Test**: Navigate to `/datasets` and verify list with mapping progress

### Backend for User Story 4

- [ ] T042 [P] [US4] Create `backend/src/api/routes/datasets.py` with GET /api/datasets endpoint
- [ ] T043 [US4] Implement dataset list fetching with mapped fields count

### Frontend for User Story 4

- [ ] T044 [US4] Create `frontend/src/routes/datasets/+page.svelte` as Dataset Hub
- [ ] T045 [US4] Implement dataset grid with columns: Table Name, Schema, Mapped Fields, Last Task, Actions
- [ ] T046 [US4] Implement "Map Columns" action that opens mapping interface
- [ ] T047 [US4] Add empty state when no datasets found
- [ ] T048 [US4] Verify implementation matches ux_reference.md

**Checkpoint**: Dataset Hub fully functional

---

## Phase 8: User Story 6 - Consolidated Settings Experience (Priority: P2)

**Goal**: All settings consolidated into single section with categories

**Independent Test**: Navigate to Settings and verify all categories listed

### Backend for User Story 6

- [ ] T049 [P] [US6] Extend `backend/src/api/routes/settings.py` with GET /api/settings endpoint
- [ ] T050 [US6] Implement consolidated settings response with all categories

### Frontend for User Story 6

- [ ] T051 [US6] Create `frontend/src/routes/settings/+page.svelte` as Settings page
- [ ] T052 [US6] Implement tabbed navigation: Environments, Connections, LLM, Logging, System
- [ ] T053 [US6] Reuse existing settings components within each tab
- [ ] T054 [US6] Implement role-based visibility (hide admin tabs for non-admin users)
- [ ] T055 [US6] Add user-preference settings (theme, language) accessible to all users
- [ ] T056 [US6] Verify implementation matches ux_reference.md (Settings Page mockup)

**Checkpoint**: Settings page fully functional

---

## Phase 9: Polish & Cross-Cutting Concerns

**Purpose**: Improvements that affect multiple user stories

- [ ] T057 [P] Add breadcrumb navigation to all new pages
- [ ] T058 [P] Implement breadcrumb truncation for deep paths (>3 levels)
- [ ] T059 Remove old card-based dashboard grid if no longer needed
- [ ] T060 [P] Add skeleton loaders for resource hub grids
- [ ] T061 [P] Add error banners for environment connection failures
- [ ] T062 Run quickstart.md validation for all user stories
- [ ] T063 Final UX review against ux_reference.md

---

## Dependencies & Execution Order

### Phase Dependencies

- **Setup (Phase 1)**: No dependencies - can start immediately
- **Foundational (Phase 2)**: Depends on Setup completion - BLOCKS all user stories
- **User Stories (Phase 3-8)**: All depend on Foundational phase completion
  - US1, US2, US5 (P1) can proceed in parallel
  - US3, US4, US6 (P2) can proceed after P1 stories or in parallel
- **Polish (Phase 9)**: Depends on all desired user stories being complete

### User Story Dependencies

- **US1 (P1)**: Can start after Foundational - No dependencies on other stories
- **US2 (P1)**: Can start after Foundational - Uses stores from Setup
- **US5 (P1)**: Can start after Foundational - Uses TopNavbar from Foundational
- **US3 (P2)**: Can start after Foundational - Uses Task Drawer from US2
- **US4 (P2)**: Can start after Foundational - Uses Task Drawer from US2
- **US6 (P2)**: Can start after Foundational - Uses Sidebar from US1

### Parallel Opportunities

- T003, T004, T005 can run in parallel (different store files)
- T031, T032 can run in parallel (different backend files)
- T042 can run in parallel with T031
- T049 can run in parallel with other backend tasks
- T057, T058, T060, T061 can run in parallel (different concerns)

---

## Implementation Strategy

### MVP First (P1 Stories Only)

1. Complete Phase 1: Setup
2. Complete Phase 2: Foundational (CRITICAL - blocks all stories)
3. Complete Phase 3: User Story 1 (Sidebar Navigation)
4. Complete Phase 4: User Story 2 (Task Drawer)
5. Complete Phase 5: User Story 5 (Top Navbar)
6. **STOP and VALIDATE**: Test all P1 stories independently
7. Deploy/demo if ready

### Full Delivery

1. MVP First (above)
2. Add User Story 3 (Dashboard Hub) → Test independently
3. Add User Story 4 (Dataset Hub) → Test independently
4. Add User Story 6 (Settings) → Test independently
5. Complete Polish phase
6. Final validation

---

## Summary

| Metric | Value |
|--------|-------|
| Total Tasks | 63 |
| Setup Tasks | 5 |
| Foundational Tasks | 6 |
| US1 (Sidebar) Tasks | 6 |
| US2 (Task Drawer) Tasks | 8 |
| US5 (Top Navbar) Tasks | 5 |
| US3 (Dashboard Hub) Tasks | 11 |
| US4 (Dataset Hub) Tasks | 7 |
| US6 (Settings) Tasks | 8 |
| Polish Tasks | 7 |
| Parallel Opportunities | 15+ |
| MVP Scope | Phases 1-5 (25 tasks) |