* Perfect! The preview tab implementation is complete and all type checks pass. Let me provide a summary of what was implemented:
1. **Updated `TabType`** - Added 'preview' to the union type
2. **Created `useDevserverPreview` hook** - Intelligent devserver URL detection with:
- Real-time log parsing using the regex `(?:localhost|127\.0\.0\.1|0\.0\.0\.0):(\d+)[^\d]*`
- Three states: idle/searching/ready
- URL normalization (0.0.0.0 → localhost)
- Process monitoring for setup scripts and dev servers
3. **Built `PreviewTab` component** - Full-featured iframe preview with:
- Proper sandbox settings for security
- Toolbar with refresh, copy URL, and open external buttons
- Smart error handling for mixed content/CORS issues
- Clear empty states and loading indicators
4. **Enhanced `TabNavigation`** - Conditionally shows preview tab with:
- Monitor icon and spinner when searching
- Only appears when devserver is detected or likely
5. **Integrated in `TaskDetailsPanel`** - Wires everything together in fullscreen mode
- **Smart Detection**: Parses logs in real-time to find devserver URLs
- **Robust Error Handling**: Graceful fallbacks for iframe loading issues
- **Security**: Proper iframe sandboxing with necessary permissions
- **Performance**: Efficient log processing with deduplication
- **UX**: Clear states (searching/ready/error) with helpful messaging
The implementation follows the Oracle's architectural recommendations with proper separation of concerns and real-time detection capabilities.
* Cleanup script changes for task attempt 4f59c374-1cc5-4b3c-a79a-5f63756a366b
* Perfect! Now the preview tab will use the **first** dev server URL it detects rather than being overwritten by subsequent matches. This means:
- If both backend (e.g., `:3001`) and frontend (e.g., `:5173`) servers start
- The preview tab will show whichever URL appears first in the logs
- Subsequent URLs will be ignored to avoid switching the preview unexpectedly
This provides a more stable preview experience when multiple dev servers are running.
* Cleanup script changes for task attempt 4f59c374-1cc5-4b3c-a79a-5f63756a366b
* add parent lib
* fmt
* Listen for communication from the preview tab (vibe-kanban ace46045)
In frontend/src/components/tasks/TaskDetails/PreviewTab.tsx
We should expect that the iframe will communicate via frontend/src/utils/previewBridge.ts
When a message is received, we should add some details about the clicked element to the follow up textarea
* Component to view clicked element (vibe-kanban e3b90cc1)
frontend/src/components/tasks/TaskDetails/PreviewTab.tsx
frontend/src/components/tasks/TaskFollowUpSection.tsx
When a user clicks on an element, we should display a box in the follow up section similar to how we show reviews or conflicts.
The section should display a summary of each of the elements, the name of the component and the file location.
When the user sends a follow up, a markdown equivalent of the summary should be appended to the top of the follow up message.
* Component to view clicked element (vibe-kanban e3b90cc1)
frontend/src/components/tasks/TaskDetails/PreviewTab.tsx
frontend/src/components/tasks/TaskFollowUpSection.tsx
When a user clicks on an element, we should display a box in the follow up section similar to how we show reviews or conflicts.
The section should display a summary of each of the elements, the name of the component and the file location.
When the user sends a follow up, a markdown equivalent of the summary should be appended to the top of the follow up message.
* Tweaks to component click (vibe-kanban 756e1212)
Preview tab frontend/src/components/tasks/TaskDetails/PreviewTab.tsx
- Preview should remember which URL you were on
- Auto select the follow up box after point and click, so you can type feedback
Clicked elements: frontend/src/components/tasks/ClickedElementsBanner.tsx, frontend/src/contexts/ClickedElementsProvider.tsx
- The list of components should not overflow horizontally, instead we should truncate, omiting components from the left first
- If the user clicks on a component, it should omit the downstream components from the list, they should be displayed disabled and the prompt should start from the selected component
* strip ansi when parsing dev server URL
* cleanup
* cleanup
* improve help copy
* start dev server from preview page
* dev server wip
* restructure
* instructions
* fix
* restructur
* fmt
* i18n
* i18n fix
* config fix
* wip cleanup
* minor cleanup
* Preview tab feedback (vibe-kanban d531fff8)
In the PreviewToolbar, each icon button should have a tooltip
* fix + fmt
* move dev script textarea
* improve when help is shown
* i18n
* improve URL matching
* fix close logs
* auto install companion
* cleanup notices
* Copy tweak
2781e3651b