# Phase 7 - Desktop Frontend UX (Manage + Select Profile)

Status: completed  
Date: 2026-04-18  
Target: `WepAppOpusApiDesktop`

## 1) Objective

Deliver live-data UX in Desktop renderer with profile/manual token selection and account selection flow, matching phase-7 intent from web version.

## 2) Implementation

## 2.1 New Live page + navigation

Added route and navigation entry for live flow:
1. `renderer/src/pages/LiveDashboard.jsx`
2. `renderer/src/App.jsx` route `/live`
3. `renderer/src/components/Sidebar.jsx` menu item `Live Dashboard`

## 2.2 Select mode UX

`LiveDashboard` supports two modes:
1. **Profile mode**
   - use saved token profile (`profileId`)
   - profile list loaded from contract API
2. **Manual mode**
   - enter one or multiple access tokens
   - parsed into `tokenSources[]`

Selections are persisted locally:
1. `desktop_live_profile_mode`
2. `desktop_live_profile_id`
3. `desktop_live_view_mode`

## 2.3 Account selection UX

Implemented end-to-end account selection against live accounts contract:
1. load accounts via `getLiveAccountsContract()`
2. selectable modes:
   - `single`
   - `selected`
   - `all`
3. account refs are normalized and deduplicated before dashboard call

## 2.4 Live dashboard request wiring

Live dashboard button builds payload from UI state and invokes:
1. `getLiveDashboardContract()`

Payload includes:
1. token context (`profileId` or `tokenSources`)
2. date range (`since`, `until`) from top date picker
3. selection mode + account refs
4. campaign query
5. conversion metric

## 2.5 Live rendering

On success, page renders:
1. KPI cards (`spend`, `impressions`, `clicks`, `purchases`, `purchaseValue`, `ROAS`, etc.)
2. daily Spend + ROAS chart
3. campaign spend chart
4. gender spend chart
5. campaign table
6. live meta summary (source, resolvedBy, accountCount, profileName)

## 2.6 Shared utility

Added helper module:
1. `renderer/src/utils/livePayload.js`
   - parse token text
   - build manual token source list
   - build/dedupe account refs

## 3) Tests / Verification

Added unit tests:
1. `tests/live/live-payload.test.js`

Commands executed:
1. `npm run lint`
2. `npm run test`
3. `npm run build:renderer`
4. `npm run build:win`

Result:
1. all checks passed
2. installer artifacts generated in `WepAppOpusApiDesktop/release`