Comprehensive refactoring of form components to reduce complexity,
improve maintainability, and enhance user experience.
Provider Forms:
- CodexCommonConfigModal & CodexConfigSections
* Simplified state management with reduced boilerplate
* Improved field validation and error handling
* Better layout with consistent spacing
* Enhanced model selection with visual indicators
- GeminiCommonConfigModal & GeminiConfigSections
* Streamlined authentication flow (OAuth vs API Key)
* Cleaner form layout with better grouping
* Improved validation feedback
* Better integration with parent components
- CommonConfigEditor
* Reduced from 178 to 68 lines (-62% complexity)
* Extracted reusable form patterns
* Improved JSON editing with syntax validation
* Better error messages and recovery options
- EndpointSpeedTest
* Complete rewrite for better UX
* Real-time testing progress indicators
* Enhanced error handling with retry logic
* Visual feedback for test results (color-coded latency)
MCP & Prompts:
- McpFormModal
* Simplified from 581 to ~360 lines
* Better stdio/http server type handling
* Improved form validation
* Enhanced multi-app selection (Claude/Codex/Gemini)
- PromptPanel
* Cleaner integration with PromptFormPanel
* Improved list/grid view switching
* Better state management for editing workflows
* Enhanced delete confirmation with safety checks
Code Quality Improvements:
- Reduced total lines by ~251 lines (-24% code reduction)
- Eliminated duplicate validation logic
- Improved TypeScript type safety
- Better component composition and separation of concerns
- Enhanced accessibility with proper ARIA labels
These changes make forms more intuitive, responsive, and easier to
maintain while reducing bundle size and improving runtime performance.
Add one-click format functionality for JSON editors with toast notifications:
- Add format button to JsonEditor (CodeMirror)
- Add format button to CodexAuthSection (auth.json)
- Add format button to CommonConfigEditor (settings + modal)
- Add formatJSON utility function
- Add i18n keys: format, formatSuccess, formatError
Note: TOML formatting was intentionally NOT added to avoid losing comments
during parse/stringify operations. TOML validation remains available via
the existing useCodexTomlValidation hook.
- Add DialogFooter with Cancel and Save buttons to match Codex common config modal
- Improve dialog layout spacing with proper padding (px-6, py-4)
- Add flex layout with overflow handling for better responsiveness
- Fix content being too close to dialog edges
Replace inconsistent focus border styles with a unified soft blue ring effect
across all input and textarea components.
Changes:
- Add consistent focus:ring styles to Input and Textarea components
- Use focus:ring-blue-500/20 (light) and focus:ring-blue-400/20 (dark)
- Remove focus border color changes for a more subtle design
- Update ApiKeyInput to match the unified focus style
- Update all manual textarea elements (Codex and Claude configs)
Benefits:
- Consistent visual feedback across all form inputs
- Soft, elegant focus indication with blue glow effect
- No jarring border color changes
- Better user experience with subtle, professional styling
The focus effect now uses only a soft blue ring (20% opacity) without
changing border colors, creating a more refined and less distracting
interaction pattern.
Replace JsonEditor (CodeMirror) with plain HTML textarea elements in Claude
config editors to maintain consistency with Codex config editors and eliminate
theme conflicts.
Changes:
- Replace JsonEditor with textarea in ClaudeConfigEditor.tsx
- Replace JsonEditor with textarea in CommonConfigEditor.tsx
- Remove unnecessary dark mode detection logic
- Remove wrapper div with border class that caused double borders
- Apply unified border design system (border-border-default)
- Keep JsonEditor in UsageScriptModal for JavaScript code editing
Benefits:
- Eliminates CodeMirror theme conflicts with oneDark
- Simplifies codebase by removing unnecessary abstractions
- Consistent styling across all config input fields
- Automatic theme adaptation via CSS variables
- 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
- Create useCommonConfigSnippet hook to manage common config state
- Create CommonConfigEditor component with modal for editing
- Support merging/removing common config snippets from provider configs
- Persist common config to localStorage for reuse across providers
- Auto-detect if provider config contains common snippet
- Replace JSON editor with CommonConfigEditor in ProviderForm
