# Android Agent UI Redesign

**Date:** 2026-07-04
**Scope:** NexusGuard Android Agent main activity UI

## Summary

Complete redesign of the Android agent main activity UI with a dark theme, green accent color scheme, copy-tap support, and new port forwarding display.

## Files Changed

| File | Change |
|------|--------|
| `app/src/main/res/values/strings.xml` | Added 13 new string resources for UI labels |
| `app/src/main/res/values/colors.xml` | Added 8 new color definitions (dark/green theme) |
| `app/src/main/res/values/themes.xml` | Applied custom Material3 theme attributes |
| `app/src/main/res/layout/activity_main.xml` | Complete layout redesign |
| `app/src/main/java/com/datadunia/nexusguard/MainActivity.kt` | Updated Kotlin bindings and logic |

## Design Changes

### Theme
- Dark background (`#0D1117`) with green accent (`#00C853`)
- Material3 `DayNight.NoActionBar` parent theme with custom color overrides
- Card borders use `#21262D` stroke color

### Header
- App name "NexusGuard" displayed in green accent color
- MaterialSwitch for VPN toggle with ON/OFF labels
- Status text below switch (colored by state)

### Status Device Agent Card
- Renamed from "Informasi Tunnel" to "Status Device Agent"
- Six data rows: IP Address, Admin Web, Device ID, Handshake Terakhir, Allowed IPs, Transport
- All value TextViews are selectable (`textIsSelectable="true"`) and copy-tappable
- Device ID displays full text without truncation (no `ellipsize` or `singleLine`)
- Admin Web shows fixed domain `https://api-nexus.datadunia.com`

### Port Forwarding Card (New)
- Displays active port forwards from `PortForwarder.getActiveForwards()`
- Shows protocol badge (TCP/UDP) and port mapping info
- Empty state message when no forwards are active

### Log Card
- Height reduced from 300dp to 250dp
- Monospace font at 10sp
- Log level filtering: WARN+ in release, all levels in debug

## Behavior Changes

### Copy-Tap
All value TextViews in the status card respond to tap with clipboard copy and "Disalin" Toast feedback.

### Log Level Filtering
`LogBuffer.initLevel(BuildConfig.DEBUG)` called in `onCreate()` — release builds only store WARN+ entries (50 max), debug builds store all.

### Port Forward Updates
`updatePortForwardCard()` called after every `updateCardFields()` in all tunnel states (CONNECTING, CONNECTED, FAILED).

## Layout IDs

| ID | Type | Purpose |
|----|------|---------|
| `switchVpn` | MaterialSwitch | VPN toggle |
| `tvStatus` | TextView | Connection status text |
| `cardInfo` | MaterialCardView | Status Device Agent card |
| `tvIpAddress` | TextView | Internal IP value |
| `tvAdminWeb` | TextView | Admin web domain (was `tvServerEndpoint`) |
| `tvDeviceId` | TextView | Device ID value |
| `tvHandshake` | TextView | Last handshake time |
| `tvAllowedIps` | TextView | Allowed IPs value |
| `tvTransport` | TextView | Transport protocol |
| `cardPorts` | MaterialCardView | Port Forwarding card |
| `portForwardContainer` | LinearLayout | Dynamic port forward items |
| `cardLog` | MaterialCardView | Log card |
| `tvLogScrollView` | ScrollView | Log scroll container |
| `tvLog` | TextView | Log text |
| `btnImportConfig` | MaterialButton | Import config button |
| `btnToggleLog` | MaterialButton | Log toggle button |
| `btnSettings` | ImageButton | Settings icon |

## Breaking Changes

- `tvServerEndpoint` renamed to `tvAdminWeb` — any code referencing the old ID must be updated
- New string resources added — translations needed for non-Indonesian locales