update docs after overhauled front-end (#1079)

docs/agents/amp.mdx

@@ -0,0 +1,27 @@
+---
+title: "Amp"
+description: "Set up Amp code completion agent"
+icon: https://www.vibekanban.com/images/logos/amp-logo.svg
+---
+
+<Steps>
+<Step title="Run Amp">
+  ```bash
+  npx -y @sourcegraph/amp
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. For more details, see the [Amp Owner's Manual](https://ampcode.com/manual#install).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select Amp when creating task attempts.
+</Step>
+</Steps>

docs/agents/ccr.mdx

@@ -0,0 +1,103 @@
+---
+title: "CCR (Claude Code Router)"
+description: "Set up CCR to orchestrate multiple Claude Code models"
+icon: https://www.vibekanban.com/images/logos/claude.svg#"
+---
+
+CCR (Claude Code Router) lets you route coding prompts across different LLM providers and models, and select specialised models for specific tasks like long context, background work, or image understanding.
+
+<Warning>
+CCR is not affiliated with, endorsed by, or connected to Claude Code or Anthropic. It is a third-party tool.
+</Warning>
+
+## Installation
+CCR is available via `npx` – no separate installation required.
+
+```bash
+npx -y @musistudio/claude-code-router ui
+```
+
+This launches the CCR local UI where you configure providers and models.
+
+## Authentication
+Authenticate and configure CCR outside of Vibe Kanban. Follow the instructions on the CCR GitHub repo:
+
+- GitHub: https://github.com/musistudio/claude-code-router
+
+You'll add providers, set API keys, and register model names in the CCR UI or via CCR's JSON configuration (see the CCR repo for the schema and file location).
+
+## Configure CCR (Providers and Models)
+
+Configure CCR either via the UI or JSON config.
+
+In the CCR UI (`npx -y @musistudio/claude-code-router ui`):
+
+1) Add providers
+- Choose a provider (e.g., `openrouter`, `deepseek`, etc.).
+- Enter the required API key(s) and settings for that provider.
+
+2) Add models
+- For each provider, register the model identifier (e.g., `moonshotai/kimi-k2-0905`, `deepseek-chat`).
+- CCR supports configuring different models for specific cases:
+  - `default`: general coding
+  - `background`: lightweight/background operations
+  - `think`: models that support "thinking" modes
+  - `longContext`: very long inputs/files
+  - `webSearch`: models that support web/tool use
+  - `image`: models with vision capabilities
+
+Note: not all models support web search, thinking, or images. Choose models accordingly in the CCR UI.
+
+### Configure via JSON (optional)
+CCR can also be configured via its JSON configuration file. Refer to the CCR GitHub documentation for the exact schema, keys, and file location. Define providers (with API keys) and map the model cases (`default`, `background`, `think`, `longContext`, `webSearch`, `image`) to specific provider/model pairs.
+
+### Example: OpenRouter provider configured in CCR UI
+
+<Frame>
+<img src="/images/ccr-openrouter-ui.png" alt="OpenRouter configured in CCR UI" />
+</Frame>
+
+### Example: CCR model mapping (default/background/think/etc.)
+
+<Frame>
+<img src="/images/ccr-config-example.png" alt="CCR models configuration example" />
+</Frame>
+
+## Configure Vibe Kanban
+
+Vibe Kanban does not ship a default configuration for CCR. Add configurations to the existing Claude Code agent:
+
+1) Open the "Coding Agent Configurations" page.
+2) Add a new configuration for the Claude Code agent (or edit an existing one).
+3) Enable the `claude_code_router` checkbox.
+4) Optionally set a model string to target a specific CCR provider/model.
+
+See the [Agent Profiles & Variants](/configuration-customisation/agent-configurations) guide for managing agent configurations.
+
+Model string format: `<provider>,<model-name>`
+
+Examples:
+```text
+openrouter,moonshotai/kimi-k2-0905
+deepseek,deepseek-chat
+```
+
+Tips:
+- Create multiple configurations if you want easy switching between different models.
+- Leave the model string empty if you want CCR to use its own routing based on your CCR UI configuration (e.g., its `default`/`longContext`/etc. mappings).
+
+### Example: Claude Code agent configuration in Vibe Kanban
+
+<Frame>
+<img src="/images/vk-ccr-agent-config.png" alt="Claude Code agent configuration in Vibe Kanban" />
+</Frame>
+
+## Using CCR in Vibe Kanban
+
+When creating a Task Attempt, select the coding agent and configuration: choose the Claude Code agent, then pick one of your CCR-enabled configurations.
+
+## Troubleshooting
+
+- Authentication errors: verify your API keys/provider settings in CCR (via UI or JSON config).
+- Model not found: confirm the model identifier is correct for the chosen provider.
+- Missing features (webSearch/think/image): switch to a model that supports the capability and update your CCR mapping (via UI or JSON config).

docs/agents/claude-code.mdx

@@ -0,0 +1,27 @@
+---
+title: "Claude Code"
+description: "Set up Anthropic's Claude Code agent"
+icon: https://www.vibekanban.com/images/logos/claude.svg#"
+---
+
+<Steps>
+<Step title="Run Claude Code">
+  ```bash
+  npx -y @anthropic-ai/claude-code
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. For more details, see the [Claude Code documentation](https://docs.claude.com/en/docs/claude-code/quickstart).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select Claude Code when creating task attempts.
+</Step>
+</Steps>

docs/agents/cursor-cli.mdx

@@ -0,0 +1,29 @@
+---
+title: "Cursor CLI"
+description: "Set up Cursor's command-line agent"
+icon: https://www.vibekanban.com/images/logos/cursor-logo-light.png
+---
+
+<Steps>
+<Step title="Install Cursor CLI">
+  ```bash
+  curl https://cursor.com/install -fsS | bash
+  ```
+
+  Verify installation with `cursor-agent --version`. For more details, see the [official installation guide](https://docs.cursor.com/en/cli/installation).
+</Step>
+
+<Step title="Follow the login instructions">
+  Sign in with `cursor-agent login` (opens a browser). You can also set the `CURSOR_API_KEY` environment variable. Full instructions: https://docs.cursor.com/en/cli/reference/authentication
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select Cursor CLI when creating task attempts.
+</Step>
+</Steps>

docs/agents/gemini-cli.mdx

@@ -0,0 +1,27 @@
+---
+title: "Gemini CLI"
+description: "Set up Google Gemini CLI"
+icon: https://www.vibekanban.com/images/logos/gemini-logo.svg
+---
+
+<Steps>
+<Step title="Run Gemini CLI">
+  ```bash
+  npx -y @google/gemini-cli
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. For more details, see [geminicli.com](https://geminicli.com/).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select Gemini CLI when creating task attempts.
+</Step>
+</Steps>

docs/agents/github-copilot.mdx

@@ -0,0 +1,27 @@
+---
+title: "GitHub Copilot"
+description: "Set up GitHub Copilot CLI"
+icon: https://www.vibekanban.com/images/logos/github-copilot-logo.svg
+---
+
+<Steps>
+<Step title="Run GitHub Copilot">
+  ```bash
+  npx -y @github/copilot
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  When prompted, follow the on-screen instructions to authenticate using the `/login` command. For more details, see the [GitHub Copilot CLI documentation](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/use-copilot-cli).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select GitHub Copilot when creating task attempts.
+</Step>
+</Steps>

docs/agents/openai-codex.mdx

@@ -0,0 +1,29 @@
+---
+title: "OpenAI Codex"
+description: "Set up OpenAI Codex integration"
+icon: https://www.vibekanban.com/images/logos/openai-logo.svg
+---
+
+<Steps>
+<Step title="Run OpenAI Codex">
+  ```bash
+  npx -y @openai/codex
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. Follow the authentication instructions from the [OpenAI help centre](https://help.openai.com/en/articles/11369540-using-codex-with-your-chatgpt-plan) to use Codex with your ChatGPT plan.
+
+  Alternatively, Codex can be used via the OpenAI API by setting the `OPENAI_API_KEY` environment variable. For more details, see the [OpenAI documentation](https://developers.openai.com/codex/pricing/#use-an-openai-api-key)
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select OpenAI Codex when creating task attempts.
+</Step>
+</Steps>

docs/agents/opencode.mdx

@@ -0,0 +1,27 @@
+---
+title: "OpenCode"
+description: "Set up SST's OpenCode"
+icon: https://www.vibekanban.com/images/logos/opencode-light.svg
+---
+
+<Steps>
+<Step title="Run OpenCode">
+  ```bash
+  npx -y opencode-ai
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. For more details, see the [OpenCode GitHub page](https://github.com/sst/opencode).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select OpenCode when creating task attempts.
+</Step>
+</Steps>

docs/agents/qwen-code.mdx

@@ -0,0 +1,27 @@
+---
+title: "Qwen Code"
+description: "Set up Qwen code-focused assistant"
+icon: https://www.vibekanban.com/images/logos/qwen-logo.png#"
+---
+
+<Steps>
+<Step title="Run Qwen Code">
+  ```bash
+  npx -y @qwen-code/qwen-code
+  ```
+</Step>
+
+<Step title="Follow the login instructions">
+  Complete the authentication flow as prompted. For more details, see the [official Qwen documentation](https://github.com/QwenLM/qwen-code).
+</Step>
+
+<Step title="Start Vibe Kanban">
+  Once authenticated, launch Vibe Kanban:
+
+  ```bash
+  npx vibe-kanban
+  ```
+
+  You can now select Qwen Code when creating task attempts.
+</Step>
+</Steps>

docs/configuration-customisation/keyboard-shortcuts.mdx

@@ -37,9 +37,10 @@ These shortcuts work in various forms and dialogs:
 | Shortcut | Action | Context |
 |----------|--------|---------|
 | `⌘/Ctrl + Enter` | Submit | Create & Start (Task Form), Save (Template Editor) |
-| `⌘/Ctrl + Enter` | Send | Send follow-up message in Task Details |
+| `⌘/Ctrl + Enter` | Send Message | Send message to coding agent in task interface |
 | `⌘/Ctrl + Enter` | Save Comment | Add or save comment in Diff Review |
-| `⌘/Ctrl + Enter` | Toggle Fullscreen | Toggle fullscreen view in Task Details |
+| `Enter` | New Line | Create new line in message field |
+| `Shift + Tab` | Switch Agent Profile | Switch between agent profiles (e.g., PLAN to DEFAULT) |
 | `Escape` | Cancel/Clear | Clear draft in follow-up, cancel comment editing |
 
 ## Search

docs/core-features/completing-a-task.mdx

@@ -0,0 +1,68 @@
+---
+title: "Completing a Task"
+description: "Learn how to complete tasks by rebasing, merging, and managing pull requests directly from Vibe Kanban"
+sidebarTitle: "Completing a Task"
+---
+
+When your task is finished, Vibe Kanban provides integrated git operations to keep your branch up-to-date and merge your work back into the base branch.
+
+## Git Operations Header
+
+At the top of the diff view, you'll see important branch information and actions:
+
+<Frame>
+<img src="/images/vk-diff-header.png" alt="Diff header showing branch information and action buttons" />
+</Frame>
+
+**Branch Information:**
+- **Task branch**: The branch your task is working on
+- **Target branch**: The branch you'll merge into (with cog button to change it)
+- **Commits ahead**: Number of commits your branch has that aren't in the target
+- **Commits behind**: Number of commits in the target that you don't have (enables rebase button when >0)
+
+**Actions:**
+- **Merge**: Merge your changes into the target branch
+- **Create PR**: Create a pull request on GitHub
+- **Rebase**: Update your branch with the latest changes from the target branch
+
+## Rebase
+
+Click **Rebase** to update your branch with the latest changes from the target branch. This keeps your branch up-to-date and maintains a clean history.
+
+If conflicts occur, see [Resolving Rebase Conflicts](/core-features/resolving-rebase-conflicts).
+
+## Merge
+
+Click **Merge** to integrate your completed work into the target branch. Your task will automatically move to the **Done** column, and the worktree is cleaned up automatically. The branch remains until you manually delete it.
+
+<Tip>
+If you're working with GitHub, consider creating a pull request instead of merging directly. This allows for team review and CI checks.
+</Tip>
+
+## Pull Request Management
+
+### Creating a Pull Request
+
+Click **Create PR** to create a pull request on GitHub. The title and description are auto-populated from your task details.
+
+<Frame>
+<img src="/images/vk-pr-open.png" alt="Header showing disabled Push button after pull request creation" />
+</Frame>
+
+After creating the PR, the button changes to **Push** (initially disabled until you make more changes).
+
+### Updating a Pull Request
+
+When you continue working after creating a PR, the **Push** button becomes enabled. Click it to push your latest changes to the pull request.
+
+<Frame>
+<img src="/images/vk-pr-with-push.png" alt="Header showing enabled Push button with new changes ready" />
+</Frame>
+
+When your PR is merged on GitHub, your task automatically moves to **Done**.
+
+## Related Documentation
+
+- [Resolving Rebase Conflicts](/core-features/resolving-rebase-conflicts) - Handle conflicts during rebasing
+- [GitHub Integration](/integrations/github-integration) - Set up GitHub authentication
+- [Creating Projects](/core-features/creating-projects) - Configure base branches and project settings

docs/core-features/creating-projects.mdx

@@ -34,11 +34,11 @@ Each time a coding agent is executed it runs in a [git worktree](https://git-scm
 
 ### Dev Server Scripts
 
-The dev server script is run whenever you press the "run dev server" button. It's useful for quickly reviewing work after a coding agent has run.
+The dev server script is run when you press the "Start Dev Server" button from the [Preview](/core-features/testing-your-application) section. It's useful for quickly reviewing work after a coding agent has run.
 
 ### Cleanup Scripts
 
-Cleanup scripts run after a coding agent finishes it's turn. You can use these to tidy up the workspace, remove temporary files, or perform any post-execution cleanup. For example, you might run `npm run format` to ensure your code is formatted correctly. Treat it like a pre-commit hook in git.
+Cleanup scripts run after a coding agent finishes it's turn. You can use these to tidy up the workspace, remove temporary files, or perform any post-execution cleanup. For example, you might run `npm run format` to ensure your code is formatted correctly. Treat it like a git pre-commit hook.
 
 
 ### Copy Files

docs/core-features/creating-tasks.mdx

@@ -7,7 +7,12 @@ description: "Learn how to create and manage tasks on your kanban board, includi
 <img src="/images/screenshot-create-task.png" alt="Task creation interface showing Add Task button and form fields" />
 </Frame>
 
-After creating a project, add tasks by clicking the **plus (+) icon** in the top right of your project kanban page, or by using the keyboard shortcut **`c`**. Creating a task adds it to your kanban board without automatically starting a coding agent.
+After creating a project, add tasks by clicking the **plus (+) icon** in the top right of your project kanban page, or by using the keyboard shortcut **`c`**.
+
+You have two options when creating a task:
+
+- **Create Task**: Adds the task to your kanban board without starting a coding agent
+- **Create & Start**: Creates the task and immediately starts it with your default coding agent and current branch
 
 ## Using Templates
 
@@ -25,49 +30,30 @@ When adding a task, you can select from your saved templates:
 Templates save time by reusing common task structures. Learn more about creating templates in the [Task Templates](/configuration-customisation/creating-task-templates) guide.
 </Note>
 
-## Starting Your First Task Attempt
+## Starting an Existing Task
 
 <Frame>
-<img src="/images/screenshot-create-task-attempt.png" alt="Task attempt creation dialog showing agent profile and variant selection options" />
+<img src="/images/vk-new-task-attempt.png" alt="Task attempt creation dialog showing agent profile and variant selection options" />
 </Frame>
 
-To activate a coding agent on your task, create a task attempt:
+When you open a task that hasn't been attempted yet, you'll see the task title, description, and a list of attempts showing "no attempts yet". Click the **plus (+) button** to create a task attempt and configure:
 
-<Steps>
+- **Agent profile**: Choose from available agents (e.g., CLAUDE_CODE, GEMINI, CODEX). Your default configuration from Settings is pre-selected.
-<Step title="Select your agent profile">
+- **Variant**: If your selected agent has variants, pick the appropriate one (e.g., DEFAULT, PLAN).
-  Choose from available agents (e.g., CLAUDE_CODE, GEMINI, CODEX). Your default configuration from Settings is pre-selected.
+- **Base branch**: Specify which branch the agent should work from. Your current branch is selected by default.
-</Step>
-
-<Step title="Choose a variant">
-  If your selected agent has variants, pick the appropriate one (e.g., DEFAULT, PLAN).
-</Step>
-
-<Step title="Set the base branch">
-  Specify which branch the agent should work from. Your current branch is selected by default.
-</Step>
-</Steps>
 
 <Tip>
 Use **Create & Start** to add the task and immediately create a task attempt with your default settings in one action.
 </Tip>
 
-### What Happens During Execution
-
-1. **Setup Scripts Run**: Any setup script defined in your project settings runs automatically
-2. **Agent Execution**: The coding agent processes your task using the title and description  
-3. **Real-time Monitoring**: Watch progress through streaming logs in the task interface
-4. **Follow-up Questions**: Continue the conversation after execution to refine results
-
-Most tasks only need a single attempt. You'll only need additional attempts if you want to restart from scratch with different settings.
-
 <Note>
-For detailed task management after execution, see [Task Details Full Screen Mode](/core-features/task-details-full-screen). To understand when you might need multiple attempts, see [Creating Task Attempts](/core-features/creating-task-attempts).
+To monitor your task as it executes, see [Monitoring Task Execution](/core-features/monitoring-task-execution). To understand when you might need multiple attempts, see [New Task Attempts](/core-features/new-task-attempts).
 </Note>
 
 ## Creating Tasks via MCP Clients
 
 <Warning>
-This is not the typical method for creating tasks but can be valuable for bulk task creation or migrating from other systems.
+This is not the typical method for creating tasks but can be valuable for bulk task creation, migrating from other systems, using an AI assistant with extra project context, or for coding agents that want to create new tasks.
 </Warning>
 
 Tasks can also be created programmatically using coding agents or MCP (Model Context Protocol) clients such as Claude Desktop or Raycast. This approach is particularly useful for:

docs/core-features/monitoring-task-execution.mdx

@@ -0,0 +1,141 @@
+---
+title: "Monitoring Task Execution"
+description: "Learn how to monitor coding agent execution with real-time logs, approvals, and interactive controls"
+sidebarTitle: "Monitoring Task Execution"
+---
+
+When you start a task, the main panel provides real-time visibility into everything happening during execution. Watch as agents think through problems, take actions, and respond to your feedback.
+
+<Frame>
+<img src="/images/vk-agent-log-main.png" alt="Task execution showing real-time agent logs with actions and responses" />
+</Frame>
+
+## What Happens During Execution
+
+When you start a task attempt, Vibe Kanban orchestrates several steps to create an isolated environment and execute your task:
+
+1. **Git Worktree Creation**: An isolated environment is created for this task attempt
+2. **Setup Scripts Run**: Any setup script defined in your project settings runs automatically
+3. **Agent Execution**: The coding agent processes your task using the title and description  
+4. **Real-time Monitoring**: Watch progress through streaming logs in the task interface
+5. **Follow-up Questions**: Continue the conversation after execution to refine results
+
+### Git Worktrees
+
+Vibe Kanban uses Git worktrees to create isolated environments for each task attempt. These environments are ephemeral and automatically cleaned up after execution completes.
+
+<Info>
+Worktrees ensure task attempts don't interfere with each other or your main working directory.
+</Info>
+
+## Execution Flow
+
+### 1. Setup Script
+
+The first log you'll see is your project's setup script running (if configured). This installs dependencies and prepares the environment before the agent starts working.
+
+### 2. Task Sent to Agent
+
+Your task title and description are sent to the agent. You'll see this as the initial message that kicks off the work.
+
+### 3. Real-Time Actions
+
+As the agent works, each action appears in real-time:
+
+- **Reasoning**: The agent's thought process as it analyses your task
+- **Commands**: Shell commands being executed
+- **File operations**: Files being created, modified, or deleted
+- **Tool usage**: API calls, searches, and other tool invocations
+- **Responses**: Agent messages and status updates
+
+**Expandable actions**: Click on file change actions to expand them and see exactly which part of the file was modified.
+
+### 4. Action Approvals
+
+<Note>
+Approvals are currently supported for Codex, with Claude Code coming soon.
+</Note>
+
+When an agent takes an action that requires human approval, a row appears below the action with approve/deny buttons.
+
+<Frame>
+<img src="/images/vk-approval.png" alt="Approval prompt showing tick and cross buttons to approve or deny an agent action" />
+</Frame>
+
+Click the tick to approve or the cross to deny the action. The agent will proceed or adjust based on your decision.
+
+### 5. Cleanup Script
+
+After every agent turn, your cleanup script runs (if configured). This is useful for running linters, formatters, or other post-execution tasks.
+
+### 6. Commit Messages
+
+Vibe Kanban generates commit messages based on the last message sent by the agent. These automated messages may not always be the most descriptive.
+
+<Tip>
+When merging to your base branch, use GitHub's "squash & merge" option to rewrite commits with a summary of what actually changed. Alternatively, ask your coding agent to clean up commits manually.
+</Tip>
+
+## Interacting During Execution
+
+### Keyboard Shortcuts
+
+- **Cmd/Ctrl + Enter**: Send a message to the agent
+- **Enter**: Create a new line in the message field
+- **Shift + Tab**: Switch agent profile (e.g., from PLAN to DEFAULT)
+
+### Viewing Task Details
+
+Click the task title in the top left to navigate to the task view.
+
+<Frame>
+<img src="/images/vk-task-title.png" alt="Task title in top left corner, click to view full task details" />
+</Frame>
+
+This lets you:
+- See the full task description
+- Edit the task title or description
+- View all task attempts
+
+### Editing Previous Messages
+
+<Note>
+Message editing is supported by Claude Code, Amp, Codex, Gemini, and Qwen.
+</Note>
+
+<Frame>
+<img src="/images/vk-edit-message.png" alt="Editing a previous message with options to save or cancel changes" />
+</Frame>
+
+When supported by your coding agent, you can edit previous messages in the conversation. This will revert the agent's work to that point and replay the conversation with your edited message.
+
+<Warning>
+Editing a message reverts all subsequent agent work. Use this carefully when you need to correct or clarify earlier instructions.
+</Warning>
+
+## Viewing Processes
+
+Click the triple dot icon in the top right and select **View Processes** to see all running and completed processes.
+
+<Frame>
+<img src="/images/vk-processes-dropdown.png" alt="Processes dropdown showing coding agent and development server processes" />
+</Frame>
+
+This shows:
+- Coding agent sessions
+- Development servers
+- Build scripts
+- Any other running processes
+
+Each process displays its status and execution timeline. Click any process to view its specific output logs.
+
+<Tip>
+For development server logs, the recommended way to view them is through [Testing Your Application](/core-features/testing-your-application) where you can see logs alongside the live preview.
+</Tip>
+
+## Related Documentation
+
+- [Testing Your Application](/core-features/testing-your-application) - Test your application with live preview and dev server logs
+- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Review the changes agents make
+- [Creating Projects](/core-features/creating-projects) - Configure setup and cleanup scripts
+- [Agent Configurations](/configuration-customisation/agent-configurations) - Customise agent behaviour and profiles

docs/core-features/new-task-attempts.mdx

@@ -1,10 +1,14 @@
 ---
-title: "Creating Task Attempts"
+title: "New Task Attempts"
 description: "Understand when and why to create multiple task attempts for fresh restarts with different configurations."
-sidebarTitle: "Creating Task Attempts"
+sidebarTitle: "New Task Attempts"
 ---
 
-A task attempt represents a single execution of a coding agent against a task. Most tasks only need one attempt, but you may need additional attempts for fresh restarts.
+<Frame>
+<img src="/images/vk-create-new-attempt.png" alt="Create new task attempt dialog showing configuration options" />
+</Frame>
+
+A task attempt represents a single session with a coding agent against a task. Most tasks only need one attempt, but you may need additional attempts for fresh restarts.
 
 ## When to Create New Task Attempts
 
@@ -29,8 +33,8 @@ To create a new task attempt for an existing task:
   Open the task that needs a fresh attempt.
 </Step>
 
-<Step title="Click New Attempt">
+<Step title="Click Create New Attempt">
-  In the task interface, click the **New Attempt** button.
+  Click the triple dot icon in the top right of the task, then select **Create New Attempt**.
 </Step>
 
 <Step title="Configure the attempt">
@@ -52,27 +56,7 @@ When you create a new task attempt:
 
 - **Existing subtasks** remain linked to their original parent attempt
 - **New subtasks** created from the new attempt will use the new attempt's branch as their base
-- This allows you to maintain different subtask workflows for different approaches
 
 <Info>
 For more details about how subtasks work with task attempts, see [Creating Subtasks](/core-features/subtasks).
 </Info>
-
-## What Happens Next
-
-After creating a task attempt:
-
-1. **Setup scripts run** automatically (if configured in project settings)
-2. **Agent executes** using your task title and description
-3. **Real-time monitoring** shows progress through streaming logs
-4. **Follow-up questions** can be asked to refine results
-
-For detailed task management after execution, including development server controls, git operations, and monitoring features, see [Task Details Full Screen Mode](/core-features/task-details-full-screen).
-
-## Git Worktrees
-
-Vibe Kanban uses Git worktrees to create isolated environments for each task attempt. These environments are ephemeral and automatically cleaned up after execution completes.
-
-<Info>
-Worktrees ensure task attempts don't interfere with each other or your main working directory.
-</Info>

docs/core-features/resolving-rebase-conflicts.mdx

@@ -9,29 +9,29 @@ sidebarTitle: "Resolving Rebase Conflicts"
 After clicking the rebase button, if your changes conflict with the base branch, your task status changes to "Rebase conflicts" and a conflict resolution banner appears.
 
 <Frame>
-<img src="/images/vk-rebase-conflicts-actions-pane.png" alt="Task showing rebase conflicts status with conflict resolution options" />
+<img src="/images/vk-rebase-conflicts-top.png" alt="Task showing rebase conflicts status with conflict resolution options" />
 </Frame>
 
 The conflict banner provides three options to resolve the situation:
 
 <Frame>
-<img src="/images/vk-rebase-conflicts-banner.png" alt="Conflict resolution banner showing the three available options" />
+<img src="/images/vk-rebase-banner.png" alt="Conflict resolution banner showing the three available options" />
 </Frame>
 
+- **Resolve Conflicts** - Auto-generate resolution instructions for the coding agent
 - **Open in Editor** - Manually edit conflicted files
-- **Insert Resolve-Conflicts Instructions** - Auto-generate resolution instructions for the coding agent
 - **Abort Rebase** - Cancel and return to previous state
 
 ## Resolving Conflicts Automatically
 
 The simplest solution is to let the coding agent resolve conflicts automatically:
 
-1. Click **Insert Resolve-Conflicts Instructions** from the conflict banner to generate specific instructions tailored to your conflict situation and insert them into the follow-up message area.
+1. Click **Resolve Conflicts** from the conflict banner to generate specific instructions tailored to your conflict situation and insert them into the follow-up message area.
 
-2. Review the generated instructions and click **Send** to have the agent analyse the conflicted files and complete the rebase automatically.
+2. Review the generated instructions and click **Resolve Conflicts** (the Send button changes to this) to have the agent analyse the conflicted files and complete the rebase automatically.
 
 <Frame>
-<img src="/images/vk-rebase-conflicts-prompt-zoom.png" alt="Conflict resolution banner with auto-generated instructions in the follow-up field" />
+<img src="/images/vk-rebase-conflicts-prompt.png" alt="Conflict resolution banner with auto-generated instructions in the follow-up field" />
 </Frame>
 
 Once the agent completes the resolution, your task status will show *n* commits ahead and the **Merge** button becomes available again.
@@ -42,11 +42,11 @@ If you prefer to resolve conflicts manually, you have two options:
 
 **For single files:** Use **Open in Editor** from the conflict banner to edit one conflicted file at a time. After resolving and refreshing the page, you can press the button again for the next file.
 
-**For multiple files (recommended):** Use the **Open in [Your IDE]** button from the Actions pane to open all worktree files in your chosen IDE, where you can resolve all conflicts at once.
+**For multiple files (recommended):** Click the triple dot icon at the top right of the task and select **Open in [Your IDE]** to open all worktree files in your chosen IDE, where you can resolve all conflicts at once.
 
 <Steps>
 <Step title="Open your IDE">
-  Click **Open in [Your IDE]** from the Actions pane to access all worktree files, or use **Open in Editor** from the banner for individual files.
+  Click the triple dot icon at the top right and select **Open in [Your IDE]** to access all worktree files, or use **Open in Editor** from the banner for individual files.
 </Step>
 
 <Step title="Edit conflicted files">
@@ -75,10 +75,34 @@ If you prefer to resolve conflicts manually, you have two options:
 </Step>
 </Steps>
 
+<Tip>
+Automatic resolution works best for most conflicts. Use manual resolution only when you need precise control over the merge decisions.
+</Tip>
+
 ## Aborting a Rebase
 
 If you need to cancel the rebase entirely, click **Abort Rebase** to return to the "Rebase needed" state. You can then try rebasing again or create a new task attempt from the updated base branch.
 
-<Tip>
+## Rebasing onto a Different Base Branch
-Automatic resolution works best for most conflicts. Use manual resolution only when you need precise control over the merge decisions.
+
-</Tip>
+If you've changed the base branch of your task attempt and see commits unrelated to your changes, you can use `git rebase --onto` to rebase only your work onto the new base:
+
+```bash
+git rebase <last-commit-before-your-work> --onto <new-base>
+```
+
+### Example Scenario
+
+You accidentally created a task attempt from the `develop` branch, but it should have been based on `main`. After changing the base branch to `main` in the task settings, you see commits from `develop` that aren't part of your work:
+
+```bash
+# Find the last commit before your work started (e.g., in the git log)
+# Then rebase only your commits onto main
+git rebase 64d504c94d076070d17affd3f84be63b34515445 --onto main
+```
+
+This command takes your commits (everything after the specified commit hash) and replays them onto `main`, excluding the unrelated commits from `develop`.
+
+<Warning>
+Use `git rebase --onto` carefully. Make sure you identify the correct commit hash—the last commit that isn't part of your current task. Consider creating a backup branch first: `git branch backup-branch`.
+</Warning>

docs/core-features/reviewing-code-changes.mdx

@@ -8,18 +8,18 @@ When a coding agent completes a task, it automatically moves to the **In Review*
 <video
   controls
   className="w-full aspect-video rounded-xl"
-  src="https://vkcdn.britannio.dev/vk-code-review-2.mp4"
+  src="https://vkcdn.britannio.dev/showcase/flat-task-panel/vk-onb-code-review-3.mp4"
 ></video>
 
 ## Opening the Code Review Interface
 
 <Steps>
 <Step title="Access the task">
-  Click on any task in the **In Review** column to open it in full screen mode.
+  Click on any task in the **In Review** column to open it.
 </Step>
 
-<Step title="Navigate to the Diffs tab">
+<Step title="View the diffs">
-  Once the task is open, click on the **Diffs** tab to view all the code changes made by the agent.
+  Click the **Diff icon** to view all the code changes made by the agent.
 </Step>
 </Steps>
 
@@ -59,36 +59,14 @@ You can create several review comments across different files in the same review
 Review comments are not submitted individually. They are collected and sent as a complete review when you submit your feedback.
 </Note>
 
-## General Review Comments
-
-In addition to line-specific feedback, you can provide general comments about the entire implementation:
-
-<Steps>
-<Step title="Use the task chat">
-  Navigate to the task chat field at the bottom of the review interface.
-</Step>
-
-<Step title="Add general feedback">
-  Enter broader comments about the implementation, such as:
-  - Overall code quality assessment
-  - Architectural concerns
-  - Performance considerations
-  - Testing requirements
-</Step>
-</Steps>
-
 ## Submitting Your Review
 
 <Steps>
-<Step title="Review all comments">
-  Before submitting, review all the line-specific and general comments you've added.
-</Step>
-
 <Step title="Submit the review">
   Click the **Send** button to send all your feedback to the coding agent.
 
   <Info>
-  All comments (line-specific and general) are combined into a single message for the coding agent to address.
+  All comments are combined into a single message for the coding agent to address.
   </Info>
 </Step>
 

docs/core-features/subtasks.mdx

@@ -8,7 +8,7 @@ Subtasks allow you to break down complex tasks into smaller, more manageable pie
 ## Creating Subtasks
 
 <Frame>
-<img src="/images/screenshot-create-subtask-button.png" alt="Current attempt toolbar showing the Create Subtask button with GitFork icon" />
+<img src="/images/vk-create-subtask-button.png" alt="Current attempt toolbar showing the Create Subtask button with GitFork icon" />
 </Frame>
 
 To create a subtask from an existing task attempt:
@@ -19,7 +19,7 @@ To create a subtask from an existing task attempt:
 </Step>
 
 <Step title="Click Create Subtask">
-  In the actions toolbar, click the **Create Subtask** button (marked with a fork icon).
+  Click the triple dot icon in the top right of the task, then select **Create Subtask**.
 </Step>
 
 <Step title="Fill in subtask details">

docs/core-features/task-details-full-screen.mdx

@@ -1,153 +0,0 @@
----
-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

docs/core-features/testing-your-application.mdx

@@ -1,11 +1,14 @@
 ---
-title: "Preview Mode"
+title: "Testing Your Application"
 description: "Live preview your web applications with embedded browser viewing and precise component selection for seamless development workflows"
+sidebarTitle: "Testing Your Application"
 ---
 
-<Frame>
+<video
-<img src="/images/preview-mode-overview.png" alt="Preview mode overview showing component selection and hierarchy" />
+  controls
-</Frame>
+  className="w-full aspect-video rounded-xl"
+  src="https://vkcdn.britannio.dev/showcase/flat-task-panel/vk-onb-companion-demo-3.mp4"
+></video>
 
 ## Overview
 
@@ -14,16 +17,9 @@ Preview Mode provides an embedded browser experience within Vibe Kanban, allowin
 **Key Benefits:**
 - **Embedded viewing**: See your application running directly in Vibe Kanban
 - **Precise component selection**: Click to select specific UI components for targeted feedback
+- **Dev Server Logs**: Monitor development server output with expandable/collapsible logs at the bottom
 - **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
 
 <Steps>
@@ -40,6 +36,10 @@ Before using Preview Mode, ensure you have:
   <img src="/images/preview-mode-dev-script-config.png" alt="Development server script configuration interface" />
   </Frame>
 
+  <Info>
+  You may also need to configure a setup script (e.g., `npm install`) to install dependencies before the development server starts. Configure this in project settings under Setup Scripts.
+  </Info>
+
   <Tip>
   Ensure your development server prints the URL (e.g., `http://localhost:3000`) to stdout/stderr for automatic detection.
   </Tip>
@@ -125,7 +125,7 @@ Before using Preview Mode, ensure you have:
 </Step>
 
 <Step title="Start Development Server">
-  In your task's full screen mode, click the **Dev** button (▶️) to start your development server.
+  In the Preview section, click the **Start Dev Server** button to start your development server.
 
   <Frame>
   <img src="/images/preview-mode-start-dev-server.png" alt="Starting development server from task interface" />
@@ -133,7 +133,7 @@ Before using Preview Mode, ensure you have:
 
   The system will:
   - Launch your configured development script
-  - Monitor the output for URL detection
+  - Detect the URL of your website and load it
 </Step>
 </Steps>
 
@@ -143,12 +143,12 @@ Before using Preview Mode, ensure you have:
 
 Once your development server is running and a URL is detected:
 
-1. **Navigate to Preview tab** in the task details panel
+1. **Click the Preview button** (eye icon) in the task interface
 2. **View embedded application** in the iframe
 3. **Interact with your app** directly within Vibe Kanban
 
 <Frame>
-<img src="/images/preview-mode-interface.png" alt="Preview mode showing embedded application with toolbar controls" />
+<img src="/images/vk-preview-interface.png" alt="Preview mode showing embedded application with toolbar controls" />
 </Frame>
 
 ### Preview Toolbar Controls
@@ -156,12 +156,21 @@ Once your development server is running and a URL is detected:
 The preview toolbar provides essential controls for managing your preview experience:
 
 <Frame>
-<img src="/images/preview-mode-toolbar.png" alt="Preview toolbar showing refresh, copy URL, and open in browser controls" />
+<img src="/images/vk-preview-toolbar.png" alt="Preview toolbar showing refresh, copy URL, open in browser, and stop server controls" />
 </Frame>
 
 - **Refresh**: Reload the preview iframe
 - **Copy URL**: Copy the development server URL to clipboard
 - **Open in Browser**: Open the application in your default browser
+- **Stop Dev Server**: Stop the running development server
+
+### Dev Server Logs
+
+At the bottom of the Preview panel, you'll find Dev Server Logs that can be expanded or collapsed. These logs show real-time output from your development server, making it easy to monitor server activity, errors, and debugging information without leaving the preview.
+
+<Frame>
+<img src="/images/vk-dev-server-logs.png" alt="Dev Server Logs showing expandable/collapsible log output at bottom of preview" />
+</Frame>
 
 ### Component Selection
 
@@ -172,7 +181,7 @@ When the Web Companion is installed, you can precisely select UI components for
   Click the floating Vibe Kanban companion button in the bottom-right corner of your application to activate component selection mode.
 
   <Frame>
-  <img src="/images/preview-mode-component-selection.png" alt="Component selection interface showing selectable elements highlighted" />
+  <img src="/images/vk-component-selection.png" alt="Component selection interface showing selectable elements highlighted" />
   </Frame>
 </Step>
 
@@ -215,7 +224,6 @@ URLs using `0.0.0.0` or `::` are automatically converted to `localhost` for embe
 
 ## Related Documentation
 
-- [Task Details Full Screen Mode](/core-features/task-details-full-screen) - Complete guide to full screen task management
+- [New Task Attempts](/core-features/new-task-attempts) - Learn about task attempt lifecycle
-- [Creating Task Attempts](/core-features/creating-task-attempts) - Learn about task attempt lifecycle
 - [Reviewing Code Changes](/core-features/reviewing-code-changes) - Analyse and review code modifications
 - [Configuration & Customisation](/configuration-customisation/global-settings) - Customise Vibe Kanban settings

docs/docs.json

@@ -3,7 +3,9 @@
   "theme": "mint",
   "name": "Vibe Kanban",
   "description": "A kanban board for developers to track coding tasks with AI coding agents",
-
+  "appearance": {
+    "default": "light"
+  },
   "colors": {
     "primary": "#000000",
     "light": "#fefefe",
@@ -23,7 +25,22 @@
         "pages": [
           "index",
           "getting-started",
-          "supported-coding-agents"
+          {
+            "group": "Supported Coding Agents",
+            "expanded": true,
+            "pages": [
+              "supported-coding-agents",
+              "agents/claude-code",
+              "agents/openai-codex",
+              "agents/github-copilot",
+              "agents/gemini-cli",
+              "agents/amp",
+              "agents/cursor-cli",
+              "agents/opencode",
+              "agents/ccr",
+              "agents/qwen-code"
+            ]
+          }
         ]
       },
       {
@@ -31,12 +48,18 @@
         "pages": [
           "core-features/creating-projects",
           "core-features/creating-tasks",
-          "core-features/subtasks",
+          "core-features/monitoring-task-execution",
-          "core-features/creating-task-attempts",
+          "core-features/testing-your-application",
           "core-features/reviewing-code-changes",
-          "core-features/resolving-rebase-conflicts",
+          "core-features/completing-a-task"
-          "core-features/task-details-full-screen",
+        ]
-          "core-features/preview-mode"
+      },
+      {
+        "group": "Advanced Features",
+        "pages": [
+          "core-features/subtasks",
+          "core-features/new-task-attempts",
+          "core-features/resolving-rebase-conflicts"
         ]
       },
       {
@@ -96,7 +119,8 @@
   },
   "footer": {
     "socials": {
-      "github": "https://github.com/BloopAI/vibe-kanban"
+      "github": "https://github.com/BloopAI/vibe-kanban",
+      "x": "https://x.com/vibekanban"
     }
   }
 }

docs/getting-started.mdx

@@ -19,10 +19,6 @@ Before installing Vibe Kanban, ensure you have:
 - **Node.js**: Latest LTS version recommended
 - **Coding agent authentication**: Authenticate with your preferred coding agents outside of Vibe Kanban
 
-<Info>
-All supported coding agents can be used via npx without separate installation. You can find authentication instructions for each coding agent on their respective [websites](./supported-coding-agents).
-</Info>
-
 ## Safety Notice
 
 <Warning>
@@ -33,6 +29,10 @@ Agents can still perform system-level actions, so review their work and keep bac
 ## Installation & Setup
 
 <Steps>
+<Step title="Authenticate with a coding agent">
+  Before launching Vibe Kanban, ensure you're authenticated with at least one [supported coding agent](/supported-coding-agents). Follow the installation and authentication instructions for your preferred agent.
+</Step>
+
 <Step title="Install and launch Vibe Kanban">
   Open a terminal and run:
 
@@ -50,7 +50,7 @@ Agents can still perform system-level actions, so review their work and keep bac
 </Step>
 
 <Step title="Create your first project">
-  You'll land on an empty Projects page. Click "Create your first project" to set up your initial project.
+  You'll land on the Projects page, populated with your three most recently active git projects if automatically discovered. Click "Create project" to add more projects.
 </Step>
 
 <Step title="Add tasks">

docs/index.mdx

@@ -1,46 +1,33 @@
 ---
 title: "Vibe Kanban Documentation"
-description: "A specialised kanban board designed for developers who want to track and manage their coding tasks while working with AI coding agents. It provides seamless integration with various coding agents and helps you organise your development workflow efficiently."
+description: "Orchestrate AI coding agents with confidence. Plan, review, and manage AI-generated code in isolated git worktrees with complete control."
 sidebarTitle: "Home"
 ---
 
 ## What is Vibe Kanban?
 
-Vibe Kanban transforms how developers work with AI coding agents by providing:
+Vibe Kanban is an **orchestration platform for AI coding agents** that helps developers plan, review, and safely execute AI-assisted coding tasks. Each task runs in an isolated git worktree, giving you complete control over your codebase whilst leveraging the power of AI assistants.
 
-- **Task Management**: Create, organise, and track coding tasks on an intuitive kanban board
+<Frame>
-- **AI Agent Integration**: Works with popular coding agents like Amp, Claude Code, Cursor CLI, and more
+  <img src="/images/vibe-kanban-screenshot-overview.png"  />
-- **Git Integration**: Automatic branch management and pull request tracking
+</Frame>
-- **Workspace Management**: Organise multiple projects with custom setup scripts
-- **Real-time Progress Tracking**: Monitor task attempts and coding agent execution
 
-## Key Features
+## Why Vibe Kanban?
 
-<CardGroup cols={2}>
+<CardGroup cols={3}>
-  <Card title="Multi-Agent Support" icon="robot" href="/supported-coding-agents">
+  <Card title="Safe AI Execution" icon="shield-check">
-    Integrate with 8+ popular AI coding agents via npx - no separate installation required
+    Every task runs in an isolated git worktree. Agents can't interfere with each other or your main branch.
   </Card>
 
-  <Card title="Project Management" icon="folder" href="/core-features/creating-projects">
+  <Card title="Multi-Agent Support" icon="users">
-    Organise your repositories with custom setup scripts and development workflows
+    Switch between Claude Code, OpenAI Codex, Amp, Cursor CLI, Gemini, and other agents without changing workflows.
   </Card>
 
-  <Card title="Task Tracking" icon="list-check" href="/core-features/creating-tasks">
+  <Card title="Visual Code Review" icon="code-compare">
-    Create and manage coding tasks with templates, descriptions, and progress tracking
+    Review AI changes with line-by-line diffs, add comments, and send feedback back to the agent.
-  </Card>
-
-  <Card title="Git Integration" icon="code-branch" href="/integrations/github-integration">
-    Automatic branch creation, PR management, and GitHub status synchronisation
   </Card>
 </CardGroup>
 
-## Quick Start
-
-Ready to get started? Follow our getting started guide to install and configure Vibe Kanban:
-
-<Card title="Get Started" icon="rocket" href="/getting-started">
-  Install Vibe Kanban and complete the setup process in minutes
-</Card>
 
 ## Need Help?
 

docs/integrations/github-integration.mdx

@@ -1,43 +1,11 @@
 ---
 title: "GitHub Integration"
-description: "Connect to GitHub to unlock seamless branch management and pull request workflows directly from your kanban board"
+description: "Connect to GitHub to create pull requests and manage your workflow directly from Vibe Kanban"
 ---
 
-Connect your GitHub account to push commits and create pull requests directly from task attempts.
+Connect your GitHub account to create pull requests and push changes directly from task attempts.
 
-## See It In Action
+## Connect Your GitHub Account
-
-### Pull Request Creation Dialog
-
-<Frame>
-<img src="/images/vk-create-pr.png" alt="Pull request creation dialog with title, description, and base branch selection" />
-</Frame>
-
-When you're ready to create a PR, get a streamlined dialog that:
-- Pre-fills title and description from your task details
-- Lets you select the target branch (defaults to main/master)
-- Validates that your branch is ready to go
-- Provides direct links to your new pull request
-
-### Smart Push/PR Button
-
-<Frame>
-<img src="/images/task-attempt-push-button.png" alt="Task attempt interface showing dynamic push/PR button" />
-</Frame>
-
-Each task attempt gets a smart button that adapts to your current state:
-- **"Create PR"** when ready to share your work
-- **"Push X commits"** when you have changes to upload  
-- **"Push to PR"** when updating an existing pull request
-- **"Pushed!"** confirmation after successful operations
-
-<Note>
-Each task attempt automatically creates an isolated git worktree, so you can work on multiple features simultaneously without conflicts.
-</Note>
-
-## Getting Started
-
-### Connect Your GitHub Account
 
 <Frame>
 <img src="/images/github-connect-settings.png" alt="Settings page with Connect GitHub Account button" />
@@ -62,25 +30,6 @@ The authentication process is simple:
 If you encounter permission issues when creating pull requests, you'll be prompted to provide a Personal Access Token as a fallback authentication method.
 </Note>
 
-### Start Working with GitHub
+## Related Documentation
 
-<Steps>
+- [Completing a Task](/core-features/completing-a-task) - Learn how to create pull requests and manage branches
-<Step title="Create or Import Projects">
-[Create projects](/core-features/creating-projects) from existing Git repositories to enable GitHub features.
-</Step>
-
-<Step title="Work on Tasks">
-[Create task attempts](/core-features/creating-task-attempts) to start developing in isolated branches.
-</Step>
-
-<Step title="Push and Create PRs">
-Use the dynamic push/PR button in task attempts to share your work on GitHub.
-</Step>
-</Steps>
-
-## Next Steps
-
-With GitHub connected, you can:
-- [Learn about creating projects](/core-features/creating-projects)
-- [Set up task attempts for feature development](/core-features/creating-task-attempts) 
-- [Review code changes before committing](/core-features/reviewing-code-changes)

docs/integrations/vscode-extension.mdx

@@ -92,8 +92,8 @@ The extension provides an integrated workspace view with three main components:
   Navigate to your project's kanban board and create or select an existing task.
 </Step>
 
-<Step title="Open task in full screen">
+<Step title="Open task">
-  Click on the task to open its detailed view, then switch to full screen mode for better visibility.
+  Click on the task to open its detailed view.
 </Step>
 
 <Step title="Launch IDE integration">

docs/supported-coding-agents.mdx

@@ -3,199 +3,44 @@ title: "Supported Coding Agents"
 description: "Complete guide to all coding agents supported by Vibe Kanban, including installation and authentication instructions"
 ---
 
-Vibe Kanban integrates with a variety of coding agents. These agents are available via `npx` and can be selected when creating task attempts.
+Vibe Kanban integrates with a variety of coding agents. Each agent requires installation and authentication before use. Select your preferred agent when creating task attempts.
 
-<AccordionGroup>
+## Available Agents
 
-<Accordion title="Claude Code" icon="code">
+<CardGroup cols={2}>
-**Anthropic's Claude Code**
+<Card title="Claude Code" icon="https://www.vibekanban.com/images/logos/claude.svg" href="/agents/claude-code">
+Claude Code CLI
+</Card>
 
-## Installation
+<Card title="OpenAI Codex" icon="https://www.vibekanban.com/images/logos/openai-logo.svg" href="/agents/openai-codex">
-Claude Code is now available via npx - no separate installation required!
+OpenAI Codex CLI
+</Card>
 
-## Authentication
+<Card title="GitHub Copilot" icon="https://www.vibekanban.com/images/logos/github-copilot-logo.svg" href="/agents/github-copilot">
-You need to authenticate with Claude Code outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Claude Code GitHub page](https://github.com/anthropics/claude-code).
+GitHub Copilot CLI
-</Accordion>
+</Card>
 
-<Accordion title="OpenAI Codex" icon="code">
+<Card title="Gemini CLI" icon="https://www.vibekanban.com/images/logos/gemini-logo.svg" href="/agents/gemini-cli">
-**OpenAI Codex integration**
+Google Gemini CLI
+</Card>
 
-## Installation
+<Card title="Amp" icon="https://www.vibekanban.com/images/logos/amp-logo.svg" href="/agents/amp">
-OpenAI Codex is now available via `npx` - no separate installation required!
+Amp Code
+</Card>
 
-## Authentication
+<Card title="Cursor CLI" icon="https://www.vibekanban.com/images/logos/cursor-logo-light.png" href="/agents/cursor-cli">
-You need to authenticate with OpenAI Codex outside of Vibe Kanban before using it. Please follow the authentication instructions from the [OpenAI help center](https://help.openai.com/en/articles/11369540-using-codex-with-your-chatgpt-plan) to use Codex with your ChatGPT plan.
+Cursor CLI agent
+</Card>
 
-Alternatively, Codex can be used via the OpenAI API by setting the `OPENAI_API_KEY` environment variable. For more details, see the [OpenAI documentation](https://developers.openai.com/codex/pricing/#use-an-openai-api-key)
+<Card title="OpenCode" icon="https://www.vibekanban.com/images/logos/opencode-light.svg" href="/agents/opencode">
-</Accordion>
+SST OpenCode
+</Card>
 
-<Accordion title="Amp" icon="code">
+<Card title="Claude Code Router" icon="https://www.vibekanban.com/images/logos/claude.svg#" href="/agents/ccr">
-**Amp code completion agent**
+Claude Code Router - orchestrate multiple models
+</Card>
 
-## Installation
+<Card title="Qwen Code" icon="https://www.vibekanban.com/images/logos/qwen-logo.png#" href="/agents/qwen-code">
-Amp is now available via npx - no separate installation required!
+Qwen Code CLI
-
+</Card>
-## Authentication
+</CardGroup>
-You need to authenticate with Amp outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Amp Owner's Manual](https://ampcode.com/manual#install).
-</Accordion>
-
-<Accordion title="GitHub Copilot" icon="code">
-**GitHub Copilot CLI**
-
-## Installation
-GitHub Copilot CLI is available via npm. Install it globally:
-
-```bash
-npm install -g @github/copilot
-```
-
-## Prerequisites
-- A GitHub Copilot subscription
-- Node.js version 22 or later
-- npm version 10 or later
-
-## Authentication
-When you first start Copilot CLI, you'll be prompted to authenticate. Follow the on-screen instructions to log in to your GitHub account using the `/login` command. For more details, see the [GitHub Copilot CLI documentation](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/use-copilot-cli).
-</Accordion>
-
-<Accordion title="Cursor CLI" icon="code">
-**Cursor's command-line agent**
-
-## Installation
-Install Cursor CLI using the official guide: https://docs.cursor.com/en/cli/installation. On most systems you can run `curl https://cursor.com/install -fsS | bash`, then verify with `cursor-agent --version`.
-
-## Authentication
-Sign in with `cursor-agent login` (opens a browser). You can also set the `CURSOR_API_KEY=...` environment variable. Full instructions: https://docs.cursor.com/en/cli/reference/authentication
-</Accordion>
-
-<Accordion title="CCR (Claude Code Router)" icon="code">
-**Orchestrate multiple Claude Code models**
-
-CCR (Claude Code Router) lets you route coding prompts across different LLM providers and models, and select specialised models for specific tasks like long context, background work, or image understanding.
-
-## Installation
-CCR is available via `npx` – no separate installation required.
-
-```bash
-npx -y @musistudio/claude-code-router ui
-```
-
-This launches the CCR local UI where you configure providers and models.
-
-## Authentication
-Authenticate and configure CCR outside of Vibe Kanban. Follow the instructions on the CCR GitHub repo:
-
-- GitHub: https://github.com/musistudio/claude-code-router
-
-You'll add providers, set API keys, and register model names in the CCR UI or via CCR's JSON configuration (see the CCR repo for the schema and file location).
-
-## Configure CCR (Providers and Models)
-
-Configure CCR either via the UI or JSON config.
-
-In the CCR UI (`npx -y @musistudio/claude-code-router ui`):
-
-1) Add providers
-- Choose a provider (e.g., `openrouter`, `deepseek`, etc.).
-- Enter the required API key(s) and settings for that provider.
-
-2) Add models
-- For each provider, register the model identifier (e.g., `moonshotai/kimi-k2-0905`, `deepseek-chat`).
-- CCR supports configuring different models for specific cases:
-  - `default`: general coding
-  - `background`: lightweight/background operations
-  - `think`: models that support "thinking" modes
-  - `longContext`: very long inputs/files
-  - `webSearch`: models that support web/tool use
-  - `image`: models with vision capabilities
-
-Note: not all models support web search, thinking, or images. Choose models accordingly in the CCR UI.
-
-### Configure via JSON (optional)
-CCR can also be configured via its JSON configuration file. Refer to the CCR GitHub documentation for the exact schema, keys, and file location. Define providers (with API keys) and map the model cases (`default`, `background`, `think`, `longContext`, `webSearch`, `image`) to specific provider/model pairs.
-
-### Example: OpenRouter provider configured in CCR UI
-
-<Frame>
-<img src="/images/ccr-openrouter-ui.png" alt="OpenRouter configured in CCR UI" />
-</Frame>
-
-### Example: CCR model mapping (default/background/think/etc.)
-
-<Frame>
-<img src="/images/ccr-config-example.png" alt="CCR models configuration example" />
-</Frame>
-
-## Configure Vibe Kanban
-
-Vibe Kanban does not ship a default configuration for CCR. Add configurations to the existing Claude Code agent:
-
-1) Open the "Coding Agent Configurations" page.
-2) Add a new configuration for the Claude Code agent (or edit an existing one).
-3) Enable the `claude_code_router` checkbox.
-4) Optionally set a model string to target a specific CCR provider/model.
-
-See the [Agent Profiles & Variants](/configuration-customisation/agent-configurations) guide for managing agent configurations.
-
-Model string format: `<provider>,<model-name>`
-
-Examples:
-```text
-openrouter,moonshotai/kimi-k2-0905
-deepseek,deepseek-chat
-```
-
-Tips:
-- Create multiple configurations if you want easy switching between different models.
-- Leave the model string empty if you want CCR to use its own routing based on your CCR UI configuration (e.g., its `default`/`longContext`/etc. mappings).
-
-### Example: Claude Code agent configuration in Vibe Kanban
-
-<Frame>
-<img src="/images/vk-ccr-agent-config.png" alt="Claude Code agent configuration in Vibe Kanban" />
-</Frame>
-
-## Using CCR in Vibe Kanban
-
-When creating a Task Attempt, select the coding agent and configuration: choose the Claude Code agent, then pick one of your CCR-enabled configurations.
-
-## Troubleshooting
-
-- Authentication errors: verify your API keys/provider settings in CCR (via UI or JSON config).
-- Model not found: confirm the model identifier is correct for the chosen provider.
-- Missing features (webSearch/think/image): switch to a model that supports the capability and update your CCR mapping (via UI or JSON config).
-</Accordion>
-
-
-
-<Accordion title="Gemini CLI" icon="code">
-**Google Gemini CLI**
-
-## Installation
-Gemini CLI is now available via npx - no separate installation required!
-
-## Authentication
-You need to authenticate with Gemini CLI outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Gemini CLI GitHub page](https://github.com/google-gemini/gemini-cli).
-</Accordion>
-
-<Accordion title="OpenCode" icon="code">
-**SST's OpenCode**
-
-## Installation
-OpenCode is now available via `npx` - no separate installation required!
-
-## Authentication
-You need to authenticate with OpenCode outside of Vibe Kanban before using it. Please follow the authentication instructions on the [OpenCode GitHub page](https://github.com/sst/opencode).
-</Accordion>
-
-<Accordion title="Qwen Code" icon="code">
-**Qwen code-focused assistant**
-
-## Installation
-Qwen Code is available via npx - no separate installation required!
-
-## Authentication
-You need to authenticate with Qwen outside of Vibe Kanban before using it. Please follow the authentication instructions in the official Qwen documentation: https://github.com/QwenLM/qwen-code
-</Accordion>
-
-</AccordionGroup>