5e7742da2a
* Excellent! All done! Let me create a summary: ## ✅ Batch B Complete: All React Hooks Exhaustive-Deps Warnings Fixed Successfully fixed **all 22 exhaustive-deps warnings** across the codebase. The changes improved code correctness and stability. ### Files Fixed (15 total): 1. **useProjectTasks.ts** - Wrapped logical expressions in useMemo 2. **useConversationHistory.ts** - Wrapped functions in useCallback, added missing deps 3. **useShowcasePersistence.ts** - Wrapped logical expression in useMemo 4. **auto-expanding-textarea.tsx** - Added missing deps, destructured props 5. **App.tsx** - Added missing updateAndSaveConfig dep 6. **EditDiffRenderer.tsx** - Removed unnecessary path dep 7. **PreviewPanel.tsx** - Fixed latestDevServerProcess dependency 8. **project-form-fields.tsx** - Wrapped loadRecentRepos in useCallback 9. **project-list.tsx** - Wrapped fetchProjects in useCallback 10. **ImageUploadSection.tsx** - Added isExpanded dep 11. **file-search-textarea.tsx** - Added textareaRef dep 12. **useJsonPatchWsStream.ts** - Fixed options dependency 13. **useSemanticKey.ts** - Removed unnecessary action dep 14. **McpSettings.tsx** - Added profiles dep 15. **project-tasks.tsx** - Moved navigateWithSearch before usage ### Key Changes: - Added `useCallback` where functions are used in dependency arrays - Added `useMemo` to stabilize object/array references - Fixed function declaration order to avoid hoisting issues - One ESLint disable for circular dependency case (documented) ### Verification: - ✅ **0 exhaustive-deps warnings** (down from 22) - ✅ **Type check passes** (`pnpm run check`) - ✅ **All changes follow style guide** (simplest, most readable) * Cleanup script changes for task attempt 0564411a-2cf4-488a-a082-d0f7ebcfc101 * Perfect! All fixed. Let me create a summary: ## ✅ Fixed Infinite Re-render Issue in useJsonPatchWsStream ### Root Cause The `options` object had a new identity on every render (from default `= {}`), causing the useEffect to restart infinitely and trigger continuous re-renders. ### Changes Applied **useJsonPatchWsStream.ts:** 1. ✅ Removed default parameter: `options?: UseJsonPatchStreamOptions<T>` (no more `= {}`) 2. ✅ Destructured options at the top: ```typescript const injectInitialEntry = options?.injectInitialEntry; const deduplicatePatches = options?.deduplicatePatches; ``` 3. ✅ Updated all usages to use destructured variables 4. ✅ Fixed dependency array: ```typescript }, [endpoint, enabled, initialData, injectInitialEntry, deduplicatePatches, retryNonce]); ``` **useConversationHistory.ts:** - Added comment explaining why `emitEntries` is omitted from deps (it's stable) ### Verification - ✅ **Type check passes** (`pnpm run check`) - ✅ **0 exhaustive-deps warnings** - ✅ **No infinite re-renders** (destructured variables have stable identities) ### Why This Works - Destructured variables (`injectInitialEntry`, `deduplicatePatches`) maintain stable identities across renders (undefined stays undefined) - Only changes when callbacks are actually different, not on every render - More explicit and readable - shows exactly what triggers reconnection * Cleanup script changes for task attempt 0564411a-2cf4-488a-a082-d0f7ebcfc101 * Perfect! Let me create a final summary of all the work done: ## ✅ Complete: Removed eslint-disable Tech Debt ### What Was Done Refactored `useConversationHistory.ts` to eliminate the eslint-disable by reordering function definitions so dependencies are declared before use. ### Changes **Reordered functions in useConversationHistory.ts:** ``` Old order: loadRunningAndEmit → emitEntries (hoisting error) New order: 1. patchWithKey (helper) 2. flattenEntries (helper) 3. getActiveAgentProcess (helper) 4. flattenEntriesForEmit (useCallback) 5. emitEntries (useCallback, depends on flattenEntriesForEmit) ✅ 6. loadRunningAndEmit (useCallback, depends on emitEntries) ✅ 7. loadRunningAndEmitWithBackoff (depends on loadRunningAndEmit) ``` **Updated dependency array:** - `loadRunningAndEmit`: Now properly includes `[emitEntries]` - Removed eslint-disable comment ### Final Results - ✅ **0 exhaustive-deps warnings** (down from 22) - ✅ **TypeScript check passes** - ✅ **No eslint-disable tech debt** - ✅ **No infinite re-renders** - ✅ **More readable** (dependencies declared before use) All React Hooks warnings properly fixed with clean, maintainable code! * Cleanup script changes for task attempt 0564411a-2cf4-488a-a082-d0f7ebcfc101
Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...
We're hiring!
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
- Open projects remotely via SSH when running Vibe Kanban on a remote server
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
We use GitHub Discussions for feature requests. Please open a discussion to create a feature request. For bugs please open an issue on this repo.
Contributing
We would prefer that ideas and changes are first raised with the core team via GitHub Discussions or Discord, 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 backend. A blank DB will be copied from the dev_assets_seed folder.
Building the frontend
To build just the frontend:
cd frontend
pnpm build
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 |
|---|---|---|---|
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.
Remote Deployment
When running Vibe Kanban on a remote server (e.g., via systemctl, Docker, or cloud hosting), you can configure your editor to open projects via SSH:
- Access via tunnel: Use Cloudflare Tunnel, ngrok, or similar to expose the web UI
- Configure remote SSH in Settings → Editor Integration:
- Set Remote SSH Host to your server hostname or IP
- Set Remote SSH User to your SSH username (optional)
- Prerequisites:
- SSH access from your local machine to the remote server
- SSH keys configured (passwordless authentication)
- VSCode Remote-SSH extension
When configured, the "Open in VSCode" buttons will generate URLs like vscode://vscode-remote/ssh-remote+user@host/path that open your local editor and connect to the remote server.
See the documentation for detailed setup instructions.