orc-order-v2/docs/superpowers/plans/2026-05-13-processing-ux-enhancement.md

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