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
270 lines
8.8 KiB
JSON
270 lines
8.8 KiB
JSON
{
|
|
"loading": "Loading tasks...",
|
|
"empty": {
|
|
"noTasks": "No tasks found for this project.",
|
|
"createFirst": "Create First Task",
|
|
"noSearchResults": "No tasks match your search."
|
|
},
|
|
"actions": {
|
|
"addTask": "Add task"
|
|
},
|
|
"rebase": {
|
|
"common": {
|
|
"action": "Rebase",
|
|
"inProgress": "Rebasing...",
|
|
"withTarget": "Rebase onto {{branch}}"
|
|
},
|
|
"dialog": {
|
|
"title": "Rebase Task Attempt",
|
|
"description": "Choose a new base branch to rebase this task attempt onto.",
|
|
"upstreamLabel": "Upstream Branch",
|
|
"upstreamPlaceholder": "Select an upstream branch",
|
|
"targetLabel": "Target Branch",
|
|
"targetPlaceholder": "Select a target branch",
|
|
"advanced": "Advanced"
|
|
},
|
|
"status": {
|
|
"inProgress": "Rebase in progress{{counts}}",
|
|
"needed": "Rebase needed{{dirty}}{{counts}}",
|
|
"dirtyMarker": " (dirty)"
|
|
}
|
|
},
|
|
"branches": {
|
|
"changeTarget": {
|
|
"dialog": {
|
|
"title": "Change target branch",
|
|
"description": "Choose a new target branch for the task attempt.",
|
|
"placeholder": "Select a target branch",
|
|
"action": "Change Branch",
|
|
"inProgress": "Changing..."
|
|
}
|
|
}
|
|
},
|
|
"preview": {
|
|
"title": "Preview",
|
|
"selectAttempt": "Select an attempt to see preview",
|
|
"troubleAlert": {
|
|
"title": "We're having trouble previewing your application:",
|
|
"item1": "Did the dev server start successfully? There may be a bug you need to resolve, or perhaps dependencies need to be installed.",
|
|
"item2": "Did your dev server print the URL and port to the terminal in the format",
|
|
"item2Suffix": "? (this is how we know it's running)",
|
|
"item3": "Have you installed the Web Companion (required for click-to-edit)? If not, please",
|
|
"item3Link": "follow the installation instructions here"
|
|
},
|
|
"noServer": {
|
|
"title": "No dev server running",
|
|
"startPrompt": "Please start a dev server to see the preview",
|
|
"setupPrompt": "To use the live preview and click-to-edit, please add a dev server script to this project.",
|
|
"companionPrompt": "For click-to-edit functionality, add the browser companion to your project.",
|
|
"companionLink": "View installation guide",
|
|
"startButton": "Start Dev Server",
|
|
"editButton": "Edit Dev Script",
|
|
"stopAndEditButton": "Stop Dev Server & Resolve Issues"
|
|
},
|
|
"devScript": {
|
|
"saveAndStart": "Save & Start",
|
|
"saveOnly": "Save Only",
|
|
"saveChanges": "Save Changes",
|
|
"cancel": "Cancel",
|
|
"errors": {
|
|
"notLoaded": "Project not loaded",
|
|
"empty": "Dev script cannot be empty"
|
|
}
|
|
},
|
|
"logs": {
|
|
"title": "Dev Server Logs",
|
|
"hide": "Hide",
|
|
"show": "Show"
|
|
},
|
|
"iframe": {
|
|
"title": "Dev server preview"
|
|
},
|
|
"toolbar": {
|
|
"refresh": "Refresh preview",
|
|
"copyUrl": "Copy URL",
|
|
"openInTab": "Open in new tab",
|
|
"stopDevServer": "Stop dev server"
|
|
}
|
|
},
|
|
"diff": {
|
|
"viewModes": {
|
|
"inline": "Inline view",
|
|
"split": "Split view"
|
|
},
|
|
"errorLoadingDiff": "Failed to load diff: {{error}}",
|
|
"expandAll": "Expand all diffs",
|
|
"collapseAll": "Collapse all diffs",
|
|
"filesChanged_one": "{{count}} file changed",
|
|
"filesChanged_other": "{{count}} files changed",
|
|
"noChanges": "No changes have been made yet"
|
|
},
|
|
"taskPanel": {
|
|
"noTaskSelected": "No task selected",
|
|
"loadingAttempts": "Loading attempts...",
|
|
"errorLoadingAttempts": "Failed to load attempts",
|
|
"attemptsCount": "Attempts ({{count}})",
|
|
"noAttempts": "No attempts yet"
|
|
},
|
|
"processes": {
|
|
"selectAttempt": "Select an attempt to view execution processes.",
|
|
"errorLoadingUpdates": "Failed to load live updates for processes.",
|
|
"reconnecting": "Reconnecting...",
|
|
"loading": "Loading execution processes...",
|
|
"noProcesses": "No execution processes found for this attempt.",
|
|
"processId": "Process ID: {{id}}",
|
|
"deleted": "Deleted",
|
|
"deletedTooltip": "Deleted by restore: timeline was restored to a checkpoint and later executions were removed",
|
|
"agent": "Agent:",
|
|
"exit": "Exit: {{code}}",
|
|
"started": "Started: {{date}}",
|
|
"completed": "Completed: {{date}}",
|
|
"detailsTitle": "Process Details",
|
|
"backToList": "Back to list",
|
|
"loadingDetails": "Loading process details...",
|
|
"errorLoadingDetails": "Failed to load process details. Please try again."
|
|
},
|
|
"taskHeader": {
|
|
"editTask": "Edit task",
|
|
"deleteTask": "Delete task",
|
|
"closePanel": "Close panel"
|
|
},
|
|
"toolbar": {
|
|
"actions": "Actions",
|
|
"noAttempts": "No attempts yet",
|
|
"startFirstAttempt": "Start your first attempt to begin working on this task",
|
|
"startAttempt": "Start Attempt"
|
|
},
|
|
"followUp": {
|
|
"stop": "Stop",
|
|
"clearReviewComments": "Clear Review Comments",
|
|
"resolveConflicts": "Resolve conflicts",
|
|
"send": "Send",
|
|
"unqueuing": "Unqueuing…",
|
|
"edit": "Edit",
|
|
"queuing": "Queuing…",
|
|
"queueForNextTurn": "Queue for next turn"
|
|
},
|
|
"todos": {
|
|
"title_one": "Todos ({{count}})",
|
|
"title_other": "Todos ({{count}})"
|
|
},
|
|
"attempt": {
|
|
"actions": {
|
|
"openInIde": "Open in IDE",
|
|
"openMenu": "Open menu",
|
|
"startDevServer": "Start dev server",
|
|
"stopDevServer": "Stop dev server"
|
|
},
|
|
"labels": {
|
|
"attempt": "Attempt",
|
|
"agent": "Agent",
|
|
"branch": "Branch",
|
|
"diffs": "Diffs"
|
|
},
|
|
"agent": "Agent",
|
|
"path": "Path",
|
|
"openInEditor": "Open in {{editor}}",
|
|
"copied": "Copied!",
|
|
"clickToCopy": "Click to copy worktree path",
|
|
"stopDev": "Stop Dev",
|
|
"startDev": "Start Dev",
|
|
"viewDevLogs": "View dev server logs",
|
|
"stopping": "Stopping...",
|
|
"stopAttempt": "Stop Attempt",
|
|
"newAttempt": "New Attempt",
|
|
"viewHistory": "View attempt history",
|
|
"createSubtask": "Create Subtask",
|
|
"preview": "Preview",
|
|
"diffs": "Diffs"
|
|
},
|
|
"git": {
|
|
"labels": {
|
|
"taskBranch": "Task Branch"
|
|
},
|
|
"branch": {
|
|
"current": "current"
|
|
},
|
|
"status": {
|
|
"commits_one": "commit",
|
|
"commits_other": "commits",
|
|
"conflicts": "Conflicts",
|
|
"upToDate": "Up to date",
|
|
"ahead": "ahead",
|
|
"behind": "behind"
|
|
},
|
|
"states": {
|
|
"merged": "Merged!",
|
|
"merging": "Merging...",
|
|
"merge": "Merge",
|
|
"rebasing": "Rebasing...",
|
|
"rebase": "Rebase",
|
|
"pushed": "Pushed!",
|
|
"pushing": "Pushing...",
|
|
"push": "Push",
|
|
"creating": "Creating...",
|
|
"createPr": "Create PR"
|
|
},
|
|
"errors": {
|
|
"changeTargetBranch": "Failed to change target branch",
|
|
"pushChanges": "Failed to push changes",
|
|
"mergeChanges": "Failed to merge changes",
|
|
"rebaseBranch": "Failed to rebase branch"
|
|
},
|
|
"pr": {
|
|
"open": "Open PR #{{number}}",
|
|
"number": "PR #{{number}}"
|
|
}
|
|
},
|
|
"createAttemptDialog": {
|
|
"title": "Create Attempt",
|
|
"description": "Start a new attempt with a coding agent. A git worktree and task branch will be created.",
|
|
"baseBranch": "Base branch",
|
|
"loadingBranches": "Loading branches...",
|
|
"selectBranch": "Select branch",
|
|
"error": "Failed to create attempt. Please try again.",
|
|
"creating": "Creating...",
|
|
"start": "Start"
|
|
},
|
|
"viewProcessesDialog": {
|
|
"title": "Execution processes"
|
|
},
|
|
"attemptHeaderActions": {
|
|
"preview": "Preview",
|
|
"diffs": "Diffs"
|
|
},
|
|
"actionsMenu": {
|
|
"attempt": "Attempt",
|
|
"openInIde": "Open attempt in IDE",
|
|
"viewProcesses": "View processes",
|
|
"createNewAttempt": "Create new attempt",
|
|
"createSubtask": "Create subtask",
|
|
"task": "Task",
|
|
"duplicate": "Duplicate"
|
|
},
|
|
"showcases": {
|
|
"taskPanel": {
|
|
"companion": {
|
|
"title": "Vibe Kanban Companion Point-and-Click",
|
|
"description": "Click any UI component in the preview window to select it precisely. The coding agent receives exact DOM selectors and component hierarchy, eliminating ambiguous feedback."
|
|
},
|
|
"installation": {
|
|
"title": "Dev Server & Companion Installation",
|
|
"description": "Set a dev server command for previews, with a setup script configurable in settings. Use a coding agent to automatically install the Vibe Kanban web companion."
|
|
},
|
|
"codeReview": {
|
|
"title": "Built-in Code Review",
|
|
"description": "Add line-specific comments directly in the diffs view with the plus icon. All feedback is collected and sent as a complete review to the coding agent."
|
|
},
|
|
"pullRequest": {
|
|
"title": "Create PR from Task",
|
|
"description": "Merge your changes or create pull requests directly from task attempts. The PR dialog pre-fills title and description from your task details for streamlined workflows."
|
|
}
|
|
},
|
|
"buttons": {
|
|
"previous": "Previous",
|
|
"next": "Next",
|
|
"finish": "Finish"
|
|
}
|
|
}
|
|
}
|