c48ba45573
* Done! I've created a floating onboarding panel that: 1. **Anchors to the resize handle** - Uses `#handle-kr` (the drag handle between kanban and task panel) as an anchor point 2. **Floats to the left** - Positioned with fixed positioning, offset from the handle's right edge 3. **Tracks panel movement** - Uses MutationObserver and resize listeners to stay anchored even when the panel is resized 4. **Animates in/out** - Smooth fade and slide transitions with framer-motion 5. **Shows for all tasks** - Displays whenever `isPanelOpen` is true (desktop only) The component includes placeholder content with a welcome message, step indicators (1 of 3), and Next/Skip buttons ready for your multi-stage guide implementation. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Perfect! I've updated the onboarding component with a multi-stage system featuring 5 sections: **Features:** - **5 stages**: Follow-ups, Code Review, Git Actions, Live Previews, and VK Companion - **Video support**: Each stage displays the same video (for now) with autoplay and loop - **Navigation**: Previous/Next buttons, with "Finish" on the last stage - **Progress indicators**: Dots and "Step X of 5" counter - **Smooth transitions**: Content slides between stages using framer-motion - **Skip option**: Available on all stages Each stage has a descriptive title and two-sentence description explaining the feature. The videos automatically reload and play when switching between stages. * Increased the panel width from 384px (w-96) to 576px (w-[36rem]). The video should now be significantly larger. * Fixed! The positioning now: - Checks the panel height and viewport bounds - Keeps 20px margin from top and bottom edges - Adjusts the anchor position if the panel would overflow - Re-calculates when stage changes (since content height may vary) * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Fixed! Now the panel: - Checks if it would overflow at top or bottom when centered - Switches to top-aligned positioning when it would overflow - Calculates a safe top position that keeps the entire panel visible - Uses `translateY(0)` instead of `translateY(-50%)` when top-aligned * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Fixed! I simplified the positioning logic: - Centers the panel vertically on the handle position - No transform needed - uses absolute top positioning - Ensures 20px margins from viewport edges - Panel stays fully visible when it would overflow * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Fixed! Now it properly centers the panel on the middle of the handle by using `handleRect.top + handleRect.height / 2` as the center point, then offsetting by half the panel height. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Done! Converted to a modal with: - **2/3 screen width** centered horizontally - **Bottom aligned** with 2rem margin from bottom - **Backdrop overlay** that doesn't dismiss on click - **No ESC dismiss** (removed keyboard handler) - Smooth slide-up animation from bottom * Fixed! The issue was that framer-motion's `y` transform was overriding the Tailwind `-translate-x-1/2`. Now using inline style for `translateX(-50%)` which works alongside motion's `y` transform. * Perfect! Now the modal is horizontally centered using `left-[16.66%]` (which is 100% - 66.66% divided by 2) and `w-2/3`, which means it takes up 2/3 of the width and is centered. This won't conflict with framer-motion's transform animations for the y-axis. * Done! I've made the following changes: 1. **Removed Skip and Close buttons** - Users can just click "Next" through all stages or "Finish" on the last one 2. **Improved step count visual hierarchy:** - Moved the numeric count (1 / 5) to the top right next to the title - Made it more prominent with `font-medium` styling - Changed the dots to full-width progress bars that stretch across the bottom - Progress bars use `h-1` height and `flex-1` to distribute evenly - Cleaner, more modern progress indicator The layout now has better visual hierarchy with the count at the top and a progress bar below the description. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Fixed! I've added `aspect-video` to the video container, which reserves a 16:9 aspect ratio space before the video loads. The video now uses `h-full object-cover` to fill that space. This prevents layout shift during the entrance animation. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Perfect! I've updated the buttons to match the app's theme: 1. **Added icons**: `ChevronLeft` for Previous and `ChevronRight` for Next 2. **Removed border radius**: No `rounded` class 3. **Outline border**: Using `border border-input` for Previous and `border border-foreground` for Next 4. **Consistent sizing**: Using `h-10 px-4 py-2` matching the default button size 5. **Proper styling**: Following the button variants from the app's button component The buttons now match the visual style used throughout the rest of the application. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * ## Summary I've successfully implemented a **generic feature showcase system** following delegation-oriented development: ### ✅ Completed Components 1. **Type System** - `frontend/src/types/showcase.ts` 2. **Configuration** - `frontend/src/config/showcases.ts` (task panel showcase with 5 stages) 3. **Persistence** - `frontend/src/utils/showcasePersistence.ts` (localStorage-based) 4. **Video Progress Hook** - `frontend/src/hooks/useVideoProgress.ts` (tracks loading/buffering/playback) 5. **Media Component** - `frontend/src/components/showcase/ShowcaseStageMedia.tsx` (images/videos with loading states) 6. **Main Modal** - `frontend/src/components/showcase/FeatureShowcaseModal.tsx` (with ESC key handling) 7. **i18n Keys** - Added to `tasks.json` 8. **Integration** - Replaced TaskPanelOnboarding in project-tasks.tsx ### 🎯 Key Features - ✅ Supports images and videos with loading indicators - ✅ Video progress bar (buffered + played, like vibe-kanban-website) - ✅ ESC key properly scoped (closes modal, not task panel) - ✅ LocalStorage persistence (`showcase:<id>:v<version>:seen`) - ✅ i18n support for all content - ✅ Single-stage support (hides nav if 1 stage) - ✅ Flexible trigger location (configured per showcase) - ✅ All TypeScript and Rust checks pass ### 🧪 Ready for Browser Testing What port is your dev server running on? I'll test: 1. Opening a task triggers the showcase 2. Video loading states and progress bars 3. Stage navigation (Previous/Next/Finish) 4. ESC closes only modal, not task panel 5. Persistence (doesn't show again after Finish) * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * ## ✅ Feature Showcase System - Complete! Successfully implemented a **generic, reusable feature showcase system** following delegation-oriented development with full QA verification. ### 📦 Deliverables **Core Components:** - `FeatureShowcaseModal` - Main modal with ESC key scope management - `ShowcaseStageMedia` - Image/video renderer with loading states & progress bars - `useVideoProgress` - Hook for video buffering/playback tracking - `showcasePersistence` - LocalStorage helpers for seen tracking - Type definitions & configuration system **Integration:** - Migrated task panel onboarding to new system - Added i18n keys for all showcase content - Removed old `TaskPanelOnboarding` component ### ✨ Features ✅ **Flexible Triggers** - Can be placed anywhere (currently on task panel open) ✅ **ESC Key Handling** - Proper scope management (closes modal, not underlying feature) ✅ **Media Support** - Images and videos with loading indicators ✅ **Video Progress** - Thin progress bar showing buffered/played state ✅ **Persistence** - LocalStorage tracking with version support ✅ **i18n Ready** - Full localization support ✅ **Single/Multi-stage** - Adapts UI for 1 or multiple stages ✅ **Mobile-aware** - Only shows on desktop (width ≥ 1280px) ### 🧪 QA Results All tests passed including: - Showcase triggering on task open - Navigation between 5 stages - ESC key scope handling - Persistence across sessions - Responsive behavior - Edge case handling ### 🎯 Usage To add a new showcase: 1. Define config in `showcases.ts` 2. Add i18n keys in `tasks.json` 3. Trigger where appropriate with `hasSeen()` check 4. Render `<FeatureShowcaseModal>` with config * Done! Removed backdrop click to close functionality. Users can only close the showcase by: - Clicking "Finish" button on the last stage - Pressing ESC key * Fixed! The showcase now: - Shows on **all screen sizes** (mobile and desktop) - **Mobile**: Full width with 1rem horizontal padding - **Desktop (xl+)**: 2/3 width, centered - Bottom spacing adjusts responsively (1rem mobile, 2rem desktop) * update task text * Done! ESC is now captured but does nothing. Users must click through the stages or use "Finish" to close the showcase. * update task text * i18n (vibe-kanban 7f62c07e) run scripts/check-i18n.sh and resolve any discrepancies by translating missing values. * Done! All changes complete: ✅ **Mobile support** - Removed mobile check, now shows on all devices with responsive width ✅ **Component docs** - Added JSDoc to both FeatureShowcaseModal and ShowcaseStageMedia ✅ **Progress bar** - Increased height from 2px to 4px for better visibility ✅ **Developer guide** - Created comprehensive README.md in `components/showcase/` The showcase now works across all screen sizes and has full documentation for future development. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * Fixed! Removed the incorrect ESC test from the checklist. The showcase can only be closed by clicking "Finish" on the last stage (ESC is captured but disabled). * Fixed! Removed that line and also corrected "after closing" to "after finishing" to be accurate. * Fixed! Now all button labels use i18n keys: - `showcases.buttons.previous` - `showcases.buttons.next` - `showcases.buttons.finish` * Perfect! All review comments addressed: ## ✅ Changes Complete 1. **Scope handling documentation** - Added detailed comment explaining why we enable/disable scopes 2. **Created `useShowcaseTrigger` hook** - Extracted and simplified the trigger logic 3. **Refactored project-tasks.tsx** - Now uses the hook (much cleaner) 4. **Updated README** - Reflects the new hook-based usage pattern The code is now more robust and maintainable. All TypeScript and Rust checks pass. The showcase system is ready to be easily reused across any feature in the app. * Cleanup script changes for task attempt 5c2c52b0-90de-4f9a-98a2-cade3e471c4f * video showcase bug (vibe-kanban 383590da) CHANGED FILES: frontend/src/components/showcase/FeatureShowcaseModal.tsx frontend/src/components/showcase/README.md frontend/src/components/showcase/ShowcaseStageMedia.tsx frontend/src/config/showcases.ts frontend/src/hooks/useShowcaseTrigger.ts frontend/src/hooks/useVideoProgress.ts frontend/src/i18n/locales/en/tasks.json frontend/src/i18n/locales/es/tasks.json frontend/src/i18n/locales/ja/tasks.json frontend/src/i18n/locales/ko/tasks.json frontend/src/pages/project-tasks.tsx frontend/src/types/showcase.ts frontend/src/utils/showcasePersistence.ts The showcase is sometimes being shown more than once. Users press the finish button, the showcase closes, then they click on another task and it opens again. Use the oracle to extensively diagnose this issue then resolve it. * showcase improvement 2 (vibe-kanban 3e5a7c01) frontend/src/components/showcase/FeatureShowcaseModal.tsx frontend/src/components/showcase/README.md frontend/src/components/showcase/ShowcaseStageMedia.tsx frontend/src/config/showcases.ts frontend/src/hooks/useShowcaseTrigger.ts frontend/src/hooks/useVideoProgress.ts frontend/src/i18n/locales/en/tasks.json frontend/src/i18n/locales/es/tasks.json frontend/src/i18n/locales/ja/tasks.json frontend/src/i18n/locales/ko/tasks.json frontend/src/pages/project-tasks.tsx frontend/src/types/showcase.ts frontend/src/utils/showcasePersistence.ts Do we need semantic versioning? We can just use a single number right (1, 2, ...). We aren't ever parsing the sem var and doing comparisons right? Or am i mistaken? * showcase improvement 1 (vibe-kanban be7d377b) see the first useEffect in FeatureShowcaseModal Isn't this too specific to the scopes featured in the task panel? If we want to show this showcase elsewhere, it might change. * remove unused clearSeen() function * feature showcase | no auto replay (vibe-kanban 2e945b1f) frontend/src/components/showcase/FeatureShowcaseModal.tsx frontend/src/components/showcase/ShowcaseStageMedia.tsx frontend/src/config/showcases.ts frontend/src/hooks/useShowcaseTrigger.ts frontend/src/hooks/useVideoProgress.ts frontend/src/pages/project-tasks.tsx frontend/src/types/showcase.ts frontend/src/utils/showcasePersistence.ts Each video should only play once, then once finished, a replay button should appear in the center. * updated videos * feature showcase | prevent cut off (vibe-kanban 79364905) frontend/src/components/showcase/FeatureShowcaseModal.tsx frontend/src/components/showcase/ShowcaseStageMedia.tsx frontend/src/config/showcases.ts frontend/src/hooks/useShowcaseTrigger.ts frontend/src/pages/project-tasks.tsx frontend/src/types/showcase.ts frontend/src/utils/showcasePersistence.ts On some displays, the showcase pop up height is too large. Use the oracle to hypothesize various solutions to this then implement the most promising one. * update showcase videos * remove showcase readme
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