# Phase 7 — Frontend UX (Manage + Select Profile)

วันที่: 2026-02-24

## Scope ที่ทำแล้ว

อัปเดตหน้า `output/live-api-dashboard.html` ให้รองรับการใช้งาน token profile แบบ end-to-end:

1. **Select mode**
   - เพิ่มสวิตช์ `ใช้โปรไฟล์ token ที่บันทึกไว้`
   - ผู้ใช้เลือกได้ 2 โหมด:
     - **Manual mode**: ใช้ token จาก default/in-line/file/pool แบบเดิม
     - **Profile mode**: ส่ง `profileId` ไป backend แทน `tokenSources`

2. **Manage profile UI**
   - เพิ่มส่วนจัดการโปรไฟล์:
     - dropdown เลือกโปรไฟล์
     - ฟอร์มชื่อ/คำอธิบาย/สถานะ default/active
     - ปุ่ม `สร้าง`, `บันทึก`, `ตั้งค่าเริ่มต้น`, `ลบ`
   - ดึงข้อมูลจาก API:
     - `GET /auth/token-profiles`
     - `POST /auth/token-profiles`
     - `PATCH /auth/token-profiles/:id`
     - `POST /auth/token-profiles/:id/set-default`
     - `DELETE /auth/token-profiles/:id`

3. **Role-aware UX**
   - เช็คสิทธิ์จาก `GET /auth/session`
   - ถ้า role ต่ำกว่า analyst: ปิดปุ่มแก้ไข/ลบ/สร้าง (ใช้เลือกได้อย่างเดียว)
   - ถ้าระบบไม่ได้เปิด login mode: ปิด feature profile และ fallback ไป manual mode

4. **Integrate กับ Live endpoints**
   - `load accounts` และ `load dashboard` ส่ง payload ตามโหมด:
     - manual mode -> `{ tokenSources: [...] }`
     - profile mode -> `{ profileId: n }`
   - เมื่อ profile mode และไม่มี account selection ฝั่ง UI:
     - อนุญาตให้ backend ใช้ account preset ของ profile หรือโหลดทั้งหมดตาม `viewMode`

5. **Persistence + UX polish**
   - จำค่าใน localStorage:
     - `profileMode`
     - `profileId`
   - แสดง profile summary / status / filter tag บน chart meta
   - ปิด manual token controls อัตโนมัติเมื่อเปิด profile mode เพื่อลดการสับสน

## พฤติกรรมสำคัญที่ตั้งใจไว้

- การสร้าง profile ใหม่ ต้องมี token จริงจากช่องกรอก/รายการ token
- การอัปเดต profile:
  - ถ้าอยู่ profile mode จะอัปเดต metadata/preset โดยไม่เขียนทับ token sources
  - ถ้าอยู่ manual mode และมี token ใน pool/input จะส่ง `sources` ไปอัปเดตด้วย

## Verification

รันชุดทดสอบ backend แล้วผ่าน:

```bash
npx vitest run tests/live-dashboard.test.ts tests/token-security.test.ts tests/token-profiles.test.ts tests/db-plan.test.ts
```