# Design Document: Resource-Centric UI & Unified Task Experience

## 1. Core Philosophy

The application moves from a **Task-Centric** model (where users navigate to "Migration Tool" or "Git Tool") to a **Resource-Centric** model. Users navigate to the object they want to manage (Dashboard, Dataset) and perform actions on it.

**Goals:**
1.  **Context preservation:** Users shouldn't lose their place in a list just to see a log.
2.  **Discoverability:** All actions available for a resource are grouped together.
3.  **Traceability:** Every action is explicitly linked to a Task ID with accessible logs.

---

## 2. Navigation Structure (Navbar)

**Old Menu:**
`[Home] [Migration] [Git Manager] [Mapper] [Settings] [Logout]`

**New Menu:**
`[Superset Manager]  [Dashboards]  [Datasets]  [Reports]  [Storage]  |  [Activity (0)] [Settings] [User]`

*   **Dashboards**: Main hub for all dashboard operations (Migrate, Backup, Git).
*   **Datasets**: Hub for dataset documentation and mapping.
*   **Reports**: Unified center for all task outcomes with type-distinct visual profiles and detail diagnostics.
*   **Storage**: File management (Backups, Repositories).
*   **Activity**: Global indicator of running tasks. Clicking it opens the Task Drawer.

---

## 3. Page Layouts

### 3.1. Dashboard Hub (`/dashboards`)

The central place for managing Superset Dashboards.

**Wireframe:**
```text
+-----------------------------------------------------------------------+
|  Select Source Env: [ Development (v) ]     [ Refresh ]               |
+-----------------------------------------------------------------------+
|  Search: [ Filter by title... ]                                       |
+-----------------------------------------------------------------------+
|  Title           | Slug        | Git Status    | Last Task | Actions  |
|------------------|-------------|---------------|-----------|----------|
|  Sales Report    | sales-2023  | 🌿 main (OK)  | (v) Done  | [ ... ]  |
|  HR Analytics    | hr-dash     | -             | ( ) Idle  | [ ... ]  |
|  Logs Monitor    | logs-v2     | 🌿 dev (Diff) | (@) Run.. | [ ... ]  |
+-----------------------------------------------------------------------+
```

**Interaction Details:**
1.  **Source Env Selector**: Loads dashboards via `superset_client.get_dashboards`.
2.  **Status Column ("Last Task")**:
    *   Shows the status of the *last known action* for this dashboard in the current session.
    *   **States**: `Idle`, `Running` (Spinner), `Waiting Input` (Orange Key), `Success` (Green Check), `Error` (Red X).
    *   **Click Action**: Clicking the icon/badge opens the **Task Drawer**.
3.  **Actions Menu ([ ... ])**:
    *   **Migrate**: Opens `DeploymentModal` (Simplified: just Target Env selector).
    *   **Backup**: Immediately triggers `BackupPlugin`.
    *   **Git Operations**:
        *   *Init Repo* (if Git Status is empty).
        *   *Commit/Push*, *History*, *Checkout* (if Git initialized).
    *   **Validate**: Triggers LLM Analysis.

### 3.2. Dataset Hub (`/datasets`)

The central place for managing physical datasets and semantic layers.

**Wireframe:**
```text
+-----------------------------------------------------------------------+
|  Select Source Env: [ Production (v) ]                                |
+-----------------------------------------------------------------------+
|  Table Name      | Schema      | Mapped Fields | Last Task | Actions  |
|------------------|-------------|---------------|-----------|----------|
|  fact_orders     | public      | 15 / 20       | (v) Done  | [ ... ]  |
|  dim_users       | auth        | 0 / 5         | ( ) Idle  | [ ... ]  |
+-----------------------------------------------------------------------+
```

**Actions Menu ([ ... ])**:
*   **Map Columns**: Opens the Mapping Modal (replaces `MapperPage`).
*   **Generate Docs**: Triggers `DocumentationPlugin`.

---

## 4. The Global Task Drawer

**Concept:** A slide-out panel that overlays the right side of the screen. It persists in the DOM layout (Global Layout) but is hidden until triggered.

**Trigger Points:**
1.  Clicking a **Status Badge** in any Grid row (Dashboard or Dataset).
2.  Clicking the **Activity** indicator in the Navbar.

**Layout:**
```text
+---------------------------------------------------------------+
|  Task: Migration "Sales Report"                   [X] Close   |
|  ID: 1234-5678-uuid                                           |
|  Status: WAITING_INPUT (Paused)                               |
+---------------------------------------------------------------+
|                                                               |
|  [Log Stream Area]                                            |
|  10:00:01 [INFO] Starting migration...                        |
|  10:00:02 [INFO] Exporting dashboard...                       |
|  10:00:05 [WARN] Target DB requires password!                 |
|                                                               |
+---------------------------------------------------------------+
|  INTERACTIVE AREA (Dynamic)                                   |
|                                                               |
|  Target Database: "Production DB"                             |
|  Enter Password: [ ********** ]                               |
|                                                               |
|  [ Cancel ] [ Resume Task ]                                   |
+---------------------------------------------------------------+
```

**Behavior:**
*   **Context Aware**: If I trigger a migration on "Sales Report", the Drawer automatically opens and subscribes to that task's ID.
*   **Multi-Tasking**: I can close the drawer (click [X]) to let the task run in the background. The "Activity" badge in the navbar increments.
*   **Input Handling**: Components like `PasswordPrompt` or `MissingMappingModal` are no longer center-screen modals blocking the whole UI. They are rendered *inside* the Interactive Area of the Drawer.

---

## 5. Technical Component Architecture

### 5.1. Stores (`stores/tasks.js`)
Needs a new reactive store structure to map Resources to Tasks.

```javascript
// Map resource UUIDs to their active/latest task UUIDs
export const resourceTaskMap = writable({
  "dashboard-uuid-1": { taskId: "task-uuid-A", status: "RUNNING" },
  "dataset-uuid-2":   { taskId: "task-uuid-B", status: "SUCCESS" }
});

// The currently focused task in the Drawer
export const activeDrawerTask = writable(null); // { taskId: "..." }
export const isDrawerOpen = writable(false);
```

### 5.2. Components
*   `DashboardHub.svelte`: Main page.
*   `DatasetHub.svelte`: Main page.
*   `GlobalTaskDrawer.svelte`: Lives in `+layout.svelte`. Connects to `activeDrawerTask`.
*   `ActionMenu.svelte`: Reusable dropdown for grids.