Add close button to preview warning banner (vibe-kanban) #1013
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I've successfully fixed the issue where the red preview warning banner was blocking the preview even when a working output on a port was discovered. ### Root Cause The issue was in `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx:108-118`. The component had two separate "ready" states: 1. **`previewState.status === 'ready'`** - Set when a URL is detected in dev server logs (preview working) 2. **`isReady`** - Set when the web companion sends a 'ready' postMessage (optional, only for click-to-component) The warning banner was showing whenever `!isReady` was true after 5 seconds, even if the preview was fully functional with a discovered URL. ### Solution I added a check for `previewState.status !== 'ready'` to the warning condition at line 112. Now the warning banner only shows when: - 5 seconds have elapsed - No web companion ready message received - **AND no URL was discovered** (preview actually broken) - Dev server is running ### Result The red warning banner will no longer appear when the preview is working correctly (URL discovered and iframe loaded), even if the web companion is not installed. It will only show when there's an actual problem with the preview not loading. **File changed:** `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx:112,123`
I've successfully implemented a simple solution that shows two different types of warnings based on the actual state of the preview: ### Changes Made **1. Modified `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx`:** - Added `X` icon import from lucide-react for the dismiss button - Added new state: `showCompanionWarning` to track the companion info banner - Updated the warning logic (lines 110-126) to differentiate between two scenarios: - **Critical Error (Red Alert)**: Shows when `previewState.status !== 'ready'` - dev server is running but no URL was discovered (actual preview problem) - **Companion Info (Blue Alert)**: Shows when `previewState.status === 'ready'` - preview is working but web companion is not detected - Added dismissible blue info banner (lines 218-244) with: - Title: "Enable Click-to-Component" - Message about installing web companion - Link to installation guide - X button to dismiss (no localStorage, resets each time) - Updated state management to clear both warnings appropriately **2. Added translations to `frontend/src/i18n/locales/en/tasks.json`:** - Added new `companionAlert` section with title, message, and link text ### Result Now the UX works as follows: 1. **Preview is broken** (no URL discovered): Red destructive alert shows with all troubleshooting steps and "Stop Dev Server & Resolve Issues" button 2. **Preview is working** (URL discovered, iframe loaded): Blue info alert shows suggesting web companion installation, with dismiss button (X) 3. **Web companion detected**: No warnings shown This allows users to: - See their preview immediately without blocking errors - Still discover the web companion feature through a friendly, dismissible notification - Distinguish between critical errors and optional features - Dismiss the companion warning if not interested (persists only for current session)
…mary: ## Summary of Changes I've successfully addressed all three review comments: ### 1. **Why import X?** (Line 3) The `X` icon from lucide-react is used for dismiss buttons on both alert banners (lines 225 and 240). ### 2. **Missing translations** (Line 100) Added `companionAlert` translations to both additional language files: **Spanish** (`frontend/src/i18n/locales/es/tasks.json:100-104`): - title: "Habilitar Click-to-Component" - message: "Instala el Web Companion para desbloquear la funcionalidad de clic para editar." - link: "Ver guía de instalación" **Japanese** (`frontend/src/i18n/locales/ja/tasks.json:100-104`): - title: "Click-to-Componentを有効化" - message: "Web Companionをインストールして、クリックして編集機能を有効にします。" - link: "インストールガイドを表示" ### 3. **Critical error alert should be dismissible** (Line 122) Modified the red destructive alert in `PreviewTab.tsx:186-229` to: - Wrap content in a flex container with space for the close button - Add an X button in the top-right corner (same pattern as companion warning) - Keep the "Stop Dev Server & Resolve Issues" button for those who want to stop - Allow dismissal for backend-only users who want to focus on logs **Files changed:** - `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` (lines 186-229) - `frontend/src/i18n/locales/es/tasks.json` (lines 100-104) - `frontend/src/i18n/locales/ja/tasks.json` (lines 100-104) Both alerts (critical error and companion warning) are now dismissible, fully translated, and provide a better UX for different user scenarios.
## Summary - Simple Solution Implemented I've reverted to a much simpler approach that solves all the problems with minimal changes: ### What Changed **Single file modified:** `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` **Changes:** 1. Added `X` import from lucide-react (line 3) 2. Made the warning alert dismissible by: - Wrapping the alert content in a flex container (line 178) - Adding an X button in the top-right corner (lines 211-218) - Clicking X calls `setShowHelp(false)` to dismiss the alert ### What This Solves ✅ **Original issue**: Users can dismiss false-positive warnings when preview is working ✅ **Backend users**: Can dismiss the alert and fullscreen the logs tab ✅ **Web companion discovery**: Warning still shows (includes companion installation info) but is dismissible ✅ **Simplicity**: Minimal code change, no complex logic, easy to understand ### Code Structure The warning now has this structure: ```tsx [Warning Title] [X] [Troubleshooting items 1-3] [Stop Dev Server & Resolve Issues button] ``` Users can either: - Click X to dismiss and continue working - Click "Stop Dev Server & Resolve Issues" to stop and fix problems **Note:** I kept the companion alert translations in `es/tasks.json` and `ja/tasks.json` in case you want to use them in the future, but they're not referenced in the code anymore.
## Final Summary - Simple Solution **Files changed:** - `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` **What changed:** 1. Added `X` import from lucide-react 2. Made the warning alert dismissible with an X button in the top-right corner **What this solves:** - Users can dismiss false-positive warnings - Backend users can dismiss and focus on logs - Web companion is still discoverable (warning shows but is dismissible) - Minimal, clean code change No unused code left behind.
LSRCT
changed the title
ggordonhall
approved these changes
Oct 15, 2025
Contributor
ggordonhall
left a comment
ggordonhall
left a comment
There was a problem hiding this comment.
There are some follow up changes needed here:
- Distinguish between fail to load preview and non-configured point-and-click. Message should change depending on case
- I don't think the dev server logs should auto-expand on error
- There's a visual bug where the follow-up text box is visible through the server logs
mbernier
pushed a commit
to mbernier/vibe-kanban
that referenced
this pull request
Nov 2, 2025
* ## Summary I've successfully fixed the issue where the red preview warning banner was blocking the preview even when a working output on a port was discovered. ### Root Cause The issue was in `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx:108-118`. The component had two separate "ready" states: 1. **`previewState.status === 'ready'`** - Set when a URL is detected in dev server logs (preview working) 2. **`isReady`** - Set when the web companion sends a 'ready' postMessage (optional, only for click-to-component) The warning banner was showing whenever `!isReady` was true after 5 seconds, even if the preview was fully functional with a discovered URL. ### Solution I added a check for `previewState.status !== 'ready'` to the warning condition at line 112. Now the warning banner only shows when: - 5 seconds have elapsed - No web companion ready message received - **AND no URL was discovered** (preview actually broken) - Dev server is running ### Result The red warning banner will no longer appear when the preview is working correctly (URL discovered and iframe loaded), even if the web companion is not installed. It will only show when there's an actual problem with the preview not loading. **File changed:** `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx:112,123` * ## Summary I've successfully implemented a simple solution that shows two different types of warnings based on the actual state of the preview: ### Changes Made **1. Modified `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx`:** - Added `X` icon import from lucide-react for the dismiss button - Added new state: `showCompanionWarning` to track the companion info banner - Updated the warning logic (lines 110-126) to differentiate between two scenarios: - **Critical Error (Red Alert)**: Shows when `previewState.status !== 'ready'` - dev server is running but no URL was discovered (actual preview problem) - **Companion Info (Blue Alert)**: Shows when `previewState.status === 'ready'` - preview is working but web companion is not detected - Added dismissible blue info banner (lines 218-244) with: - Title: "Enable Click-to-Component" - Message about installing web companion - Link to installation guide - X button to dismiss (no localStorage, resets each time) - Updated state management to clear both warnings appropriately **2. Added translations to `frontend/src/i18n/locales/en/tasks.json`:** - Added new `companionAlert` section with title, message, and link text ### Result Now the UX works as follows: 1. **Preview is broken** (no URL discovered): Red destructive alert shows with all troubleshooting steps and "Stop Dev Server & Resolve Issues" button 2. **Preview is working** (URL discovered, iframe loaded): Blue info alert shows suggesting web companion installation, with dismiss button (X) 3. **Web companion detected**: No warnings shown This allows users to: - See their preview immediately without blocking errors - Still discover the web companion feature through a friendly, dismissible notification - Distinguish between critical errors and optional features - Dismiss the companion warning if not interested (persists only for current session) * Perfect! All review comments have been addressed. Let me create a summary: ## Summary of Changes I've successfully addressed all three review comments: ### 1. **Why import X?** (Line 3) The `X` icon from lucide-react is used for dismiss buttons on both alert banners (lines 225 and 240). ### 2. **Missing translations** (Line 100) Added `companionAlert` translations to both additional language files: **Spanish** (`frontend/src/i18n/locales/es/tasks.json:100-104`): - title: "Habilitar Click-to-Component" - message: "Instala el Web Companion para desbloquear la funcionalidad de clic para editar." - link: "Ver guía de instalación" **Japanese** (`frontend/src/i18n/locales/ja/tasks.json:100-104`): - title: "Click-to-Componentを有効化" - message: "Web Companionをインストールして、クリックして編集機能を有効にします。" - link: "インストールガイドを表示" ### 3. **Critical error alert should be dismissible** (Line 122) Modified the red destructive alert in `PreviewTab.tsx:186-229` to: - Wrap content in a flex container with space for the close button - Add an X button in the top-right corner (same pattern as companion warning) - Keep the "Stop Dev Server & Resolve Issues" button for those who want to stop - Allow dismissal for backend-only users who want to focus on logs **Files changed:** - `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` (lines 186-229) - `frontend/src/i18n/locales/es/tasks.json` (lines 100-104) - `frontend/src/i18n/locales/ja/tasks.json` (lines 100-104) Both alerts (critical error and companion warning) are now dismissible, fully translated, and provide a better UX for different user scenarios. * Cleanup script changes for task attempt a91eb42f-7923-473a-8e9c-7e471e9ccb3d * Perfect! Let me create a summary: ## Summary - Simple Solution Implemented I've reverted to a much simpler approach that solves all the problems with minimal changes: ### What Changed **Single file modified:** `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` **Changes:** 1. Added `X` import from lucide-react (line 3) 2. Made the warning alert dismissible by: - Wrapping the alert content in a flex container (line 178) - Adding an X button in the top-right corner (lines 211-218) - Clicking X calls `setShowHelp(false)` to dismiss the alert ### What This Solves ✅ **Original issue**: Users can dismiss false-positive warnings when preview is working ✅ **Backend users**: Can dismiss the alert and fullscreen the logs tab ✅ **Web companion discovery**: Warning still shows (includes companion installation info) but is dismissible ✅ **Simplicity**: Minimal code change, no complex logic, easy to understand ### Code Structure The warning now has this structure: ```tsx [Warning Title] [X] [Troubleshooting items 1-3] [Stop Dev Server & Resolve Issues button] ``` Users can either: - Click X to dismiss and continue working - Click "Stop Dev Server & Resolve Issues" to stop and fix problems **Note:** I kept the companion alert translations in `es/tasks.json` and `ja/tasks.json` in case you want to use them in the future, but they're not referenced in the code anymore. * Done. All unused translations removed. ## Final Summary - Simple Solution **Files changed:** - `frontend/src/components/tasks/TaskDetails/PreviewTab.tsx` **What changed:** 1. Added `X` import from lucide-react 2. Made the warning alert dismissible with an X button in the top-right corner **What this solves:** - Users can dismiss false-positive warnings - Backend users can dismiss and focus on logs - Web companion is still discoverable (warning shows but is dismissible) - Minimal, clean code change No unused code left behind.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Preview dev server warning banner cannot be removed in cases where the dev server is running but no companion is installed.
Add a close button so users can preview their app.