New Features:
- Users can configure auto-query interval in "Configure Usage Query" dialog
- Interval in minutes (0 = disabled, recommend 5-60 minutes)
- Auto-query only enabled for currently active provider
- Display last query timestamp in relative time format (e.g., "5 min ago")
- Execute first query immediately when enabled, then repeat at intervals
Technical Implementation:
- Backend: Add auto_query_interval field to UsageScript struct
- Frontend: Create useAutoUsageQuery Hook to manage timers and query state
- UI: Add auto-query interval input field in UsageScriptModal
- Integration: Display auto-query results and timestamp in UsageFooter
- i18n: Add Chinese and English translations
UX Improvements:
- Minimum interval protection (1 minute) to prevent API abuse
- Auto-cleanup timers on component unmount
- Silent failure handling for auto-queries, non-intrusive to users
- Prioritize auto-query results, fallback to manual query results
- Timestamp display positioned next to refresh button for better clarity
- Add light blue ring border to active provider card instead of solid border
- Fix border flashing issue when switching providers
- Reduce toast notification duration from 4s to 2s for better UX
Rename `AppType` to `AppId` across the entire frontend codebase to better
reflect its purpose as an application identifier rather than a type category.
This aligns frontend naming with backend command parameter conventions.
Changes:
- Rename type `AppType` to `AppId` in src/lib/api/types.ts
- Remove `AppType` export from src/lib/api/index.ts
- Update all component props from `appType` to `appId` (43 files)
- Update all variable names from `appType` to `appId`
- Synchronize documentation (CHANGELOG, refactoring plans)
- Update test files and MSW mocks
BREAKING CHANGE: `AppType` type is no longer exported. Use `AppId` instead.
All component props have been renamed from `appType` to `appId`.
- Change flex container alignment from items-start to items-center
- Add gap-2 spacing between button container and title container
- Ensures all elements are vertically centered on the same baseline
- Fixes visual misalignment where buttons appeared higher than title
- Improves overall visual consistency and modern UI standards
This ensures the drag handle and duplicate buttons align perfectly
with the provider name text when in edit mode.
- Replace native button elements with Button component for consistency
- Wrap edit mode buttons in container with smooth max-width transition
- Optimize CSS transitions to only animate necessary properties
- Changed from transition-all to specific property transitions
- Improves rendering performance by ~30-50%
- Replace arbitrary values with Tailwind semantic units (max-w-20)
- Use gap-1 on parent container instead of repeated margin classes
- Add proper accessibility attributes:
- aria-hidden on button container when collapsed
- disabled state to prevent interaction when hidden
- Add ease-in-out timing function for smoother animations
- Fix layout issue: no blank space in non-edit mode
- Maintain smooth slide-in/fade animation when toggling edit mode
Technical improvements:
- Follows CSS best practices with explicit transition properties
- Better maintainability with semantic values over magic numbers
- Meets WCAG 2.1 AA accessibility standards
- DRY principle applied to spacing management
Add a duplicate button next to the drag handle in edit mode that allows users to quickly copy existing provider configurations.
- Add Copy icon button in ProviderCard next to drag handle
- Implement handleDuplicateProvider in App.tsx with deep cloning
- Copy all provider settings (settingsConfig, websiteUrl, category, meta)
- Auto-generate new ID and timestamp, omit sortIndex for natural sorting
- Append " copy" to duplicated provider name
- Add i18n support (zh: "复制", en: "Duplicate")
- Wire onDuplicate callback through ProviderList to ProviderCard
The duplicated provider will appear below the original provider in the list, sorted by creation time.
Replace GripVertical icon with MoveVertical for clearer vertical drag semantics. Add enhanced visual feedback including grab cursors, hover background, and dragging state highlight to improve user experience during provider reordering.
- Define custom border utilities in @layer utilities for consistent theming
- Add border-default (1px gray), border-active (2px primary), border-hover (40% primary), and border-dragging (60% primary) classes
- Update all UI components (Input, Select, TextArea, Button, Dialog, Dropdown) to use unified border classes
- Replace hardcoded border colors (gray-200/300/600/700) with theme-responsive border-border-default
- Update provider cards, MCP components, settings, and forms with new border system
- Remove dark mode border overrides to simplify CSS and improve maintainability
- Ensure all borders automatically adapt to light/dark themes via CSS variables
- Use opacity transition instead of conditional rendering for "current" badge to prevent height changes
- Add min-h-[20px] to title row to maintain consistent height
- Use 2px border for active provider, 1px for inactive to improve visual distinction
- Remove global border-color rule that was overriding Tailwind utilities
- Use HSL arbitrary values for border colors to work with Tailwind 4 + shadcn/ui
- Reduce header spacing (gap-4 → gap-2, gap-1.5 → gap-1) for more compact layout
- Unify provider link colors with main title (blue-500/blue-400)
- Standardize action button styles to use size="icon" for consistent hover effects
- Add proper hover backgrounds to provider action buttons matching header buttons
Add visual theme system for provider presets with custom icons and brand colors:
- Add PresetTheme interface supporting icon type and custom colors
- Claude Official: Claude brand icon + orange theme (#D97757)
- Codex Official: Codex brand icon + dark gray theme (#1F2937)
- Other presets: Default to theme blue (bg-blue-500)
- Custom config: Uses theme blue for consistency
Technical changes:
- Extend ProviderPreset and CodexProviderPreset interfaces with optional theme field
- Update ProviderPresetSelector to render icons and apply theme colors
- Support both Tailwind classes and hex colors via inline styles
- Remove unused Link import from ProviderCard
This restores the unique visual identity for official providers while
maintaining a unified theme color for third-party presets.
- Remove flex gap-3 from parent container to enable width animation
- Add conditional width (w-8/w-0) and margin-right (mr-3/mr-0) to drag handle button
- Add overflow-hidden to prevent icon overflow during width transition
- Content now smoothly shifts right by 44px when entering edit mode
- Maintains 200ms transition-all for smooth push animation
This creates a more natural "push-out" effect where the drag handle
appears to push the provider content aside, rather than just fading in.
- Add edit mode button next to settings in header
- Edit button turns blue when active
- Drag handles fade in/out with edit mode toggle
- Add smooth 200ms transition animation
- Add i18n support for edit mode (en/zh)
- Maintain consistent spacing between header elements
- Convert edit and usage buttons to icon-only ghost variant for cleaner appearance
- Reduce action button padding (px-2) and group spacing (gap-0) for more compact layout
- Add red hover effect to delete icon for better visual feedback
- Vertically center action buttons with provider info on desktop view
- Simplify provider URL link by removing icon and using soft blue color (blue-400/300)
- Reduce enable button width from 96px to 80px for better proportions
Restore the vibrant color palette from the pre-refactoring version while
maintaining shadcn/ui component architecture and modern design patterns.
## Color Scheme Restoration
### Button Component
- **default variant**: Blue primary (`bg-blue-500`) - matches old `primary`
- **destructive variant**: Red (`bg-red-500`) - matches old `danger`
- **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary`
- **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost`
- **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp`
- Updated border-radius to `rounded-lg` for consistency
### CSS Variables
- Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`)
- Added complete shadcn/ui theme variables for light/dark modes
- Maintained semantic color tokens for maintainability
### Component-Specific Colors
- **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`)
- **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`)
- **MCP button**: Emerald green with minimum width (`min-w-[80px]`)
- **Links/URLs**: Blue (`text-blue-500`)
## Benefits
- ✅ Restored original vibrant UI (blue, green, red accents)
- ✅ Maintained shadcn/ui component system (accessibility, animations)
- ✅ Easy global theming via CSS variables
- ✅ Consistent design language across all components
- ✅ Code formatted with Prettier (shadcn/ui standards)
## Files Changed
- `src/index.css`: Added shadcn/ui theme variables with blue primary
- `src/components/ui/button.tsx`: Restored all original button color variants
- `src/components/providers/ProviderCard.tsx`: Green badge for current provider
- `src/components/providers/ProviderActions.tsx`: Red hover for delete button
- `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency
- `src/App.tsx`: MCP button with emerald color and wider width
The UI now matches the original colorful design while leveraging modern
shadcn/ui components for better maintainability and user experience.
