ss-tools/specs/019-superset-ux-redesign/tasks.md

# 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

- [x] T001 Create `frontend/src/lib/components/layout/` directory for shared layout components
- [x] T002 Create `frontend/src/lib/components/hubs/` directory for resource hub pages
- [x] T003 [P] Create `frontend/src/lib/stores/sidebar.js` with persistentStore pattern for sidebar state
- [x] T004 [P] Create `frontend/src/lib/stores/taskDrawer.js` with resourceTaskMap store
- [x] 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

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

- [x] T012 [US1] Implement sidebar collapse/expand toggle with animation in `frontend/src/lib/components/layout/Sidebar.svelte`
- [x] T013 [US1] Add mobile hamburger menu toggle in `frontend/src/lib/components/layout/TopNavbar.svelte`
- [x] T014 [US1] Implement active item highlighting in sidebar using `sidebarStore`
- [x] T015 [US1] Add localStorage persistence for sidebar state (collapsed/expanded)
- [x] T016 [US1] Implement responsive sidebar (overlay mode on mobile < 768px)
- [x] 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

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

- [x] T026 [US5] Implement Logo/Brand link in TopNavbar that returns to Home
- [x] T027 [US5] Add Global Search placeholder (non-functional, for future) in TopNavbar
- [x] T028 [US5] Implement User menu dropdown with Profile, Settings, Logout options
- [x] T029 [US5] Connect User menu Logout to authentication logout flow
- [x] 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: P1)

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

**Independent Test**: Navigate to `/dashboards`, select environment, verify grid displays correctly with checkboxes, pagination, and search

### Backend for User Story 3

- [x] T031 [P] [US3] Create `backend/src/api/routes/dashboards.py` with GET /api/dashboards endpoint
- [x] T032 [P] [US3] Create `backend/src/services/resource_service.py` for shared resource fetching logic
- [x] T033 [US3] Implement dashboard list fetching with Git status and last task status
- [ ] T034 [US3] Add pagination support to GET /api/dashboards endpoint (page, page_size parameters)
- [ ] T035 [US3] Implement bulk migration endpoint POST /api/dashboards/migrate with target environment and dashboard IDs
- [ ] T036 [US3] Implement bulk backup endpoint POST /api/dashboards/backup with optional cron schedule
- [ ] T037 [US3] Add database mappings retrieval from MappingService for migration modal

### Frontend for User Story 3

- [x] T038 [US3] Create `frontend/src/routes/dashboards/+page.svelte` as Dashboard Hub
- [x] T039 [US3] Implement environment selector dropdown at top of Dashboard Hub
- [x] T040 [US3] Create dashboard grid with checkboxes, columns: Title, Slug, Git Status, Last Task, Actions
- [ ] T041 [US3] Implement "Select All" and "Select Visible" buttons in toolbar
- [ ] T042 [US3] Add real-time search input that filters dashboard list
- [ ] T043 [US3] Implement pagination controls with page numbers and "Rows per page" dropdown
- [ ] T044 [US3] Create floating bulk action panel at bottom: "[✓ N selected] [Migrate] [Backup]"
- [ ] T045 [US3] Implement Bulk Migration modal with target environment, database mappings, and selected dashboards list
- [ ] T046 [US3] Implement Bulk Backup modal with one-time/scheduled options and cron expression
- [x] T047 [US3] Implement individual Actions menu with Migrate, Backup, Git Operations options
- [x] T048 [US3] Connect Actions menu to existing plugin triggers (Migration, Backup, Git)
- [x] T049 [US3] Implement status badge click to open Task Drawer with correct task
- [x] T050 [US3] Add empty state when no environments configured or no dashboards found
- [ ] T051 [US3] Verify implementation matches ux_reference.md (Dashboard Hub Grid mockup)

**Checkpoint**: Dashboard Hub fully functional with bulk operations

---

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

**Goal**: Dedicated hub for datasets with bulk operations, mapping progress, and documentation generation

**Independent Test**: Navigate to `/datasets`, select environment, verify grid displays correctly with checkboxes and bulk actions

### Backend for User Story 4

- [x] T052 [P] [US4] Create `backend/src/api/routes/datasets.py` with GET /api/datasets endpoint
- [x] T053 [US4] Implement dataset list fetching with mapped fields count and SQL table extraction
- [ ] T054 [US4] Add pagination support to GET /api/datasets endpoint (page, page_size parameters)
- [ ] T055 [US4] Implement bulk column mapping endpoint POST /api/datasets/map-columns with source selection
- [ ] T056 [US4] Implement bulk documentation generation endpoint POST /api/datasets/generate-docs
- [ ] T057 [US4] Add dataset-to-dashboard relationship retrieval for linked dashboards display

### Frontend for User Story 4

- [x] T058 [US4] Create `frontend/src/routes/datasets/+page.svelte` as Dataset Hub
- [x] T059 [US4] Implement dataset grid with checkboxes, columns: Name, Database, Schema, Tables, Columns, Mapped %, Updated By, Actions
- [ ] T060 [US4] Implement "Select All" and "Select Visible" buttons in toolbar
- [ ] T061 [US4] Add real-time search input that filters dataset list by name, schema, or table names
- [ ] T062 [US4] Implement pagination controls with page numbers and "Rows per page" dropdown
- [ ] T063 [US4] Create floating bulk action panel at bottom: "[✓ N selected] [Map Columns] [Generate Docs] [Validate]"
- [ ] T064 [US4] Implement Column Mapping modal with PostgreSQL comments/XLSX source selection and preview
- [ ] T065 [US4] Implement Documentation Generation modal with LLM provider selection and options
- [ ] T066 [US4] Create dataset detail view showing SQL tables, column counts, mapping percentages, and linked dashboards
- [x] T067 [US4] Add empty state when no datasets found
- [ ] T068 [US4] Verify implementation matches ux_reference.md (Dataset Hub Grid mockup)

**Checkpoint**: Dataset Hub fully functional with bulk operations

---

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

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

### Frontend for User Story 6

- [x] T051 [US6] Create `frontend/src/routes/settings/+page.svelte` as Settings page
- [x] T052 [US6] Implement tabbed navigation: Environments, Connections, LLM, Logging, System
- [x] T053 [US6] Reuse existing settings components within each tab
- [x] T054 [US6] Implement role-based visibility (hide admin tabs for non-admin users)
- [x] T055 [US6] Add user-preference settings (theme, language) accessible to all users
- [x] 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

- [x] T057 [P] Add breadcrumb navigation to all new pages
- [x] T058 [P] Implement breadcrumb truncation for deep paths (>3 levels)
- [x] T059 Remove old card-based dashboard grid if no longer needed
- [x] T060 [P] Add skeleton loaders for resource hub grids
- [x] T061 [P] Add error banners for environment connection failures
- [x] T062 Run quickstart.md validation for all user stories
- [x] 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 (P1 + P2 Stories)

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

**Note**: US3 and US4 are now P1 priority due to bulk operations requirements for dashboards and datasets.

---

## Summary

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