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

• 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: 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

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

• T038 [US3] Create frontend/src/routes/dashboards/+page.svelte as Dashboard Hub
• T039 [US3] Implement environment selector dropdown at top of Dashboard Hub
• 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
• T047 [US3] Implement individual Actions menu with Migrate, Backup, Git Operations options
• T048 [US3] Connect Actions menu to existing plugin triggers (Migration, Backup, Git)
• T049 [US3] Implement status badge click to open Task Drawer with correct task
• 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

• T052 [P] [US4] Create backend/src/api/routes/datasets.py with GET /api/datasets endpoint
• 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

• T058 [US4] Create frontend/src/routes/datasets/+page.svelte as Dataset Hub
• 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
• 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

• 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 (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)