Problem: Users had to rename folders on each host individually, which was
time-consuming and error-prone when managing multiple hosts in folders.
Solution: Complete folder management integration directly in Host Viewer with:
**Core Features:**
- Remove folder buttons: Hosts in folders show "X" buttons to move them to "no folder"
- Inline folder editing: Click folder names to edit directly (with pencil icon hint)
- Drag & drop: Drag host cards between folders with visual feedback
- Centralized renaming: Rename folders once, automatically updates all hosts
**UI/UX Enhancements:**
- Visual feedback: Drag states, hover effects, loading indicators
- Smart buttons: Only show remove buttons for hosts actually in folders
- Confirmation dialogs: Prevent accidental operations
- Real-time updates: Immediate UI refresh after operations
- Touch-friendly: Works well with drag & drop on different devices
**Technical Implementation:**
- HTML5 drag & drop API for cross-browser compatibility
- Integrated with existing Host Viewer without separate pages
- Reuses backend APIs for folder operations and host updates
- Comprehensive error handling and user feedback
- Event-driven updates for seamless state synchronization
**Backend Support:**
- Added folder statistics API: GET /ssh/db/folders/with-stats
- Added bulk rename API: PUT /ssh/db/folders/rename
- Fixed encryption key issue: Added CREDENTIAL_ENCRYPTION_KEY to .env
**Removed Components:**
- Eliminated separate "Folder Manager" tab for cleaner UX
- FolderManager.tsx kept for potential future use but not integrated
**Internationalization:**
- Complete English/Chinese support for all new features
- Contextual messages with dynamic content (host names, folder names)
This solution transforms folder management from a tedious multi-step process
into an intuitive, visual experience integrated directly into the main host
management workflow.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
Implement Issue #130 suggestion: Add dropdown menu in top tab bar to help
users quickly navigate between open hosts/tabs when many are open.
Features:
- Smart visibility: Only shows when multiple tabs are open
- Visual identification: Each tab type has corresponding icon (Home, Terminal, Server, etc.)
- Active tab indicator: Current tab highlighted with blue dot
- Quick switching: Click any tab to switch instantly
- Seamless integration: Positioned in top navbar without disrupting existing UI
New Components:
- src/components/ui/dropdown-menu.tsx: Radix UI based dropdown component
- src/ui/Desktop/Navigation/Tabs/TabDropdown.tsx: Tab navigation dropdown logic
- Updated TopNavbar.tsx with integrated dropdown
UI/UX Improvements:
- Consistent dark theme styling (#18181b background, #303032 borders)
- 30x30px button size matching existing toolbar buttons
- Right-aligned dropdown to avoid screen boundary issues
- Hover effects and smooth transitions
- Responsive design for different screen sizes
i18n Support:
- Added "tabNavigation" key in both English and Chinese translations
- Accessible tooltips and labels
Technical Implementation:
- Zero breaking changes: Pure incremental feature
- Reuses existing tab context and switching logic
- TypeScript safe with proper type definitions
- Performance optimized: Only renders when needed
- Follows existing code patterns and conventions
This enhancement significantly improves the user experience when managing
multiple host connections, providing quick access to any tab without scrolling.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
Problem: When users changed host authentication credentials, the main SSH
connection worked fine, but metrics collection failed with "All configured
authentication methods failed" error.
Root Cause: The metrics collection system (server-stats.ts) had its own
separate authentication implementation that only supported legacy password/key
fields and didn't integrate with the credential-based authentication system.
Solution:
- Remove duplicate HostRecord type, use unified SSHHostWithCredentials
- Import and use ssh-host.service for consistent credential resolution
- Update fetchAllHosts() to properly resolve credentials using getHostWithCredentials()
- Enhance buildSshConfig() with same authentication logic as main connections
- Add proper error handling for missing credentials
- Support both credential-based and legacy authentication methods
Benefits:
- Eliminates authentication logic duplication (follows "good taste" principle)
- Metrics collection now works after changing host credentials
- Uses single source of truth for credential resolution
- Maintains backward compatibility with legacy authentication
- Better error messages for debugging authentication issues
Now both main SSH connections and metrics collection use the same robust
authentication system, eliminating the authentication divergence that caused
the metrics failures.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
Problem: When opening Add Host or Edit Host, cursor was not focusing on any field,
making it less convenient for users to start entering connection details.
Root cause: The react-hook-form field spread operator {...field} was overriding
our custom ref, preventing proper ref binding to the IP input element.
Solution:
- Use function ref to properly bind both react-hook-form ref and our custom ref
- Set focus on component mount and when editingHost changes
- Focus on IP address field as it's the first logical field in connection details
- Use 300ms timeout to ensure DOM rendering is complete
Now when users click "Add Host" or edit a host, the cursor automatically
focuses on the IP address input field for better UX.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
When adding or editing a host, the cursor now automatically focuses on the IP address field, which is the first field in the connection details section. This improves UX by allowing users to immediately start typing the most logical first piece of information.
Changes:
- Added useRef for IP address input field
- Added useEffect to focus IP field when component mounts or editingHost changes
- Uses setTimeout to ensure DOM is ready before focusing
- Works for both adding new hosts and editing existing hosts
- Modified empty state in HostManagerHostViewer to include all import controls
- Import JSON button, sample download, and format guide now appear consistently
- Maintained existing functionality while improving user experience
- Added helpful message directing users to use import functionality
- Fixed conditional rendering logic that was hiding import options
Resolves#125
Backend improvements:
- Fix SSH host update authentication system (use effectiveAuthType)
- Support both authType and authMethod field mapping
- Prevent empty password/key from overwriting existing credentials
- Add proper credentialId support for credential-based authentication
Frontend enhancements:
- Add dedicated "Add Credential" page similar to Add Host
- Refactor credentials management with consistent Host Manager styling
- Fix credential display bug (hide keyType for password credentials)
- Enhance CredentialSelector with improved API response handling
i18n internationalization:
- Fix Admin Settings i18n issues with comprehensive translation support
- Add missing credentials.* translation keys for both English and Chinese
- Fix hardcoded key type labels (RSA, ECDSA, Ed25519) with proper translations
- Add missing placeholders and form labels
UI/UX improvements:
- Update HostManager with 4-tab structure including credential management
- Improve visual consistency across credential components
- Better error handling and user feedback
- Enhanced form validation and submission logic
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
- Add credential selection tab to Host Manager editor
- Create CredentialSelector component for credential selection
- Update form validation to support credential-based authentication
- Extend SSH host interfaces with credentialId field
- Add internationalization support for credential authentication
- Fix OIDC config endpoint to return 200 with null data instead of 404
- Improve credentials UI spacing and color consistency
- Remove hardcoded colors and use Zinc theme throughout
- Add complete SSH credentials CRUD operations with AES-256 encryption
- Implement database migration system for schema versioning
- Create modern UI with Zinc theme for credentials management
- Add credential viewer and editor with responsive design
- Support password and SSH key authentication methods
- Include usage tracking and folder organization
- Enhance sidebar width and improve page spacing
- Add comprehensive i18n support (EN/ZH)
- Integrate with existing SSH host management
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
ZacharyZcRandClaude