# Processing Flow + UI/UX Enhancement Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement this plan task-by-task.

**Goal:** Enhance task processing flow (retry, multi-task, logs) and add responsive mobile UI.

**Architecture:** Frontend-only changes for most tasks. One backend endpoint for task retry. Processing store refactored from single-task to multi-task model.

**Tech Stack:** Vue 3.4+, TypeScript, Element Plus, Pinia

---

## Phase 2: Processing Flow Enhancement

### Task 1: Multi-task monitoring in processing store

**Files:**
- Modify: `web/frontend/src/stores/processing.ts`

**Description:** Refactor the store from single `currentTask` to a `Map<taskId, TaskInfo>` supporting multiple concurrent tasks. Keep backward compatibility by exposing `currentTask` as the most recent task.

- [ ] Add `activeTasks: ref<Map<string, TaskInfo>>()` state
- [ ] Refactor `connectWebSocket` to register tasks in `activeTasks`
- [ ] Expose `activeTasks` computed (array of active tasks sorted by start time)
- [ ] Keep `currentTask` as computed getter of the latest task
- [ ] Add `removeTask(taskId)` action to dismiss completed/failed tasks
- [ ] Add `retryTask(taskId)` action that calls `POST /api/tasks/{id}/retry`

### Task 2: Backend task retry endpoint

**Files:**
- Modify: `web/backend/routers/tasks.py`
- Modify: `web/backend/services/task_manager.py`

**Description:** Add `POST /api/tasks/{id}/retry` endpoint that reads the original task's stored parameters and re-creates it.

- [ ] Add `metadata: Optional[dict]` field to `Task` dataclass (stores original request params)
- [ ] Store endpoint + body in task metadata when creating tasks in `processing.py`
- [ ] Add `retry_task` method to `TaskManager` that creates a new task from stored metadata
- [ ] Add `POST /api/tasks/{id}/retry` endpoint in `tasks.py`

### Task 3: Dashboard multi-task cards

**Files:**
- Modify: `web/frontend/src/views/Dashboard.vue`

**Description:** Replace the single progress card with a card list showing all active tasks. Each card shows: task name, progress bar, status tag, error message (if failed), retry button (if failed), dismiss button (if completed/failed).

- [ ] Replace single progress card with `v-for` over `activeTasks`
- [ ] Each card: name, progress bar, status tag, message
- [ ] Failed cards: red error panel + "重试" button
- [ ] Completed cards: green success + "查看结果" + dismiss button
- [ ] Show "无活跃任务" placeholder when empty

### Task 4: Expand Dashboard log panel

**Files:**
- Modify: `web/frontend/src/views/Dashboard.vue`

**Description:** Increase log display from 10 to 50 lines. Add "查看全部日志" link to Tasks page.

- [ ] Change `slice(-10)` to `slice(-50)` for log lines
- [ ] Add "查看全部日志" button linking to `/tasks`
- [ ] Increase log panel max-height from 200px to 350px

### Task 5: Error details in Dashboard

**Files:**
- Modify: `web/frontend/src/views/Dashboard.vue`

**Description:** When a task fails, show the error message prominently in the task card.

- [ ] In the task card template, show `task.error` in an `el-alert` with type="error" when status is "failed"
- [ ] Error message should be selectable/copyable

---

## Phase 3: UI/UX Optimization

### Task 6: Mobile sidebar drawer

**Files:**
- Modify: `web/frontend/src/views/Layout.vue`

**Description:** Convert the fixed sidebar to an `el-drawer` on screens < 768px. Add hamburger menu button in topbar.

- [ ] Add `isMobile` ref + resize listener with 768px breakpoint
- [ ] On mobile: hide `el-aside`, show hamburger button in topbar
- [ ] Use `el-drawer` for sidebar navigation on mobile
- [ ] Close drawer on route change
- [ ] Clean up resize listener on unmount

### Task 7: Layout responsive styles

**Files:**
- Modify: `web/frontend/src/views/Layout.vue`

**Description:** Add @media queries for the layout content area.

- [ ] `@media (max-width: 768px)`: reduce content padding, adjust topbar
- [ ] `@media (max-width: 480px)`: further reduce spacing
- [ ] Ensure content doesn't overflow on small screens

### Task 8: Tasks page responsive

**Files:**
- Modify: `web/frontend/src/views/Tasks.vue`

**Description:** Make the Tasks page work on mobile.

- [ ] `@media (max-width: 768px)`: stat cards go 2x2 grid
- [ ] `@media (max-width: 640px)`: stat cards go single column
- [ ] `@media (max-width: 768px)`: table columns hide non-essential ones
- [ ] Filters stack vertically on mobile

### Task 9: Logs page responsive

**Files:**
- Modify: `web/frontend/src/views/Logs.vue`

**Description:** Make the Logs page work on mobile.

- [ ] Same stat card responsive pattern as Tasks
- [ ] `@media (max-width: 768px)`: table columns hide non-essential ones
- [ ] Filters stack vertically on mobile

### Task 10: File views responsive

**Files:**
- Modify: `web/frontend/src/views/files/Images.vue`
- Modify: `web/frontend/src/views/files/Tables.vue`
- Modify: `web/frontend/src/views/files/Orders.vue`

**Description:** Make file list pages work on mobile.

- [ ] `@media (max-width: 768px)`: header-actions wrap to multiple lines
- [ ] Table hides non-essential columns on small screens
- [ ] Action buttons collapse into a dropdown on mobile