257cf60a35
* Perfect! I have successfully implemented the git review comments functionality. Let me provide a summary of what was implemented: ## ✅ Git Review Comments Implementation Complete The implementation leverages git-diff-view's built-in review functionality and integrates it seamlessly with the existing follow-up message system. ### 🔧 **Components Created:** 1. **ReviewProvider** ([`frontend/src/contexts/ReviewProvider.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/contexts/ReviewProvider.tsx)) - Manages comment state across all diff files - Handles draft comments and saved comments - Generates markdown for follow-up messages 2. **CommentWidgetLine** ([`frontend/src/components/diff/CommentWidgetLine.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/CommentWidgetLine.tsx)) - Textarea component for new comments - Auto-focus, keyboard shortcuts (Ctrl+Enter to save, Esc to cancel) - Save/Cancel buttons with validation 3. **ReviewCommentRenderer** ([`frontend/src/components/diff/ReviewCommentRenderer.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/ReviewCommentRenderer.tsx)) - Displays saved comments with delete functionality - Visual styling with comment icon and border 4. **ReviewSubmissionBar** ([`frontend/src/components/diff/ReviewSubmissionBar.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/ReviewSubmissionBar.tsx)) - Sticky bottom bar showing comment count - Submit Review and Discard buttons ### 🔄 **Enhanced Components:** 1. **DiffCard** ([`frontend/src/components/DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/DiffCard.tsx)) - Integrated git-diff-view review props - Added comment count badges - Handles click events for adding comments - Renders existing comments inline 2. **DiffTab** ([`frontend/src/components/tasks/TaskDetails/DiffTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetails/DiffTab.tsx)) - Wrapped with ReviewProvider - Integrated review submission workflow - Handles follow-up message API calls ### 🎯 **Key Features:** - **GitHub-style inline comments**: Click + button on hover to add comments - **Comment persistence**: Comments stay visible in diff until submitted - **Visual indicators**: Comment count badges on file headers - **Keyboard shortcuts**: Ctrl+Enter to save, Esc to cancel - **Markdown generation**: Comments formatted as review markdown for follow-up messages - **Batch submission**: Submit all comments at once as a single follow-up message ### 🔄 **User Workflow:** 1. User hovers over diff line → **+** button appears 2. Click **+** → Comment textarea opens with auto-focus 3. Type comment → Save with button or Ctrl+Enter 4. Comment appears inline in diff with delete option 5. Continue adding comments across multiple files 6. Submit Review button appears in sticky bottom bar 7. Click Submit Review → All comments sent as markdown follow-up message 8. Comments cleared and follow-up message appears in conversation The implementation is complete and ready for testing. The missing `@ebay/nice-modal-react` dependency is a pre-existing issue unrelated to the review functionality. * ## ✅ Function Signature Update Complete I successfully updated the `handleAddWidgetClick` function signature as requested: ### **Changes Made:** 1. **Updated function signature** in [`DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/DiffCard.tsx#L129): ```ts // Before const handleAddWidgetClick = (ctx: any) => { ... } // After const handleAddWidgetClick = (lineNumber: number, side: SplitSide) => { ... } ``` 2. **Imported correct types** from git-diff-view library: ```ts import { DiffModeEnum, DiffView, type SplitSide } from '@git-diff-view/react'; ``` 3. **Updated widget key generation** to use the new parameters: ```ts // Before const widgetKey = `${ctx.filePath}-${ctx.side}-${ctx.insertedLineNumber || ctx.deletedLineNumber}`; // After const widgetKey = `${filePath}-${side}-${lineNumber}`; ``` 4. **Used filePath from component scope** instead of context parameter: - The `filePath` is now captured from the component's scope (`newName || oldName || 'unknown'`) - This is the correct pattern as the git-diff-view library doesn't need to know about repository-specific file paths 5. **Updated renderWidgetLine** to use filePath from scope: ```ts const widgetKey = `${filePath}-${props.side}-${props.lineNumber}`; ``` ### **Key Benefits:** - **Correct API compliance**: Now matches the git-diff-view v0.0.30+ API specification - **Type safety**: Uses proper SplitSide type from the library - **Cleaner separation**: File path logic stays in the UI layer where it belongs - **No functionality lost**: All required data (filePath, side, lineNumber) is still available The implementation has been tested and builds successfully. The function signature now correctly matches `(lineNumber: number, side: SplitSide) => void` as requested. * tweaks * ## ✅ Integration Complete I have successfully integrated the review comments functionality into the existing follow-up system! Here's what was implemented: ### **Key Changes:** 1. **Moved ReviewProvider to TaskDetailsPanel** ([`TaskDetailsPanel.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetailsPanel.tsx#L21)) - Now wraps both DiffTab and TaskFollowUpSection - Ensures review comments are accessible across both components 2. **Removed ReviewSubmissionBar** from DiffTab ([`DiffTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetails/DiffTab.tsx)) - Cleaned up separate submission logic - Deleted the now-unused ReviewSubmissionBar component 3. **Enhanced TaskFollowUpSection** ([`TaskFollowUpSection.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskFollowUpSection.tsx#L28)) - Added review comments preview above the textarea - Shows comment count and formatted markdown preview - Dynamic placeholder text based on review comments presence 4. **Unified Submission Logic** - Combines review comments markdown with optional user input - Updates `canSendFollowUp` logic to allow sending with review comments alone - Clears review comments after successful submission ### **User Experience:** - **Review Comments Preview**: When review comments exist, they appear as a formatted preview above the follow-up textarea - **Optional Additional Input**: Users can add extra instructions or leave the textarea empty - **Visual Indicators**: Comment count and MessageSquare icon show when review comments are present - **Single Send Action**: One "Send" button handles both review comments and additional follow-up text - **Contextual Placeholder**: Textarea placeholder changes to indicate additional text is optional when review comments exist ### **Workflow:** 1. User adds review comments in diff files (+ button on hover) 2. Review comments appear as preview in follow-up section 3. User can optionally add additional instructions 4. Single "Send" button submits combined content 5. Both review comments and additional text sent together as one follow-up 6. Comments cleared after successful submission The integration provides a cleaner, unified experience while maintaining all the functionality of both systems. The build passes successfully and the implementation is ready for use! * styling improvements * tsc * SplitSide * turn off useless eslint warning * clear comments btn * dark mode styles * cleanup header * fmt * edit reviews * 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