+
+
+## Overview
+
+Preview Mode provides an embedded browser experience within Vibe Kanban, allowing you to test and iterate on your web applications without leaving the development environment. This feature eliminates the need to switch between your browser and Vibe Kanban by providing live preview capabilities and precise component selection tools.
+
+**Key Benefits:**
+- **Embedded viewing**: See your application running directly in Vibe Kanban
+- **Precise component selection**: Click to select specific UI components for targeted feedback
+- **Seamless workflows**: No context switching between tools
+
+## Prerequisites
+
+Before using Preview Mode, ensure you have:
+
+1. **Development server script configured** for your project
+2. **Web Companion installed** in your application (for component selection)
+3. **Project running** a web application that serves to localhost
+
+## Setting Up Preview Mode
+
+
+
+
+
+
+
+
+
+ The system will:
+ - Launch your configured development script
+ - Monitor the output for URL detection
+
+
+
+### Preview Toolbar Controls
+
+The preview toolbar provides essential controls for managing your preview experience:
+
+
+
+
+
+- **Refresh**: Reload the preview iframe
+- **Copy URL**: Copy the development server URL to clipboard
+- **Open in Browser**: Open the application in your default browser
+
+### Component Selection
+
+When the Web Companion is installed, you can precisely select UI components for targeted feedback:
+
+
+
+
+
+
-#### Diffs Tab
+#### Diffs Tab
The Diffs tab provides a visual representation of all code changes made during task execution. It shows a git diff between your branch and the base branch, with syntax highlighting and language-aware code formatting. You can see a summary of added, modified, and deleted files with precise line-by-line change tracking and context.
@@ -111,6 +111,21 @@ The Processes tab displays a timeline view of all running and completed processe
+#### Preview Tab
+The Preview tab provides an embedded browser experience for testing web applications directly within Vibe Kanban. When you start a development server, the tab automatically detects the URL and displays your running application in an embedded iframe. This eliminates the need to switch between your browser and Vibe Kanban during development.
+
+**Key features:**
+- **Embedded browser**: View your application running directly in the task interface
+- **Automatic URL detection**: Automatically detects development server URLs from process logs
+- **Component selection**: Use the Web Companion to select specific UI components for precise feedback
+- **Preview toolbar**: Refresh the preview, copy the URL, or open in a new browser tab
+
+
+
+
+
+For detailed setup instructions and usage guidance, see [Preview Mode](/core-features/preview-mode).
+
## Navigation & Controls
### Keyboard Shortcuts
@@ -130,8 +145,9 @@ The interface gracefully transitions back to the compact sidebar view while pres
## Related Documentation
+- [Preview Mode](/core-features/preview-mode) - Embedded browser preview and component selection
- [Creating Task Attempts](/core-features/creating-task-attempts) - Learn about task attempt lifecycle
-- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Deep dive into diff analysis
+- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Deep dive into diff analysis
- [Resolving Rebase Conflicts](/core-features/resolving-rebase-conflicts) - Handle rebase conflicts and merge issues
- [Creating Tasks](/core-features/creating-tasks) - Task creation and management
- [Agent Configurations](/configuration-customisation/agent-configurations) - Customise AI agent behaviour
diff --git a/docs/docs.json b/docs/docs.json
index 4f0066d9..afba7d70 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -35,7 +35,8 @@
"core-features/creating-task-attempts",
"core-features/reviewing-code-changes",
"core-features/resolving-rebase-conflicts",
- "core-features/task-details-full-screen"
+ "core-features/task-details-full-screen",
+ "core-features/preview-mode"
]
},
{
diff --git a/docs/images/preview-mode-component-depth.png b/docs/images/preview-mode-component-depth.png
new file mode 100644
index 0000000000000000000000000000000000000000..52576ede0ce0a031524cbe7845b3343baafa7e71
GIT binary patch
literal 70411
zcmeFYcT`hd(>DwvpdiHpDBT7MQUpSzyW|_+bC5O`1_#o2mnZ##X
za}`G}igs`zQ?F(=?IF=p*K&}KqBTaL*tE~v-i4^30jgN7nfg^zAFk^HcKq3U7kk7i
z66&`c-CmzE1^l!r7DFi;-``7Vv#yz3(`f?bZW>i1EbX2u&Q?Z^haCqE+d-^Ty#}wA
z+vM?7w&J6E2J=(FTh_BU5jf2wXE}VFPTZFNVR)HZ gm`;*2m(p#p4x2nvMW(mSoIXoxTjpY30B
z8C##dCgqzQFLB6Nr;ND=5hT}yCfczmFlQHKlE;kYc*a2;>y3DFPFLbUDpuxZ13BJ=
z9D4QO@PgePZQ|=kF^RsXZW8FzF{e_{uu^2;w-euHGuY$jm}d+Z0M{!sZE1FLm^BqL
zIrl3?x|klgopTzxY43yi=!bLw31bhTm|VY(IFL`T-I^O~`IaHBqjv@g*XG==cD
z5c9Sjbq|sM!`^#FHJSEn-hE2c_zqh#_nn2o_cal|V2q(<&~2jOo!zBofbamV
zn5zG6-(HE`Q(kRFZy7A#70_-02yE-QBYXR{#y9bR@7Sw@Jm>0F4-o&jq$PP!JEY6^
zjosRg7Vd#yWl%pD=Ga;`TlXqk6WJK^Cc7d_;1FJ|ccR=tD1rb9ET!Q|T4R0PLh!?e
zsFhal{vV9)S5&}7y#T=E#1MOIK+R5P;`4fncSd#;YwT(N-uw1UtO*vFcHUreueCnw
zZ47k23+a~z303e_7Zqn0j^Mv-b*`=2yCVKd`@+;-ztR0U-W6Zo(VXJQbbveA
zLw~zCYeg(OXt+ih$2&u>I>{G17N5;toO#VCiPFSAM-UZk2PGa(C->!f?dQ6yy+s}!
zD7eP9pM