# Implementation Plan: Superset-Style UX Redesign

**Branch**: `019-superset-ux-redesign` | **Date**: 2026-02-09 | **Spec**: [spec.md](./spec.md)
**Input**: Feature specification from `/specs/019-superset-ux-redesign/spec.md`

## Summary

Redesign the application from a **Task-Centric** model (users navigate to tools) to a **Resource-Centric** model (users navigate to resources like Dashboards, Datasets). Key components include:
- Persistent left sidebar with resource categories
- Global Task Drawer for monitoring background operations
- Dashboard Hub and Dataset Hub as primary management interfaces
- Unified top navigation bar with activity indicator
- Consolidated Settings section

## Technical Context

**Language/Version**: Python 3.9+ (Backend), Node.js 18+ (Frontend)
**Primary Dependencies**: FastAPI, SvelteKit, Tailwind CSS, SQLAlchemy, WebSocket (existing)
**Storage**: SQLite (tasks.db, auth.db, migrations.db) - no new database tables required
**Testing**: pytest (backend), Vitest/Playwright (frontend)
**Target Platform**: Web (Desktop primary, responsive for mobile)
**Project Type**: Web application (frontend + backend)
**Performance Goals**: Task Drawer opens < 200ms, sidebar animation < 300ms
**Constraints**: No blocking modals for task inputs, real-time log streaming via WebSocket
**Scale/Scope**: ~20 new frontend components, 5 new API endpoints, 3 new stores

## Constitution Check

*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*

| Principle | Status | Notes |
|-----------|--------|-------|
| I. Semantic Protocol Compliance | ✅ PASS | All new components will use [DEF] anchors and @UX_STATE tags |
| II. Everything is a Plugin | ✅ PASS | No new plugins required; existing plugins (Migration, Backup, Git) will be triggered from Resource Hubs |
| III. Unified Frontend Experience | ✅ PASS | Using existing component library, i18n system, and requestApi wrapper |
| IV. Security & Access Control | ✅ PASS | ADMIN section visibility controlled by existing RBAC |
| V. Independent Testability | ✅ PASS | Each User Story has defined independent test scenarios |
| VI. Asynchronous Execution | ✅ PASS | Task Drawer integrates with existing TaskManager and WebSocket |

## Project Structure

### Documentation (this feature)

```text
specs/019-superset-ux-redesign/
├── plan.md              # This file
├── spec.md              # Feature specification
├── ux_reference.md      # UX mockups and flows
├── research.md          # Phase 0 output
├── data-model.md        # Phase 1 output
├── quickstart.md        # Phase 1 output
├── contracts/           # Phase 1 output
│   └── api.md           # API contracts
├── checklists/
│   └── requirements.md  # Spec quality checklist
└── tasks.md             # Phase 2 output (NOT created yet)
```

### Source Code (repository root)

```text
backend/
├── src/
│   ├── api/routes/
│   │   ├── dashboards.py    # NEW: Dashboard hub API
│   │   ├── datasets.py      # NEW: Dataset hub API
│   │   └── settings.py      # EXTEND: Consolidated settings
│   └── services/
│       └── resource_service.py  # NEW: Shared resource logic
└── tests/

frontend/
├── src/
│   ├── lib/
│   │   ├── components/
│   │   │   ├── layout/
│   │   │   │   ├── Sidebar.svelte          # NEW: Left sidebar
│   │   │   │   ├── TopNavbar.svelte        # NEW: Top navigation
│   │   │   │   ├── TaskDrawer.svelte       # NEW: Global task drawer
│   │   │   │   └── Breadcrumbs.svelte      # NEW: Breadcrumb nav
│   │   │   └── hubs/
│   │   │       ├── DashboardHub.svelte     # NEW: Dashboard management
│   │   │       ├── DatasetHub.svelte       # NEW: Dataset management
│   │   │       └── SettingsPage.svelte     # NEW: Consolidated settings
│   │   ├── stores/
│   │   │   ├── sidebar.js      # NEW: Sidebar state
│   │   │   ├── taskDrawer.js   # NEW: Drawer state + resource-task map
│   │   │   └── activity.js     # NEW: Activity indicator count
│   │   └── i18n/
│   │       └── en.json         # EXTEND: New navigation labels
│   └── routes/
│       ├── /dashboards/+page.svelte    # NEW
│       ├── /datasets/+page.svelte      # NEW
│       ├── /settings/+page.svelte      # NEW
│       └── /+layout.svelte             # EXTEND: Add sidebar + drawer
└── tests/
```

**Structure Decision**: Web application structure with new `layout/` and `hubs/` component directories. The Sidebar and TaskDrawer live in the root `+layout.svelte` for global availability.

## Complexity Tracking

> No Constitution violations. All changes use existing patterns.

| Violation | Why Needed | Simpler Alternative Rejected Because |
|-----------|------------|-------------------------------------|
| N/A | N/A | N/A |