Refine ProxyWarden routing workflow

2026-07-22 01:26:51 +03:00
parent 90b2eb507c
commit 67792f245f
15 changed files with 5058 additions and 448 deletions
@@ -0,0 +1,32 @@
+---
+name: design-proxywarden-ui
+description: Design, implement, review, or refine ProxyWarden UI using the shared calm monospace VPN-client language: centered state control, green-tinted neutrals, route-aware accents, stable geometry, and smooth state-driven motion. Use for React components, CSS, service controls, routing views, tooltips, status transitions, and responsive polish in this repository.
+---
+
+# Design ProxyWarden UI
+
+Keep ProxyWarden a compact Windows utility while matching the visual language of the sibling VPN client.
+
+## Workflow
+
+1. Read `AGENTS.md`, `.agent/skills/react-typescript-ui/SKILL.md`, and the complete component and CSS being changed.
+2. Read [visual-language.md](references/visual-language.md) for composition, typography, color, and surfaces.
+3. Read [motion-and-interaction.md](references/motion-and-interaction.md) for state and interaction animation.
+4. Reuse `src/ui/*`, existing state, CSS tokens, and typed Tauri boundaries. Prefer CSS and narrow markup changes over dependencies or new abstractions.
+5. Keep geometry stable across loading, success, error, copy, refresh, and route changes.
+6. Add `prefers-reduced-motion` behavior with every new animation.
+7. Run `npm test`, `npm run build`, and a visual desktop/narrow smoke when the environment allows it.
+
+## Non-negotiable decisions
+
+- Preserve explicit install, start, stop, uninstall, and apply actions. Styling must not blur operational meaning.
+- Keep the summary read-only except for its existing service power action; do not add configuration mutations there.
+- Render the primary power action as a generous invisible hit target around the icon, not a large filled accent circle.
+- Use the blue-green accent for ready/active routing and orange only for direct/local-route distinction. Keep warnings and errors semantic.
+- Prefer open composition, quiet surface shifts, and localized light over dashboard cards, thick borders, and decorative chrome.
+- Animate opacity, blur, glow, color, filter, and transform; never animate layout properties or use `transition: all`.
+- Keep labels, paths, status copy, spinners, and feedback in reserved geometry so neighboring content does not move.
+- Keep tooltips independent from transformed, rotating, glowing, or filtered controls.
+- Keep secrets and credential-bearing URLs redacted in every visual state.
+- Keep narrow layouts single-column and keyboard focus visible.
+
@@ -0,0 +1,42 @@
+# Motion and interaction
+
+## Character
+
+Use fluid, slightly viscous motion that makes work and state legible without moving layout. Avoid bounce, elastic easing, abrupt unmounts, and decorative page choreography.
+
+Use `cubic-bezier(0.16, 1, 0.3, 1)` for arrivals and interaction feedback.
+
+- hover and press: 180-300ms;
+- popover/tooltip: 90-180ms;
+- panel reveal: 420-600ms;
+- state color and glow: 600-900ms;
+- progress or numeric tween: about 900ms.
+
+## State controls
+
+- Transition inactive gray to the route accent slowly when a service becomes active, and back to gray when stopped.
+- Animate icon color, localized light, and SVG shadow together while keeping the hit target fixed.
+- Use a short `scale(0.97)` press followed by a slower release.
+- Show checking and running work with restrained motion that finishes cleanly; do not stop spinners or cycles at arbitrary coordinates.
+
+## Changing content
+
+- Crossfade alternate labels inside one fixed slot. Do not replace text in normal flow when its length can move the interface.
+- Animate only what changed. Unchanged labels, icons, surrounding rows, and route nodes stay fixed.
+- Update data immediately when it arrives; finishing a decorative cycle must not delay the result.
+- Repeated background polling updates quietly and does not replay entrance choreography.
+- Keep mode selectors outside the keyed content they replace. Let the new content enter with a short directional fade and blur while focus remains on the selected mode.
+- For user-triggered sorting, fade and lightly blur the reordered list as one surface; row stagger stays bounded and saved data order does not change.
+
+## Lists and disclosures
+
+- Reveal dynamic rows with opacity, light blur, and a small transform.
+- On hover, let a row lift one or two pixels and reveal a restrained local surface/light; keep resting rows visually flat.
+- Animate status dots through color, light, and a small scale change instead of animating a surrounding badge or border.
+- Keep departing rows mounted until their exit animation completes; remove immediately under reduced motion.
+- Bound list stagger to 60-100ms and never make interaction latency grow with list length.
+- Tooltips appear quickly above the trigger as independent translucent surfaces and never inherit trigger transforms or filters.
+
+## Reduced motion
+
+Under `prefers-reduced-motion: reduce`, remove transforms, filters, transitions, and keyframes while preserving final state, focus, contrast, status wording, and all functionality.
@@ -0,0 +1,58 @@
+# Visual language
+
+## Character
+
+Design for a Windows user opening a small control surface to check routing, recover a service, or apply one deliberate configuration change. The UI should feel soft, precise, dependable, and slightly terminal-like, not like a network administration dashboard.
+
+## Composition
+
+- Make current system state and the next safe action dominant.
+- Keep the summary power control visually centered and pair it with a compact vertical route chain.
+- Use open space, typography, subtle surface shifts, localized light, and state color before frames or dividers.
+- Keep service rows compact: status, human-readable detail, one primary action, then secondary actions.
+- Preserve the existing tabs and operational grouping; visual consistency does not justify moving ownership or hiding actions.
+
+## Typography and geometry
+
+- Use JetBrains Mono with uppercase tracked micro-labels only for metadata.
+- Use weight and color before large size jumps. Use tabular numerals for changing values.
+- Reserve equal space for mutually exclusive labels and feedback.
+- Use 8px controls, 10px surfaces, and pills only for status tokens.
+- Keep icon-only hit areas at least 40px and align icons in flex/grid rather than guessed offsets.
+
+## Color and light
+
+- Base dark surfaces on green-tinted OKLCH neutrals around hue 145.
+- Use blue-green `oklch(0.68 0.11 185)` as the primary active/focus accent.
+- Use orange `oklch(0.71 0.12 72)` for direct/local-route distinction, never as general decoration.
+- Keep warning/error colors semantic. Do not recolor destructive actions with the route accent.
+- Prefer localized `drop-shadow`, text glow, or a soft radial light layer over filled accent containers.
+- Keep inactive power neutral even on hover; color communicates state, not clickability alone.
+
+## Surfaces and controls
+
+- Use quiet translucent cloud surfaces for tooltips and transient overlays.
+- Inputs are inset and slightly darker than surrounding surfaces.
+- Avoid nested cards. Group related controls with spacing and one subtle surface shift.
+- Keep persistent work surfaces borderless by default. Use a border only when it communicates input focus, destructive confirmation, or another essential state.
+- Render statuses and counters as a glowing dot or quiet value plus text, not as bordered badge capsules.
+- Let service rows, route nodes, app rows, and server rows float on the shared canvas; reveal their surface only on hover, focus, selection, or active work.
+- Prefer a short luminous underline or localized glow for selection and keyboard focus over a rectangular focus frame.
+- Use shared `src/ui` primitives and preserve their default, hover, active, focus, disabled, loading, empty, and error states.
+
+## Route checks
+
+- Keep the route description, endpoint, and check action in a stable three-part row. Reserve the action width so mode changes and endpoint length never move the button.
+- Present the endpoint as the named route target, not as a detached badge or a second result.
+- Reveal a borderless result surface only while a check is running or after it completes. Show every returned probe in a structured table with separate status, external IP, and latency columns; do not compress unlike values into mixed badges or hardcode a fixed probe count.
+- Keep the summary short. Put verbose URLs, request methods, status codes, and errors in a calm structured detail cloud opened by hovering or focusing the result surface.
+- Animate result arrival and status light, while preserving the same geometry and honoring reduced motion.
+
+## Route modes and managed lists
+
+- Present external and local proxy routes as two peer choices above the content they replace. Keep the chooser mounted while the mode body crossfades in from the selected direction.
+- Reserve the same configuration-stage height for both routes and place it before route diagnostics, so mode-specific labels and controls remain aligned even when check results expand.
+- Use the blue-green accent for the external route and the warm route accent for Local sing-box. A small status light and quiet surface shift are enough; do not add a long selection rule.
+- A green service light means running, not merely installed. Installed-without-service, stopped, and missing states remain warning-colored.
+- Hovering service and application rows reveals a neutral side marker and slight positional response. Do not place a green radial wash behind the entire row.
+- Application grouping is display-only. Preserve saved order as the default, provide explicit Processes, EXE files, and Folders sections with counts, and keep alphabetical sorting as a separate option. Remount only the visible list surface so changes can fade into place.