Add enabled local routing rules and gateway version reporting

.codex/skills/design-vpn-client-ui/SKILL.md

@@ -27,12 +27,14 @@ Preserve the repo's focused one-screen VPN client language: a centered primary a
 - Animate state, opacity, blur, glow, color, filter, and transform. Do not animate layout properties.
 - Make live behavior visibly alive: running processes, changing values, mode changes, and interactive affordances should communicate through restrained motion instead of abrupt static replacement.
 - Let every visible cycle finish and return to its resting coordinates before stopping. Never cancel a hover animation, spinner, or list exit at an arbitrary frame.
+- Animate dynamic rows through complete enter and exit phases; keep a departing row mounted until its exit finishes, with immediate removal under reduced motion.
 - Animate only what changed. Keep unchanged digits, labels, icons, and surrounding geometry stable.
 - Keep tooltips outside transformed, rotating, glowing, or filtered controls. Show them quickly above the control as independent translucent cloud surfaces.
 - Prefer one clear value over unsupported detail. Hide subscription fields the provider does not supply.
 - Keep client UI compact and calm. Do not introduce dashboard cards, decorative chrome, or admin-console density.
 - Do not use a modal, popup, or blocking backdrop unless the user explicitly asks for one. Prefer inline disclosure or a non-modal layer that preserves the main screen.
 - Avoid borders, divider lines, and framed regions by default. Build hierarchy with spacing, typography, subtle surface changes, light, and depth; use a line only when it communicates an essential state.
+- In client-side editors, prefer flat text controls and accessible custom pickers over browser-native menus when the native surface breaks the visual language. Do not append another blank row until the current row is complete.
 
 ## Acceptance pass
 

.codex/skills/design-vpn-client-ui/references/motion-and-interaction.md

@@ -69,6 +69,14 @@ Use exponential ease-out curves such as `cubic-bezier(0.16, 1, 0.3, 1)` for arri
 - Disable pointer interaction during exit.
 - Do not replay on ping updates or unrelated renders.
 
+## Dynamic editors
+
+- Reveal added rows with opacity, blur, and a small transform while keeping surrounding geometry predictable.
+- Give removal its own exit state and keep the row mounted until `animationend`; under reduced motion, remove it immediately.
+- Do not let repeated add actions accumulate unfinished rows. Disable add while any current row lacks its required value and explain the disabled state in a reserved hint slot.
+- Replace browser-native dropdowns when their platform chrome conflicts with the client surface. Use an accessible custom listbox with trigger, selected state, outside-click and Escape closing, arrow-key navigation, and restored trigger focus.
+- Let picker options appear as a short staggered cloud using opacity, blur, and transform. Avoid borders, shadows, raised cards, and layout-property animation.
+
 ## Subscription input
 
 - Show the public domain while retaining the full URL internally.

.codex/skills/design-vpn-client-ui/references/visual-language.md

@@ -50,6 +50,7 @@ Design for a macOS user glancing at a small VPN control surface in a quiet deskt
 - Keep a tooltip as a sibling of the animated icon/button it describes. A tooltip must never rotate, glow, blur, scale, or move with the control.
 - Use inline confirmation for destructive subscription removal. Explain that VPN stops and proxy-dependent applications lose connectivity until a new subscription is configured.
 - Animate physical icon parts when their function suggests it, such as lifting a trash lid on hover, while keeping hit areas and nearby text fixed.
+- Keep advanced client editors flat inside their side layer: rows, notes, selectors, and actions should not become nested cards, bordered fields, or raised buttons. Use spacing, type, focus light, and state color for hierarchy.
 
 ## Data presentation