[DevHud UI] Redesign Account states and security hierarchy #873

@kdy1

Summary

Restructure DevHud's Account surface into a clear responsive hierarchy for Session, API origin, Security, External tools, and Danger zone.

Depends on the shared shell and design foundation: #869

This is a UI-only Task. Preserve all current identity states, account mutations, API-origin cleanup ordering, secure-storage behavior, external-link restrictions, and mobile capability boundaries. Do not change authentication, account deletion, recovery policy, Connect RPCs, protobufs, persisted settings, or native bridge operations.

Evidence

• Investigated revision: aebc672366537fa12dae0c04de33d96e2b8fff6d, matching freshly fetched main on 2026年08月30日.
• Account is currently one inline composition containing AccountIdentity and external-link buttons; the project issue link is already desktop-only: apps/devhud/src/App.tsx.
• API-origin editing owns validation, custom-API trust warning, and HTTPS/TLS guidance: apps/devhud/src/identity-ui.tsx.
• Identity UI renders starting, bootstrap error, signed-out/guest, authenticated loading/error/account, blocked, deletion-pending, cleanup-failure, and delete-confirmation states in a flat sequence: apps/devhud/src/identity-ui.tsx.
• The closed identity-state union and existing logout/delete/restore/cleanup actions are owned by the service boundary: apps/devhud/src/service-boundary.tsx, apps/devhud/src/service-boundary.tsx.
• API-origin confirmation and cleanup preserve callback discard, old-origin purge, scoped cache cleanup, new-origin configuration, and conditional reload; equivalent normalized origins do nothing: apps/devhud/src/App.tsx, apps/devhud/src/App.test.tsx.
• Account selection currently focuses the API-origin input, including through the command palette: apps/devhud/scripts/accessibility.test.mjs.
• Account lifecycle/security is authoritative in the DevHud foundation contract, security contract, and #815.
• Duplicate searches found no open Account UI or redesign issue.

Current Gap

The required Account behavior is implemented, but API security guidance, session state, recovery, ordinary actions, external tools, and destructive actions do not have stable visual boundaries. State transitions are semantically correct but visually compete, and existing confirmations are not yet presented through the common Dialog treatment.

Proposed Scope

Page structure

Reuse PageHeader, Card, Button, Field, StatusBadge, StatePanel, Dialog, and DataRow. Render the same semantic order on desktop and stacked mobile layouts:

1. Session
2. API origin
3. Security
4. External tools
5. Danger zone, when applicable

Session and account states

• starting: localized loading status without disabling the shell.
• signed-out and guest: existing Sign in action.
• authenticated without an account: existing account-loading status.
• authenticated with accountError: safe Connect classification, optional correlation ID, and Retry.
• Loaded authenticated account: display-name/email fallback, signed-in status, and Log out.
• blocked: official-services restriction plus local-only guidance and Log out; no Delete or Restore.
• deletion-pending: recovery deadline when available, Restore, and Log out. A device-cleanup failure exposes the existing cleanup retry without repeating server deletion.
• Preserve independent administrative block after restore. A purge-claimed account remains controlled by cleanup and never exposes Restore.
• Use text/icon status cues in addition to color.

API origin and Security

• Keep API origin and Apply available in every account state.
• Preserve normalization/validation: non-loopback requires HTTPS; loopback HTTP is allowed; credentials, paths, query, fragment, whitespace, and TLS bypass remain rejected.
• Use the shared accessible confirmation dialog for a real origin change. Cancellation has no side effects; acceptance preserves the exact cleanup/configuration order.
• Put existing custom-API trust and HTTPS/TLS guidance in Security. Place bootstrap reset/validation and destructive-cleanup recovery nearby when applicable.
• Do not add connection tests, scanners, credential enumeration, token display, or new settings.

External tools and Danger zone

• Keep existing fine-grained and classic PAT links on desktop and mobile.
• Keep the project issue link desktop-only; direct issue creation is absent on mobile.
• Preserve the closed system-browser target allowlist and stale-completion guards.
• Danger zone appears only for a loaded authenticated account and owns Delete account.
• Delete uses the shared alert dialog, initially focuses Cancel, traps focus, closes on Escape, restores trigger focus, and retains existing localized deletion warning.
• Log out remains a Session action, not a danger-zone action.

Compatibility and documentation

• Preserve SurfaceId.Account, ActionId.Account, localization, all external interfaces, authentication, token/cache cleanup, secure storage, 30-day recovery, final purge, and administrative block.
• Add only localized copy required for section labels/state descriptions.
• Update docs/apps-devhud-foundation.md and docs/project-devhud.md with the resulting Account composition.
• No feature flag, migration, or public product-documentation change is required.

Acceptance Criteria

• Account reuses the shared foundation and renders Session, API origin, Security, External tools, and applicable Danger zone in the same semantic order on desktop and mobile.
• Starting, signed-out, guest, authenticated loading/error/account, blocked, deletion-pending, cleanup-failure, and action-failure remain reachable, distinct, and localized.
• API-origin validation, confirmation, callback discard, session/token purge, scoped-cache cleanup, network-policy update, and conditional reload are unchanged.
• Equivalent normalized API origins cause no confirmation or cleanup.
• Logout, Delete, Restore, and cleanup retry retain service-boundary semantics; cleanup retry never repeats successful server deletion.
• Restore never clears an independent administrative block, and a purge-claimed account never exposes Restore.
• Fine-grained/classic PAT links remain on both platform families; project issue creation remains desktop-only.
• Delete confirmation starts on Cancel, traps focus, closes on Escape, and restores opener focus.
• Opening Account or selecting it from the command palette still focuses the API-origin input.
• English/Korean and light/dark work at ×ばつ900, ×ばつ768, ×ばつ844, 320px, and 200% zoom without clipping.
• No Connect, protobuf, settings schema, native bridge, authentication, credential, deletion, purge, or recovery contract changes.

Test Scenarios

1. Render every identity status with relevant account/error data; assert correct cards, roles, actions, status cues, and hidden destructive controls.
2. Render account loading, a safe account failure with correlation ID/Retry, and loaded display-name/email fallback.
3. Enter invalid origin and assert inline validation/no side effect; enter equivalent normalized origin and assert no confirmation; cancel and accept a real change and assert the exact existing cleanup sequence.
4. Open Delete keyboard-only; verify Cancel focus, Tab containment, Escape/focus restoration, then confirm and assert deletion-pending state.
5. Fail device cleanup after successful deletion, retry, and assert DeleteAccount once while local cleanup runs twice.
6. Restore an ordinary deletion-pending account and a separately blocked one; assert only the latter remains blocked. Verify purge-claimed state has no Restore.
7. Verify PAT targets on desktop/mobile, project issue target on desktop, and its absence on mobile.
8. Exercise English/Korean, light/dark, keyboard-only, 200% zoom, and all contracted viewport widths.
9. Run pnpm --filter devhud test and pnpm --filter devhud verify:pins, including existing identity, accessibility, localization, CSP, deterministic-build, and mobile-closure checks.

Out of Scope

• Identity/account/settings/deletion APIs, new account fields, account-management features, security scans, credential views, or external destinations.
• Changing logout, purge, restore, administrative-block, local-credential purge, or 30-day recovery behavior.
• Moving PAT storage or any device-local secret.
• Mobile direct issue creation.
• Reimplementing the shared shell, tokens, or generic components owned by the dependency issue.

Task