# UX Reference: Superset-Style Redesign

## Persona
**Alex, Data Engineer / Superset Admin**
Alex manages dozens of dashboards across Dev, Staging, and Prod. Alex needs to quickly move changes between environments, check if a dashboard is in sync with Git, and fix mapping issues without losing context.

## Context
The current UI is "Tool-Centric" (Go to Migration Tool -> Select Dashboard). The new UI is "Resource-Centric" (Go to Dashboards -> Find "Sales" -> Click Migrate).

## Happy Path: Migrating a Dashboard

1.  **Discovery**: Alex opens the app and lands on the **Dashboard Hub**.
2.  **Selection**: Alex selects "Production" from the environment dropdown. The grid populates with production dashboards.
3.  **Status Check**: Alex sees that "Sales Overview" has a "Diff" status in the Git column.
4.  **Action**: Alex clicks the `[...]` menu on the "Sales Overview" row and selects **Migrate**.
5.  **Configuration**: A small modal appears asking for the **Target Environment**. Alex selects "Staging" and clicks "Start".
6.  **Monitoring**: The modal closes. The "Last Task" column for "Sales Overview" changes to a **Spinner**.
7.  **Contextual Logs**: Alex clicks the Spinner. The **Task Drawer** slides out from the right.
8.  **Interaction**: The logs show the migration is paused because a database password is required. A password field appears *inside* the drawer.
9.  **Completion**: Alex enters the password. The migration finishes. The drawer shows a green "Success" message. Alex closes the drawer and is still looking at the Dashboard Hub list.

## Mockups

### Top Navigation Bar
```text
+-----------------------------------------------------------------------+
| [≡]  Superset Tools     [🔍 Search...]        [Activity (3)]  [👤 ▼] |
+-----------------------------------------------------------------------+
```
- **[≡] Hamburger**: Mobile-only toggle for sidebar.
- **Logo**: Returns to Home/Dashboard Hub.
- **Search**: Placeholder for future global search.
- **Activity (3)**: Badge shows count of running tasks. Clicking opens Task Drawer.
- **User Menu**: Dropdown with Profile, Settings, Logout.

### Sidebar (Expanded)
```text
+------------------+
| ▽ DASHBOARDS     |
|   Overview       |
+------------------+
| ▽ DATASETS       |
|   All Datasets   |
+------------------+
| ▽ STORAGE        |
|   Backups        |
|   Repositories   |
+------------------+
| ▽ ADMIN          |
|   Users          |
|   Roles          |
|   Settings       |
+------------------+
| [◀ Collapse]     |
+------------------+
```

### Sidebar (Collapsed)
```text
+---+
| D | (Dashboards - Active)
| T | (Datasets)
| S | (Storage)
+---+
| A | (Admin)
+---+
| ▶ |
+---+
```

### Dashboard Hub Grid
```text
+-----------------------------------------------------------------------+
| Env: [ Production (v) ]                                   [ Refresh ] |
+-----------------------------------------------------------------------+
| Title           | Git Status    | Last Task | Actions                 |
|-----------------|---------------|-----------|-------------------------|
| Sales Report    | [v] main      | [v] Done  | [ Migrate ] [ Backup ]  |
| HR Analytics    | [!] Diff      | [@] Run.. | [ Commit ]  [ ... ]     |
+-----------------------------------------------------------------------+
```

### Settings Page (Consolidated)
```text
+-----------------------------------------------------------------------+
| Settings                                                              |
+-----------------------------------------------------------------------+
| [Environments]  [Connections]  [LLM Providers]  [Logging]  [System]   |
+-----------------------------------------------------------------------+
|                                                                       |
|  Environments                                                         |
|  +-------------------------------------------------------------+     |
|  | Name         | URL                    | Status   | Actions |     |
|  |--------------|------------------------|----------|---------|     |
|  | Development  | http://dev.superset... | [v] OK   | [Edit]  |     |
|  | Production   | http://prod.superset...| [!] Error| [Edit]  |     |
|  +-------------------------------------------------------------+     |
|                                                                       |
+-----------------------------------------------------------------------+
```

### Task Drawer (Active)
```text
          +---------------------------------------+
          | Task: Migration (Sales)           [X] |
          +---------------------------------------+
          | [INFO] Exporting...                   |
          | [INFO] Validating...                  |
          | [WARN] Password required              |
          |                                       |
          | Password: [**********]                |
          | [ Resume ] [ Cancel ]                 |
          +---------------------------------------+
```

## Error Experience

### Scenario: Migration Fails
- **Visual Cue**: The "Last Task" badge in the grid turns **Red (X)**.
- **Notification**: A toast message appears: "Migration Failed: Database Connection Error".
- **Resolution**: Alex clicks the Red (X). The Task Drawer opens, scrolled to the bottom, highlighting the error in red. Alex can see the full stack trace or error message to debug.

### Scenario: Environment Offline
- **Visual Cue**: When selecting an environment, a "Connection Error" banner appears at the top of the grid.
- **Action**: The "Refresh" button turns into a "Retry" button.