fix: resolve TypeScript type-check errors

- Add cacheHitRate to ProxyMetricsService, handler, and router schema - Fix StatCard to support string values and purple accent - Fix duplicate tabs keys in i18n translations (EN/ZH/RU) - Add missing cacheStatus translations across all languages
2026-04-23 02:50:09 -03:00
1 parent 0be7d7fea2
commit fd1b2b8bc0
@@ -0,0 +1,81 @@
+# Proxy Page — UI/UX Improvements
+
+> Generated from designer agent analysis of `src/routes/proxy.tsx`
+> Date: 2026-04-22
+
+## Current Pain Points
+1. **Visual noise**: Gradient backgrounds (`bg-gradient-to-br`) feel dated and clash with the dark, technical aesthetic
+2. **Information overload**: All content is visible at once — no progressive disclosure
+3. **Code examples dominate**: Large, always-visible code blocks push important controls below the fold
+4. **Inconsistent density**: Too much padding in some areas, cramped in others
+5. **Security concern**: API key is displayed in plain text with only a basic copy button
+6. **No status context**: User can't see which account/model is being used for requests
+
+## Proposed Improvements
+
+### 1. Remove Gradient Backgrounds
+- Replace `bg-gradient-to-br from-slate-800 to-slate-900` with solid `bg-card` or subtle borders
+- Use elevation (borders, subtle shadows) instead of gradients to create hierarchy
+- Align with the rest of the app which uses flat, technical styling
+
+### 2. Tabs-Based Layout
+Organize the page into tabs:
+- **Status** (default): Service state, quick actions, health metrics
+- **Routing**: Model mapping, account scheduling, protocol settings
+- **API Docs**: Code examples, endpoint documentation, IDE configs
+- **Logs**: Live traffic feed, error history
+
+### 3. Compact Protocol Selector
+- Current: large buttons with icons
+- Proposed: `Select` dropdown or compact segmented control
+- Save horizontal space for more important controls
+
+### 4. Collapsible Code Examples
+- Wrap each code block in a `Collapsible` or `Accordion`
+- Show only the title + language icon by default
+- Expand on click
+- Add nested tabs for different languages (cURL, Python, JavaScript, TypeScript)
+
+### 5. Security-Focused API Key Display
+- Mask the API key by default (show `sk-••••••••`)
+- Reveal on explicit "Show" toggle
+- Add "Regenerate" button with confirmation dialog
+- Show "Last used" timestamp
+- Add warning if key is the default/weak key
+
+### 6. Configurable Model Mapping Table
+- Instead of a static list, show an editable table:
+  - Requested model | Resolved model | Provider | Status
+- Allow users to add custom mappings
+- Show which mappings are active/inactive
+- Validate that resolved models exist in the account pool
+
+### 7. Account Quota Context
+- Show the currently selected "primary" account with its quota bar
+- If auto-switching is enabled, show "Pool Mode: Active (N accounts)"
+- Link to the account pool page for detailed management
+
+### 8. Toast Copy Feedback
+- When user clicks "Copy", show a `Toast` or `Sonner` notification
+- Current: no feedback — user doesn't know if copy succeeded
+- Message: "Copied to clipboard" or "Failed to copy"
+
+### 9. Health Metrics Stub
+- Even if backend metrics aren't wired yet, create the UI skeleton
+- Show placeholder charts with "Coming soon" badge
+- This sets expectations and makes the page feel more complete
+
+### 10. Empty States
+- When proxy is stopped, show a clear empty state:
+  - Icon: `ServerOff` from lucide
+  - Message: "Proxy is not running"
+  - Action: "Start Proxy" button prominently displayed
+- When no accounts are configured, show a CTA to add accounts
+
+---
+
+## Design Principles
+- **Density over whitespace**: This is a developer tool — show more information per pixel
+- **Progressive disclosure**: Hide advanced options behind tabs/accordions
+- **Immediate feedback**: Every action should have a visible result (toast, spinner, state change)
+- **Security first**: API keys and sensitive data should never be displayed casually