766985541f
* Revert "Perfect! I've successfully implemented the fix for the agent settings flickering issue. Here's a summary of what was accomplished: (#696)"
This reverts commit 1fd5a9501b.
* ## ✅ **Regression Fix Complete!**
**Summary of changes made:**
### 🎯 **Performance Issues Fixed:**
1. **Eliminated infinite useEffect loop** - Removed `serverParsedProfiles` from dependencies and moved JSON parsing inside the effect
2. **Removed problematic cleanup effect** - Deleted the `useEffect(() => { return () => { reloadSystem(); }; }, []);` that was causing 201+ requests per second
3. **Stabilized React dependencies** - Only primitive values (`serverProfilesContent`, `isDirty`) in dependency arrays
### 🔧 **Functionality Preserved:**
1. **Individual save buttons work** - `handleExecutorConfigSave` function retained with `onSave` prop
2. **Proper system reloading** - Added `reloadSystem()` calls after successful saves (where they belong)
3. **All existing features intact** - Form editor, JSON editor, configuration management all work as before
### 📊 **Expected Impact:**
- **Before**: 201+ requests/second, flickering UI, poor performance, broken individual saves
- **After**: 1 clean request, smooth loading, working individual saves, proper functionality
### ✅ **Quality Checks:**
- **Rust linting**: ✅ Passed (cargo clippy)
- **Code formatting**: ✅ Applied (prettier)
- **Frontend linting**: ✅ 0 errors, 99 warnings (acceptable)
The agent settings page should now perform optimally with no flickering or infinite request loops, while preserving all the button functionality that was broken in the original PR #696.
* ## ✅ **Duplicate Save Buttons Fix Complete!**
**Summary of what was accomplished:**
### 🔧 **Fix Applied:**
- **Conditionally hide global save button** in form editor mode
- Added `{!useFormEditor &&` wrapper around sticky save bar
- Updated comment to clarify "Save button for JSON editor mode only"
### 📊 **Expected Behavior:**
- **Form Editor Mode**: Only individual "Save Configuration" buttons (one per config form)
- **JSON Editor Mode**: Only global "Save Agent Configurations" button
- **Clear UX**: No more confusion about which save button to use
### ✅ **Quality Checks Passed:**
- **Rust linting**: ✅ Passed (cargo clippy)
- **Code formatting**: ✅ Applied (prettier - all files unchanged, properly formatted)
- **Frontend linting**: ✅ 0 errors, 99 warnings (acceptable per your requirements)
### 🎯 **User Experience Improvement:**
- **Eliminated confusion** - users now see only one save method per editor mode
- **Intuitive workflow** - form editing uses granular saves, JSON editing uses bulk saves
- **Preserved functionality** - all save capabilities retained, just organized better
- **Matches original intent** - comment already indicated this should be JSON editor only
The agent settings page now has clean, contextual save functionality based on which editor mode you're using!
* ## ✅ **Critical User Feedback Issues Fixed!**
**Summary of accomplishments:**
### 🔧 **Issue 1: Missing reloadSystem() Regression (FIXED)**
- **✅ Added missing `reloadSystem()` call** in `handleDeleteConfiguration()` function (line 225)
- **✅ Restored global system consistency** - deleted configurations now immediately disappear from all screens
- **✅ Matches other save functions** - consistent behavior across all save operations
### 🔧 **Issue 2: Missing Error Messages (FIXED)**
- **✅ Added error state management**: `const [profilesError, setProfilesError] = useState<string | null>(null);`
- **✅ Added red error alert UI** component (lines 375-379) that matches the green success alert style
- **✅ Updated all save functions** to show user-friendly error messages:
- `handleSaveProfiles()`: "Failed to save agent configurations. Please try again."
- `handleExecutorConfigSave()`: "Failed to save configuration. Please try again."
- `handleDeleteConfiguration()`: "Failed to delete configuration. Please try again."
- **✅ Clear errors before new attempts** - `setProfilesError(null)` in all save functions
### 📊 **User Experience Improvements**
**Before:**
- ❌ Delete configs still showed in other screens until random reload
- ❌ Save failures showed no user feedback (only console.error)
- ❌ Users confused when saves failed silently
**After:**
- ✅ **Immediate global consistency** - changes appear everywhere instantly
- ✅ **Clear error feedback** - red alerts show exactly what went wrong
- ✅ **Professional UX** - users always know the status of their actions
### ✅ **Quality Checks Passed**
- **Rust linting**: ✅ Passed (cargo clippy)
- **Code formatting**: ✅ Applied (prettier formatted AgentSettings.tsx)
- **Frontend linting**: ✅ 0 errors, 99 warnings (acceptable)
The agent settings now provide complete, professional user feedback for all operations - users will always know whether their saves/deletes succeeded or failed, and all changes are immediately reflected across the entire application!
* Perfect! Everything is working correctly now:
## ✅ **TypeScript Errors Fixed Successfully!**
### 🔧 **Issues Resolved:**
1. **✅ Variable redeclaration error**:
- **Problem**: `profilesError` was declared twice (line 35 from hook, line 44 as state)
- **Fix**: Renamed the state variable to `saveError` to avoid conflict
2. **✅ TypeScript type errors**:
- All type compatibility issues resolved by fixing the variable naming conflict
### 📊 **Final Status Check:**
- **✅ TypeScript compilation**: 0 errors (passed `npx tsc --noEmit`)
- **✅ Rust linting**: 0 warnings, 0 errors (cargo clippy passed)
- **✅ Code formatting**: Applied successfully (prettier formatted AgentSettings.tsx)
- **✅ Frontend linting**: 0 errors, 99 warnings (acceptable per requirements)
### 🎯 **What the Error State Does Now:**
- **`profilesError`**: From `useProfiles()` hook - handles server/network errors
- **`saveError`**: Our new state - handles save operation errors with user-friendly messages
Both error states are displayed properly:
- Server errors appear in the first error alert
- Save operation errors appear in the second error alert (red destructive alert)
The agent settings page now has complete error handling with proper TypeScript types and no compilation errors! 🎉
Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...
Overview
AI coding agents are increasingly writing the world's code and human engineers now spend the majority of their time planning, reviewing, and orchestrating tasks. Vibe Kanban streamlines this process, enabling you to:
- Easily switch between different coding agents
- Orchestrate the execution of multiple coding agents in parallel or in sequence
- Quickly review work and start dev servers
- Track the status of tasks that your coding agents are working on
- Centralise configuration of coding agent MCP configs
You can watch a video overview here.
Installation
Make sure you have authenticated with your favourite coding agent. A full list of supported coding agents can be found in the docs. Then in your terminal run:
npx vibe-kanban
Documentation
Please head to the website for the latest documentation and user guides.
Support
Please open an issue on this repo if you find any bugs or have any feature requests.
Contributing
We would prefer that ideas and changes are raised with the core team via GitHub issues, where we can discuss implementation details and alignment with the existing roadmap. Please do not open PRs without first discussing your proposal with the team.
Development
Prerequisites
Additional development tools:
cargo install cargo-watch
cargo install sqlx-cli
Install dependencies:
pnpm i
Running the dev server
pnpm run dev
This will start the frontend and backend with live reloading. A blank DB will be copied from the dev_assets_seed folder.
Build from source
- Run
build-npm-package.sh - In the
npx-clifolder runnpm pack - You can run your build with
npx [GENERATED FILE].tgz
Environment Variables
The following environment variables can be configured at build time or runtime:
| Variable | Type | Default | Description |
|---|---|---|---|
GITHUB_CLIENT_ID |
Build-time | Ov23li9bxz3kKfPOIsGm |
GitHub OAuth app client ID for authentication |
POSTHOG_API_KEY |
Build-time | Empty | PostHog analytics API key (disables analytics if empty) |
POSTHOG_API_ENDPOINT |
Build-time | Empty | PostHog analytics endpoint (disables analytics if empty) |
BACKEND_PORT |
Runtime | 0 (auto-assign) |
Backend server port |
FRONTEND_PORT |
Runtime | 3000 |
Frontend development server port |
HOST |
Runtime | 127.0.0.1 |
Backend server host |
DISABLE_WORKTREE_ORPHAN_CLEANUP |
Runtime | Not set | Disable git worktree cleanup (for debugging) |
Build-time variables must be set when running pnpm run build. Runtime variables are read when the application starts.
Custom GitHub OAuth App (Optional)
By default, Vibe Kanban uses Bloop AI's GitHub OAuth app for authentication. To use your own GitHub app for self-hosting or custom branding:
- Create a GitHub OAuth App at GitHub Developer Settings
- Enable "Device Flow" in the app settings
- Set scopes to include
user:email,repo - Build with your client ID:
GITHUB_CLIENT_ID=your_client_id_here pnpm run build