c8e660c7da
* ✅ Discord shield added to navbar with: - **Desktop badge**: Discord shield visible on sm+ screens, positioned before the dropdown menu - **Mobile fallback**: Discord link added to dropdown menu for small screens - **Consistent styling**: Uses `h-5` height and proper spacing (`ml-2 mr-1`) - **Accessibility**: Includes proper `aria-label` and `alt` text The implementation follows the existing code patterns and maintains readability as requested. * ✅ Fixed both issues: - **Vertical centering**: Changed from `block` to `flex items-center` to properly align with other navbar buttons - **Theme adaptation**: Added `dark:brightness-90 dark:contrast-125` to subtly adjust the shield colors in dark mode for better visibility The Discord shield now properly aligns with other navbar elements and adapts to both light and dark themes. * ✅ Updated Discord shield with theme colors and positioning: - **Theme colors**: Custom badge using `bg-background`, `text-foreground` for left side and `bg-success`, `text-success-foreground` for right side - **Position**: Moved to right of logo (left side of navbar) instead of right side - **Design**: Clean two-part badge with "discord" label and "online" status that adapts to theme automatically The Discord badge now uses your app's theme colors and is positioned next to the logo for better visual hierarchy. * ✅ Discord online count implemented with: - **Live data**: Fetches real member count from Discord Widget API - **Auto-refresh**: Updates every 60 seconds for live feel - **Graceful fallback**: Shows "online" if API unavailable - **Theme integration**: Maintains your custom success/background colors - **Accessibility**: Includes `aria-live="polite"` for screen readers - **Formatted display**: Shows count as "1,234 online" with proper locale formatting The Discord badge now displays the actual number of online members from your server while maintaining the theme colors and positioning next to the logo. * Cleanup script changes for task attempt 230fa5cc-96f7-4fdb-a549-c2ea46b9e88e * ✅ Fixed positioning - Added `flex items-center` to the container so the logo and Discord badge sit side by side horizontally instead of stacking vertically. * ✅ Added Discord logo from simple-icons: - **Added simple-icons dependency** via pnpm - **Imported Discord icon** from `simple-icons` package - **Replaced "discord" text** with actual Discord SVG logo - **Maintained theme colors** - icon uses `currentColor` so it adapts to theme automatically - **Proper sizing** - `h-4 w-4` matches other navbar icons The Discord badge now displays the official Discord logo instead of text, while maintaining the live member count and theme integration. * Cleanup script changes for task attempt 230fa5cc-96f7-4fdb-a549-c2ea46b9e88e * manual style improvement
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
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 |
|---|---|---|---|
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