# Student AI Panel Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace duplicate student training AI cards with one persistent right-side assistance and assessment panel.

**Architecture:** A reusable Vue component owns prompt insertion, help requests, evaluation loading, scoring requests and responsive presentation. Student training pages pass task key and answer state only; the component uses the existing AI evaluation APIs.

**Tech Stack:** Vue 3 Composition API, Element Plus, existing `aiTrainingEvaluation` API.

## Global Constraints

- Reuse existing AI help and assessment endpoints.
- Keep desktop panel persistent on the right and stack below content below 1100px.
- Do not change backend scoring rules.

---

### Task 1: Create reusable AI panel

**Files:**
- Create: `src/views/components/StudentTrainingAiPanel.vue`
- Test: `tests/student-training-ai-panel.test.mjs`

- [ ] Write a failing test asserting a task prompt is inserted into the question field and a completed assessment exposes report and score.
- [ ] Implement the panel with help input/send, report display, score display and `AI智能评分` action backed by existing APIs.
- [ ] Run the test and commit the component.

### Task 2: Integrate and verify

**Files:**
- Modify: `src/views/training/GenericTrainingPage.vue`
- Modify: applicable student task pages currently rendering `TrainingAiSidebar` or `TrainingAiEvaluation`
- Test: `tests/student-training-ai-panel.test.mjs`

- [ ] Replace duplicate AI cards with the unified panel and pass task key, prompt and answer state.
- [ ] Add responsive styling verification.
- [ ] Run tests and `npm run build:prod`, then commit.