feature showcase (vibe-kanban) (#1042)

* 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

frontend/src/i18n/locales/ja/tasks.json

@@ -240,5 +240,30 @@
   },
   "viewProcessesDialog": {
     "title": "Execution processes"
+  },
+  "showcases": {
+    "taskPanel": {
+      "companion": {
+        "title": "Vibe Kanban Companion ポイント＆クリック",
+        "description": "プレビューウィンドウ内の任意のUIコンポーネントをクリックして正確に選択できます。コーディングエージェントは正確なDOMセレクタとコンポーネント階層を受け取り、曖昧なフィードバックを排除します。"
+      },
+      "installation": {
+        "title": "開発サーバーとCompanionのインストール",
+        "description": "プレビュー用に開発サーバーコマンドを設定します。設定でセットアップスクリプトを構成できます。コーディングエージェントを使用してVibe Kanban Webコンパニオンを自動的にインストールします。"
+      },
+      "codeReview": {
+        "title": "組み込みコードレビュー",
+        "description": "プラスアイコンを使用して、差分ビューに直接行固有のコメントを追加します。すべてのフィードバックが収集され、完全なレビューとしてコーディングエージェントに送信されます。"
+      },
+      "pullRequest": {
+        "title": "タスクからPRを作成",
+        "description": "タスク試行から直接変更をマージしたり、プルリクエストを作成できます。PRダイアログはタスク詳細からタイトルと説明を事前入力し、ワークフローを効率化します。"
+      }
+    },
+    "buttons": {
+      "previous": "前へ",
+      "next": "次へ",
+      "finish": "完了"
+    }
   }
 }