76d46da5ab
* ## Implementation Complete! I've successfully implemented the dev server logs feature with the following changes: ### **Files Modified:** 1. **Created Context Files:** - [`TabNavigationContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/TabNavigationContext.tsx) - For tab switching - [`ProcessSelectionContext.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/contexts/ProcessSelectionContext.tsx) - For process pre-selection 2. **Updated [`TaskDetailsPanel.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetailsPanel.tsx):** - Added context providers - Connected process selection to ProcessesTab 3. **Updated [`CurrentAttempt.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx):** - Added FileText icon import - Added process selection hook - Added logic to find latest dev server process - Added View Logs icon button with tooltip - Added handler to jump to dev server logs 4. **Updated [`ProcessesTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-5e98-dev-server/frontend/src/components/tasks/TaskDetails/ProcessesTab.tsx):** - Added props interface for jumpProcessId - Added useEffect to handle process pre-selection - Auto-loads process details when jumping to a process ### **How It Works:** 1. **Button Visibility**: View Logs button (📄 icon) appears next to the dev server button only when a dev server process exists 2. **Smart Process Selection**: Finds the latest dev server process (running preferred, falls back to completed) 3. **Seamless Navigation**: Clicking switches to Processes tab and opens the dev server process logs automatically 4. **No Prop Drilling**: Uses React contexts to avoid passing props through multiple component layers ### **User Experience:** - When dev server is running: User sees both "Dev" and "📄" buttons - When dev server stopped but ran before: User sees "📄" button to view historical logs - Clicking "📄" instantly opens the relevant dev server process in the Processes tab with logs expanded - Tooltip shows "View dev server logs" on hover The implementation is complete, tested, and ready for use! The build passes all TypeScript checks. * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * Done! Changed the icon from FileText to ScrollText (📜). The View Logs button now uses the scroll-text icon which is more appropriate for viewing logs. * ## Refactoring Complete! ✅ The refactoring to more React-like patterns is now complete. Here's what was changed: ### **Key Improvements** 1. **Eliminated Callback Pattern**: Removed the un-React-like `onProcessJumped={() => setJumpProcessId(null)}` callback 2. **Single Source of Truth**: `selectedProcessId` now lives in `ProcessSelectionContext` instead of being split between parent and child 3. **Declarative State**: Components now simply read/write shared state instead of managing events ### **Changes Made** 1. **`ProcessSelectionContext`** → Now a full provider that: - Manages `selectedProcessId` state - Provides `setSelectedProcessId` for direct state updates - Provides `jumpToProcess` wrapper that sets state + switches tab - Uses proper React patterns with `useMemo` and `useCallback` 2. **`TaskDetailsPanel`** → Simplified: - Removed `jumpProcessId` state - Removed callback props to ProcessesTab - Uses `ProcessSelectionProvider` component - Clean provider hierarchy 3. **`ProcessesTab`** → Cleaner component: - Removed props interface entirely - Uses context state instead of local `selectedProcessId` - Auto-fetches process details via useEffect - Manual clicks and button jumps use same state path 4. **`CurrentAttempt`** → Updated API usage: - Uses `jumpToProcess(id, setActiveTab)` - More explicit about tab switching ### **Benefits Achieved** - ✅ **More React-like**: State-driven instead of event-driven - ✅ **Better separation of concerns**: Context owns selection lifecycle - ✅ **No more callbacks**: Eliminated imperative callback pattern - ✅ **Cleaner code**: Removed props drilling and state synchronization - ✅ **Easier to test**: Single state source, declarative flow - ✅ **Better performance**: Memoized context values The feature works exactly the same from the user's perspective, but the code is now much more maintainable and follows React best practices! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * ## Context Refactoring Complete! ✅ The refactoring to improve context architecture is now complete. Here's what was accomplished: ### **Final Architecture** **`TabNavContext`**: - ✅ Manages tab navigation state (`activeTab`, `setActiveTab`) - ✅ Single responsibility: UI navigation **`ProcessSelectionContext`**: - ✅ Manages process selection state (`selectedProcessId`, `setSelectedProcessId`) - ✅ **Internally consumes** `TabNavContext` via `useTabNavigation()` - ✅ Provides clean `jumpToProcess(processId)` API that handles both concerns ### **Key Improvements Achieved** 1. **Clean API**: `jumpToProcess(processId)` - no parameters needed 2. **Better Separation**: Each context owns its domain, but they coordinate properly 3. **Performance**: Minimal rerender fanout - tab changes don't rerender process consumers 4. **Developer Experience**: Simple, discoverable API 5. **Maintainability**: Easy to add more coordinated actions in the future ### **Usage Examples** ```typescript // Before (awkward) const { jumpToProcess } = useProcessSelection(); const { setActiveTab } = useTabNavigation(); jumpToProcess(processId, setActiveTab); // After (clean) const { jumpToProcess } = useProcessSelection(); jumpToProcess(processId); ``` ### **Provider Hierarchy** ```jsx <TabNavContext.Provider> <ProcessSelectionProvider> {/* ← Uses useTabNavigation internally */} <ProcessesTab /> {/* ← Gets clean jumpToProcess API */} <CurrentAttempt /> {/* ← Simple jumpToProcess(id) call */} </ProcessSelectionProvider> </TabNavContext.Provider> ``` The architecture now follows React best practices with proper context boundaries, optimal performance, and excellent developer ergonomics. The feature works identically from the user's perspective, but the code is much cleaner and more maintainable! * Cleanup script changes for task attempt 5e98f2ff-ed68-4c04-8a75-cdcfd98e2bd7 * fmt
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