8c6f7c6d30
* update cleanup script docs * Perfect! I've successfully created comprehensive documentation for the Preview Mode feature and updated the existing documentation. Here's what I've completed: ## New Documentation Created **[Preview Mode](/core-features/preview-mode)** - A complete guide covering: - Overview and key benefits - Prerequisites and setup requirements - Step-by-step setup instructions for the Web Companion - Usage instructions with toolbar controls - Component selection workflow - Comprehensive troubleshooting section - Advanced usage examples ## Updated Documentation **[Task Details Full Screen Mode](/core-features/task-details-full-screen)** - Enhanced with: - Added Preview tab to the right panel navigation - New Preview Tab section explaining embedded browser functionality - Cross-reference link to the detailed Preview Mode documentation - Updated related documentation links **[Navigation](/docs.json)** - Added the new preview-mode page to the Core Features section ## Key Features Documented The documentation covers all the preview mode capabilities you described: - **Initial setup** requirements and configuration - **Automatic URL detection** from development server logs - **Embedded browser** viewing within full screen mode - **Web Companion installation** for component selection - **Precise component selection** with Alt+click and context menus - **Seamless workflows** without leaving Vibe Kanban The documentation includes placeholder spaces for screenshots as requested, and follows the existing Mintlify documentation patterns with proper formatting, components, and cross-references. * I've successfully updated the [Vibe Kanban MCP Server documentation](/integrations/vibe-kanban-mcp-server) with comprehensive tool coverage: ## New Documentation Sections Added **Available MCP Tools** - Complete reference tables organized by category: - **Project Operations**: `list_projects` - **Task Management**: `list_tasks`, `create_task`, `get_task`, `update_task`, `delete_task` - **Task Execution**: `start_task_attempt` (new feature) **Supported Executors** - Full list of coding agents that can be used with `start_task_attempt` **Status Values** - Valid kebab-case status values for filtering and updates ## Enhanced Example Usage **Planning and Task Creation** - Shows how coding agents use the `create_task` tool **Starting Task Execution** - Demonstrates the new `start_task_attempt` feature with example JSON parameters **Complete Workflow Example** - End-to-end workflow from listing projects to starting task execution The documentation now provides a complete reference for all MCP tools, with the new `start_task_attempt` feature prominently highlighted and explained with practical examples. * Done! I've updated [supported-coding-agents.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/supported-coding-agents.mdx): 1. **Reordered**: Claude Code first, OpenAI Codex second, then Amp 2. **Renamed**: "Codex" → "OpenAI Codex" 3. **Renamed**: "SST OpenCode" → "OpenCode" * Done! Updated [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx): 1. Added syntax note to Option 2: Manual Configuration 2. Removed type hints from all parameters in MCP tools table 3. Removed the Info callout about `start_task_attempt` being newly added * Done! Removed the Status Values section from [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx). * Done! I've updated the terminology in [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx): - Changed section heading from "Using MCP with Coding Agents" to "Using the MCP Server" - Replaced "your coding agent" with "your MCP client" in the workflow steps and examples - Kept references to "coding agents" only where appropriate (e.g., when referring to agents within Vibe Kanban, or the executor parameter for `start_task_attempt`) * fix docs (vibe-kanban a870f5a1) The server is live and the docs are accessible via the URL http://localhost:3000/core-features/preview-mode I'm seeing `🚧 A parsing error occured. Please contact the owner of this website.` on this preview mode page and it seemingly has something to do with the Steps component. Using the Chrome DevTools that you have access to, you should be able to launch the website and iteratively make changes until this error is no longer present and the preview mode documentation is displaying itself as intended. You can look at recent commits to understand what has been changed with this documentation. You also have access to the Mintlify tools in order to search the official Mintlify documentation in case you need to troubleshoot. * Done! I've updated the [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx) with: 1. **Emphasized automatic installation** as the recommended approach with an Info callout 2. **Accurate setup steps** from the official README for Create React App, Next.js, and Vite 3. **Removed conditional rendering** (`process.env.NODE_ENV` checks) since tree-shaking handles this automatically 4. **Added note about tree-shaking** to clarify that the companion is automatically removed from production builds * Done! I've completed both tasks: 1. ✅ Copied the dev server screenshot to [docs/images/preview-mode-start-dev-server.png](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/images/preview-mode-start-dev-server.png) 2. ✅ Removed the "Advanced Usage" section from [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx) * Done! I've completed all the image updates: 1. ✅ Replaced the dev server start image with the new screenshot 2. ✅ Added all preview mode screenshots: - `preview-mode-interface.png` - Preview tab with dev server on - `preview-mode-component-selection.png` - Hovering over component with companion - `preview-mode-component-depth.png` - Component selected showing hierarchy 3. ✅ Removed all placeholder comments from the Frame elements * Done! I've completed all 6 review fixes: 1. ✅ Copied dev script config screenshot 2. ✅ Added install companion button screenshot within the Info callout 3. ✅ Removed the false "Automatically switch to Preview tab when ready" line 4. ✅ Added preview toolbar screenshot 5. ✅ Removed "Stop Dev" from toolbar controls (it's not part of the toolbar) 6. ✅ Fixed component selection instructions - now correctly states to click the floating VK companion button in bottom-right corner, removed incorrect Alt+Click and Context Menu instructions * Done! I've simplified the troubleshooting section to only include the relevant tip about ensuring the development server prints the URL to stdout/stderr for automatic detection, along with the supported URL formats. Removed all the less relevant troubleshooting content. * Done! I've completed all 3 review fixes: 1. ✅ Removed emojis from toolbar controls (🔄, 📋, 🌐) 2. ✅ Replaced component depth image with new screenshot and moved the old one to the top as an overview image 3. ✅ Removed "IDE" from the overview text - now only mentions switching between browser and Vibe Kanban * Done! Replaced the overview image with the new screenshot. * Done! I've fixed both issues in [task-details-full-screen.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/task-details-full-screen.mdx): 1. ✅ Updated toolbar description from "Start, stop, and manage your development server" to "Refresh the preview, copy the URL, or open in a new browser tab" 2. ✅ Changed image from `vk-preview.png` to `preview-mode-overview.png` (same as the preview mode docs page) * Done! I've added GitHub Copilot to the [supported coding agents documentation](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/supported-coding-agents.mdx). The new section includes: - Installation instructions via npm (`npm install -g @github/copilot`) - Prerequisites (Copilot subscription, Node.js 22+, npm 10+) - Authentication instructions using the `/login` command - Link to official GitHub Copilot CLI documentation It's positioned between Amp and Cursor CLI in the list. * Done! Removed the placeholder comment from [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx). * remove old preview * Done! I've updated [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx) with both corrections: 1. ✅ Changed "Create a task in 'plan mode'" to mention creating a custom agent profile with a planning prompt, with a link to the Agent Configurations documentation 2. ✅ Changed "Generate Sub-Tasks" to "Generate Tasks" since the MCP server only generates tasks, not sub-tasks * Done! Removed the "Real-time preview" line from the key benefits section in [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx). * update docs on Codex w/ ChatGPT * update MCP server install command docs
154 lines
7.0 KiB
Plaintext
154 lines
7.0 KiB
Plaintext
---
|
||
title: "Task Details Full Screen Mode"
|
||
sidebarTitle: "Full Screen Mode"
|
||
description: "Complete guide to using the task details full screen mode for development workflows, including dev server, git operations, logs, diffs, and process monitoring"
|
||
---
|
||
|
||
## Accessing Full Screen Mode
|
||
|
||
Click the **Maximise** button (⛶) in the task details header to expand the view to occupy the full right side of your screen.
|
||
|
||
<Frame>
|
||
<img src="/images/vk-task-detail.jpeg" alt="Task details in full screen mode showing the complete interface with sidebar and tabs" />
|
||
</Frame>
|
||
|
||
## Interface Layout
|
||
|
||
Full screen mode uses a two-column layout:
|
||
|
||
### Left Sidebar
|
||
- **Task Information**: Title, description, and metadata
|
||
- **Development Toolbar**: Primary development actions
|
||
- **TODOs**: Task checklist and progress tracking
|
||
- **Relationships**: Subtasks and parent task links
|
||
|
||
### Right Panel
|
||
- **Tab Navigation**: Switch between Logs, Diffs, Processes, and Preview
|
||
- **Content Area**: Active tab content with real-time updates
|
||
- **Follow-up Section**: Additional context and actions
|
||
|
||
## Core Features
|
||
|
||
### Development Server
|
||
|
||
Start and manage your project's development environment directly from the task interface.
|
||
|
||
**Controls:**
|
||
- **Dev** (▶️): Start the development server using your project's configured dev script
|
||
- **Stop Dev** (⏹️): Terminate the running development server
|
||
- **View Logs** (📄): Jump to process logs to monitor server output
|
||
|
||
The development server runs in a git worktree environment and streams all output to the Processes tab. Click the logs button next to the dev server control to jump directly to the process logs for real-time monitoring.
|
||
|
||
### Git Operations
|
||
|
||
#### Rebase
|
||
Keep your task branch up-to-date with the latest changes from the base branch.
|
||
|
||
- **Automatic Detection**: The rebase button appears when your branch is behind the base branch
|
||
|
||
For detailed guidance on handling rebase conflicts, see [Resolving Rebase Conflicts](/core-features/resolving-rebase-conflicts).
|
||
|
||
#### Merge
|
||
Integrate your completed work back into the base branch.
|
||
|
||
- **Availability**: Disabled when an open pull request exists
|
||
- **Success Indication**: A "Merged!" notification confirms successful integration
|
||
|
||
#### Push & Pull Request Management
|
||
- **Create PR**: Opens pull request creation dialog for new branches
|
||
- **Push to PR**: Updates existing pull request with latest changes
|
||
- **Auto-detection**: Automatically detects existing PRs and adjusts button behavior
|
||
|
||
### Task Management
|
||
|
||
#### History & Attempts
|
||
View and manage all task attempts from the full screen interface.
|
||
|
||
- **History**: View all previous attempts for this task, review execution status and outcomes, and switch between different attempts to compare results
|
||
- **New Attempt**: Create additional attempts when previous approaches didn't work as expected or when testing different implementation strategies
|
||
|
||
<Info>
|
||
For detailed information about when and why to create new attempts, see [Creating Task Attempts](/core-features/creating-task-attempts).
|
||
</Info>
|
||
|
||
#### Subtasks
|
||
Break down complex tasks into manageable pieces.
|
||
|
||
- **Create Subtask** (🔀): Opens task creation form with:
|
||
- Parent task automatically linked
|
||
- Initial base branch set to the current attempt's branch
|
||
- Subtasks link to specific task attempts, not tasks themselves
|
||
|
||
<Warning>
|
||
Creating new task attempts affects existing subtasks, as they remain linked to their original parent attempt.
|
||
</Warning>
|
||
|
||
Learn more in [Creating Subtasks](/core-features/subtasks).
|
||
|
||
### Monitoring & Analysis
|
||
|
||
#### Logs Tab
|
||
The Logs tab provides real-time streaming of coding agent activities and reasoning. You can see the agent's thought process, actions being taken, and responses as tasks are executed. Process events from development servers, builds, and script execution are also logged here.
|
||
|
||
<Frame>
|
||
<img src="/images/vk-logs.png" alt="Logs tab showing real-time streaming of agent output and process events" />
|
||
</Frame>
|
||
|
||
#### 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.
|
||
|
||
<Frame>
|
||
<img src="/images/vk-diffs.png" alt="Diffs tab displaying code changes with syntax highlighting and line-by-line comparison" />
|
||
</Frame>
|
||
|
||
Learn more in [Reviewing Code Changes](/core-features/reviewing-code-changes).
|
||
|
||
#### Processes Tab
|
||
The Processes tab displays a timeline view of all running and completed processes. You can track the status of running, completed, failed, and stopped processes with their complete execution timeline. Click any process to view its specific output logs, and use the interactive controls to stop running processes directly from the interface.
|
||
|
||
<Frame>
|
||
<img src="/images/vk-processes.png" alt="Processes tab showing timeline of running and completed processes with status tracking" />
|
||
</Frame>
|
||
|
||
#### 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
|
||
|
||
<Frame>
|
||
<img src="/images/preview-mode-overview.png" alt="Preview tab showing embedded web application with toolbar controls" />
|
||
</Frame>
|
||
|
||
For detailed setup instructions and usage guidance, see [Preview Mode](/core-features/preview-mode).
|
||
|
||
## Navigation & Controls
|
||
|
||
### Keyboard Shortcuts
|
||
- **Escape**: Exit full screen mode and return to sidebar view
|
||
- **n**: Create a new task attempt
|
||
|
||
|
||
|
||
## Exiting Full Screen Mode
|
||
|
||
- Click the **Minimise** button in the header
|
||
- Press **Escape** key
|
||
- Click the **×** button to close the task panel entirely
|
||
- Navigate to a different task or project
|
||
|
||
The interface gracefully transitions back to the compact sidebar view while preserving your work context.
|
||
|
||
## 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
|
||
- [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
|