e99f9807fb
* Perfect! The collapse functionality has been successfully implemented. Here's what was added:
## Summary of Changes
**DiffCard.tsx:**
- Added `isCollapsed` and `onToggle` props
- Made the header clickable with hover effects
- Added a rotating chevron icon to indicate collapse state
- Only renders `DiffView` when not collapsed (performance optimization)
- Added accessibility attributes and keyboard support
- Prevented event bubbling on the "Open in IDE" button
**DiffTab.tsx:**
- Added `Set<string>` state to track collapsed files using stable file path identifiers
- Added toggle logic with proper React state management
- Added a sticky "Collapse All" / "Expand All" button with tri-state logic
- Connected collapse state to each DiffCard
The implementation follows all the Oracle's recommendations:
- Uses `Set<string>` with stable identifiers (file paths)
- Keeps state centralized in DiffTab
- Only renders DiffView when expanded for better performance
- Provides accessible clickable headers with proper ARIA attributes
- Includes keyboard support for toggling
The type checking and build process completed successfully with no errors related to our changes.
* Cleanup script changes for task attempt 9592ba9e-ff81-483b-b0f4-14bdf6461e24
* Done! The Collapse All button is now using the "xs" size.
* Perfect! The high-level stats display has been successfully implemented. Here's what was added:
## Summary of Changes
**Enhanced the sticky header to show:**
- **Files changed**: Shows count with proper singular/plural handling ("1 file" vs "3 files")
- **Total additions**: Green `+45` style matching existing DiffCard styling
- **Total deletions**: Red `-12` style matching existing DiffCard styling
- **Collapse All button**: Positioned on the right with proper spacing
**Key Features:**
- **Efficient calculation**: Extended existing `useMemo` to calculate both files and totals in a single pass
- **Proper edge case handling**: Handles undefined `additionLength`/`deletionLength` values
- **Consistent styling**: Uses same CSS variables as individual file stats (`--console-success`, `--console-error`)
- **Responsive layout**: Flexbox with proper gap and shrink controls
- **Accessibility**: Added `aria-live="polite"` for screen reader updates
- **Performance**: Only recalculates when diffs change, not on every render
The implementation follows all Oracle recommendations and maintains consistency with the existing codebase design patterns. The type checking passed successfully with no errors.
* Cleanup script changes for task attempt 9592ba9e-ff81-483b-b0f4-14bdf6461e24
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