# Account Management Settings Implementation Plan

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

**Goal:** Consolidate existing account list, Pro controls, usage navigation, and account-display preferences behind one Account Management entry in Settings.

**Architecture:** `SettingsWindow` remains the settings navigation owner and gains an account-management child state. A focused `AccountManagementPage` composes the existing account, Pro, usage, and preference controls without changing their behavior; usage remains its existing nested detail page.

**Tech Stack:** React, Node test runner, existing PWA CSS and i18n utilities.

## Global Constraints

- Preserve all existing account add/remove, Pro restore/manage, usage, and display-preference behavior.
- Keep account metadata safe and never expose credentials or private filesystem paths.
- Keep mobile controls at least 48px high and verify the 390x844 layout.
- Preserve unrelated worktree changes and stage only patch-owned hunks.

---

### Task 1: Account Management Navigation and Composition

**Files:**
- Create: `apps/pwa/src/features/accounts/AccountManagementPage.jsx`
- Modify: `apps/pwa/src/features/context/SettingsWindow.jsx`
- Modify: `apps/pwa/src/shared/i18n.js`
- Test: `apps/pwa/src/features/accounts/account-management-ui.test.js`

**Interfaces:**
- Consumes: existing `AccountsPanel`, `ProSettingsSection`, account preference props, and Settings back-layer navigation.
- Produces: `AccountManagementPage` with `accounts`, `manager`, `pro`, `accountMosaic`, `conversationAccountVisible`, preference callbacks, `onUsageOpen`, and `onBack` props.

- [x] **Step 1: Write the failing UI source test**

Assert that Settings has one Account Management navigation action, no longer renders account/Pro/usage/account-display controls inline, and that `AccountManagementPage` renders those existing controls in the agreed order.

- [x] **Step 2: Run the focused test to verify failure**

Run: `node --test apps/pwa/src/features/accounts/account-management-ui.test.js`

Expected: FAIL because `AccountManagementPage.jsx` and account-management navigation do not exist.

- [x] **Step 3: Implement the smallest composition change**

Create `AccountManagementPage`, add `accountManagementOpen` navigation state/back handling to `SettingsWindow`, keep `UsageSettingsPage` nested under it, and add English/Korean Account Management labels.

- [x] **Step 4: Run the focused test to verify success**

Run: `node --test apps/pwa/src/features/accounts/account-management-ui.test.js`

Expected: PASS.

### Task 2: Layout and Regression Verification

**Files:**
- Verify: `apps/pwa/src/features/context/context.css`
- Modify: `apps/pwa/src/features/accounts/account-management-ui.test.js`
- Modify: `docs/PRE_RELEASE_CHECKLIST.md`

**Interfaces:**
- Consumes: the new `AccountManagementPage` class names.
- Produces: a scrollable, mobile-safe account-management screen matching existing Settings styling.

- [x] **Step 1: Add focused layout assertions**

Assert that the account-management page inherits the existing internally scrolling settings content and 48px navigation-control rules.

- [x] **Step 2: Run the focused test and confirm the inherited layout contract**

Run: `node --test apps/pwa/src/features/accounts/account-management-ui.test.js`

Expected: PASS because the new page deliberately reuses the existing settings classes.

- [x] **Step 3: Avoid unnecessary scoped CSS**

The 390x844 browser check confirms the inherited settings section/action styles need no new selectors.

- [x] **Step 4: Run focused and required verification**

Run:

```powershell
node --test apps/pwa/src/features/accounts/account-management-ui.test.js
npm.cmd test
npm.cmd --workspace apps/pwa exec vite build
git diff --check
```

Expected: all commands exit 0, with only documented pre-existing skips.

- [x] **Step 5: Verify browser behavior and commit patch-owned hunks**

Verify Settings → Account Management → Usage → Back at 390x844, preserve the unrelated active Pro-release checklist, then stage only the files and hunks owned by this patch before committing.
