diff --git a/apps/site/content/docs/en/assistant-workspace.mdx b/apps/site/content/docs/en/assistant-workspace.mdx
new file mode 100644
index 0000000..22942a2
--- /dev/null
+++ b/apps/site/content/docs/en/assistant-workspace.mdx
@@ -0,0 +1,62 @@
+---
+title: Assistant Workspace
+description: Manage Claude's project context, behavior settings, and automation workflows.
+---
+
+# Assistant Workspace
+
+The Assistant Workspace lets you configure project-level context and behavior for Claude. You can define Claude's role, memory, and automation workflows so it maintains a consistent working state across conversations.
+
+## Opening the Workspace
+
+Go to **Settings > Assistant** tab to manage all Assistant Workspace configurations.
+
+## Workspace Path
+
+The workspace path specifies the project directory Claude works in. Once set, Claude automatically uses that directory as context for file operations and code analysis during conversations.
+
+## Onboarding Setup
+
+Onboarding setup is a prompt that runs automatically at the start of each new conversation. When enabled, the first message of every new conversation triggers the onboarding workflow.
+
+Typical uses:
+- Have Claude read the project's README and key configuration files
+- Understand the project architecture and coding conventions
+- Load essential context information
+
+### Configuration
+
+1. Find the **Onboarding Setup** section in the **Assistant** tab
+2. Toggle the switch to enable onboarding setup
+3. Write the onboarding prompt in the text box
+4. Save
+
+## Daily Check-in
+
+Daily check-in is a periodic context-refresh prompt that runs automatically. When enabled, Claude re-evaluates the project state at the configured interval.
+
+Typical uses:
+- Periodically review project progress
+- Refresh file change status
+- Update Claude's awareness of the current project state
+
+### Configuration
+
+1. Find the **Daily Check-in** section in the **Assistant** tab
+2. Toggle the switch to enable daily check-in
+3. Write the check-in prompt
+4. Save
+
+## Use Cases
+
+### Personal Project Maintenance
+
+Configure onboarding setup for long-term projects so Claude can quickly understand the current state of the project in every conversation, without you having to re-explain the background each time.
+
+### Team Collaboration
+
+Set up a unified workspace configuration to ensure team members follow the same coding standards and workflows when using Claude.
+
+### Complex Project Management
+
+Combine onboarding setup with daily check-in to keep Claude continuously aware of the project context during long-running tasks.
diff --git a/apps/site/content/docs/en/assistant-workspace/index.mdx b/apps/site/content/docs/en/assistant-workspace/index.mdx
deleted file mode 100644
index 860c20f..0000000
--- a/apps/site/content/docs/en/assistant-workspace/index.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Assistant Workspace
-description: Inspect and manage Claude's working environment.
----
-
-The Assistant Workspace gives you visibility into what Claude is doing during a conversation. It shows file changes, tool usage, and the current state of Claude's working context.
-
-## Features
-
-### File Inspector
-
-View the files that Claude has read or modified during the conversation:
-
-- **File tree** — Browse the project directory structure
-- **Diff view** — See exactly what changes Claude made to each file
-- **File preview** — Preview files with syntax highlighting
-
-### Tool Activity
-
-Monitor Claude's tool usage in real time:
-
-- See which tools Claude is calling and why
-- View tool input/output for debugging
-- Track the sequence of operations
-
-### Context Usage
-
-Track how much of Claude's context window is being used:
-
-- **Token count** — Current tokens used vs. available
-- **Usage breakdown** — How tokens are distributed across messages, tools, and system context
-- **Cost estimate** — Approximate cost based on the active provider's pricing
-
-## Opening the Workspace
-
-The workspace can be configured from:
-
-- Go to **Settings** and open the **Assistant** section (`/settings#assistant`)
-
-The workspace panel appears as a resizable side panel alongside the chat, and can be toggled from the chat header.
-
-## Use Cases
-
-- **Code Review** — Review all file changes Claude has made before committing
-- **Debugging** — Inspect tool calls when something isn't working as expected
-- **Learning** — Understand how Claude approaches problems by watching its tool usage
-- **Cost Management** — Monitor token usage to stay within budget
diff --git a/apps/site/content/docs/en/bridge.mdx b/apps/site/content/docs/en/bridge.mdx
new file mode 100644
index 0000000..24260ee
--- /dev/null
+++ b/apps/site/content/docs/en/bridge.mdx
@@ -0,0 +1,54 @@
+---
+title: Message Bridge
+description: Bridge Claude conversations to messaging platforms.
+---
+
+CodePilot's Message Bridge lets you interact with Claude from external messaging platforms. Start a conversation on your desktop, then continue it from your phone via Discord, Telegram, Feishu (Lark), or QQ.
+
+## Supported Platforms
+
+| Platform | Features |
+|----------|----------|
+| **Discord** | Full message bridge with bot integration |
+| **Telegram** | Direct message bridge via bot |
+| **Feishu/Lark** | Enterprise messaging bridge |
+| **QQ** | Bridge via QQ bot platform |
+
+## Setup
+
+### Discord
+
+1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Discord bridge
+2. Create a Discord bot at [discord.com/developers](https://discord.com/developers/applications)
+3. Copy the bot token and paste it into CodePilot
+4. Invite the bot to your Discord server
+5. Specify the channel ID where the bridge should operate
+6. Click **Enable**
+
+### Telegram
+
+1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Telegram bridge
+2. Create a bot via [@BotFather](https://t.me/BotFather) on Telegram
+3. Copy the bot token and paste it into CodePilot
+4. Click **Enable**
+5. Send a message to your bot to start bridging
+
+### Feishu/Lark
+
+1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Feishu bridge
+2. Create an app in the [Feishu Open Platform](https://open.feishu.cn)
+3. Configure the app credentials (App ID and App Secret)
+4. Set up event subscriptions
+5. Click **Enable**
+
+## How It Works
+
+1. **Desktop to Mobile**: Messages you send in CodePilot are forwarded to the configured platform
+2. **Mobile to Desktop**: Messages from the platform are sent to Claude, and responses are forwarded back
+3. **Background Mode**: CodePilot can run in system tray mode, keeping the bridge active even when the window is closed
+
+## Bridge Modes
+
+- **Interactive Mode** — Full bidirectional messaging
+- **System Tray Mode** — Minimize to tray, bridge stays active in background
+- **Notification Only** — Only receive notifications, no message forwarding
diff --git a/apps/site/content/docs/en/bridge/discord.mdx b/apps/site/content/docs/en/bridge/discord.mdx
new file mode 100644
index 0000000..a49d4f4
--- /dev/null
+++ b/apps/site/content/docs/en/bridge/discord.mdx
@@ -0,0 +1,70 @@
+---
+title: Discord
+description: Configure the Discord Bot bridge.
+---
+
+# Discord Bridge
+
+Chat with Claude through a Discord Bot. Supports both server channels and DMs, with streaming message preview.
+
+## Create a Discord Bot
+
+1. Go to the [Discord Developer Portal](https://discord.com/developers/applications)
+2. Click **New Application** and enter an application name
+3. Select **Bot** in the left menu
+4. Click **Reset Token** to get the Bot Token; copy it for later use
+5. In the Bot settings, enable the following **Privileged Gateway Intents**:
+   - **Message Content Intent** — Required; the Bot needs to read message content
+   - **Server Members Intent** — Optional; used for user identity verification
+6. Select **OAuth2 > URL Generator** in the left menu
+7. Check Scopes: `bot`
+8. Check Bot Permissions: `Send Messages`, `Read Message History`, `Embed Links`
+9. Copy the generated invite link and open it in your browser
+10. Select your server and authorize the Bot to join
+
+## Configure in CodePilot
+
+1. Click **Bridge** in the sidebar, then switch to the **Discord** tab
+2. Paste the Bot Token in the **Bot Credentials** section
+3. Click **Test Connection** to verify
+4. Configure access control (to get IDs you need to enable Discord's **Developer Mode**: open Discord Settings > **Advanced** > enable **Developer Mode**, then you can right-click to copy various IDs):
+   - **Allowed Users** — Right-click a user > **Copy User ID**; separate multiple IDs with commas
+   - **Allowed Channels** — Right-click a channel > **Copy Channel ID**; restricts the Bot to specific channels
+   - **Allowed Servers** — Right-click a server icon > **Copy Server ID**; restricts the Bot to specific servers
+5. Configure group policy:
+   - **Open** — Bot responds in all allowed servers/channels
+   - **Disabled** — Bot only responds in DMs
+6. (Optional) **Require @mention** — When enabled, the Bot only responds to messages that @mention it
+7. Click **Save**
+
+## Enable the Bridge
+
+1. Go back to the Bridge overview page
+2. Make sure the **Discord** channel toggle is on
+3. Make sure the Bridge master switch is on
+4. Click **Start**
+
+## Streaming Preview
+
+The Discord bridge supports streaming message preview, updating the message in real time as Claude generates a reply. Parameters:
+
+- **Minimum update characters** — Default 40
+- **Minimum update interval** — Default 1500 ms
+- **Maximum message length** — Default 1900 characters
+
+## Message Format
+
+Discord natively supports Markdown, so Claude's replies are sent directly in Markdown format. Overly long messages are automatically split into chunks (max 2000 characters each).
+
+## Troubleshooting
+
+### Bot is online but not responding
+
+1. Confirm **Message Content Intent** is enabled (Developer Portal > Bot settings)
+2. Confirm the Bot has **Send Messages** and **View Channel** permissions for the channel
+3. If you configured allowed channels/users/servers lists, confirm the corresponding IDs are correct
+4. If **Require @mention** is enabled, make sure the message @mentions the Bot
+
+### Bot goes offline
+
+The Discord WebSocket connection may drop due to network fluctuations. CodePilot will automatically reconnect. If it keeps disconnecting, check your network connection.
diff --git a/apps/site/content/docs/en/bridge/feishu.mdx b/apps/site/content/docs/en/bridge/feishu.mdx
new file mode 100644
index 0000000..22209d1
--- /dev/null
+++ b/apps/site/content/docs/en/bridge/feishu.mdx
@@ -0,0 +1,84 @@
+---
+title: Feishu / Lark
+description: Configure the Feishu / Lark bridge.
+---
+
+# Feishu Bridge
+
+Chat with Claude through a Feishu (or Lark) app. Supports switching between the domestic and international editions, and group policy control.
+
+## Create a Feishu App
+
+### Domestic Edition (Feishu)
+
+1. Go to the [Feishu Open Platform](https://open.feishu.cn) and sign in with a developer account
+2. Click **Create Custom App**
+3. Fill in the app name and description
+4. On the app details page, under **Credentials & Basic Info**, obtain:
+   - **App ID** (format: `cli_xxxxxxxxxx`)
+   - **App Secret**
+5. In the left menu, select **Add Capabilities > Bot** to enable the bot capability
+6. Under **Event Subscriptions**, select **Long Connection Mode** (WebSocket, no public IP required):
+   - Long connection mode must be started before you can save the configuration — click enable and wait for the connection to be established
+   - Once connected, add the event: `im.message.receive_v1` (receive messages)
+   - Save the event subscription configuration
+7. Under **Permissions**, request the following:
+   - `im:message` (send messages)
+   - `im:message.group_at_msg` (receive group chat @messages)
+   - `im:message.p2p_msg` (receive DM messages)
+8. **Publish the app** — submit for review or self-approve
+
+### International Edition (Lark)
+
+The process is the same as the domestic edition, but performed on [Lark Developer](https://open.larksuite.com). When configuring in CodePilot, select the domain as **Lark**.
+
+## Configure in CodePilot
+
+1. Click **Bridge** in the sidebar, then switch to the **Feishu** tab
+2. Select domain: **Feishu** (domestic) or **Lark** (international)
+3. Enter the **App ID** and **App Secret**
+4. Click **Test Connection** to verify the credentials
+5. Configure group policy:
+   - **Open** — Bot responds to @messages in all group chats
+   - **Allowlist** — Only responds in specified group chats (enter group chat_id values)
+   - **Disabled** — Only responds in DMs
+6. (Optional) **Require @mention** — When enabled, the Bot only responds to messages that @mention it in group chats
+7. (Optional) **Allowed Users** — Enter Feishu open_id or chat_id values to restrict who can use the Bot
+8. Click **Save**
+
+## Enable the Bridge
+
+1. Go back to the Bridge overview page
+2. Make sure the **Feishu** channel toggle is on
+3. Make sure the Bridge master switch is on
+4. Click **Start**
+
+## Message Format
+
+The Feishu bridge converts Claude's replies into Feishu message format:
+
+- Complex replies (containing code blocks, tables, etc.) → Interactive Card
+- Simple replies → Rich text message (Post)
+- Maximum 30,000 characters per message (splitting is usually not needed)
+
+## Troubleshooting
+
+### Test connection failed
+
+1. Confirm the App ID and App Secret are correct
+2. Confirm the app has been published (review approved)
+3. Confirm you selected the correct domain (domestic vs. international)
+
+### Bot not responding in group chats
+
+1. Confirm the bot capability has been added
+2. Confirm the `im:message.group_at_msg` permission has been granted
+3. Confirm the group policy is not set to "Disabled"
+4. If the policy is set to "Allowlist", confirm the group chat ID is in the allowed list
+5. If "Require @mention" is enabled, make sure the message @mentions the Bot
+
+### Bot not responding in DMs
+
+1. Confirm the `im:message.p2p_msg` permission has been granted
+2. Confirm the app has been published
+3. Search for the Bot by name in Feishu and start a DM
diff --git a/apps/site/content/docs/en/bridge/index.mdx b/apps/site/content/docs/en/bridge/index.mdx
index 24260ee..7fd74cb 100644
--- a/apps/site/content/docs/en/bridge/index.mdx
+++ b/apps/site/content/docs/en/bridge/index.mdx
@@ -1,54 +1,86 @@
 ---
 title: Message Bridge
-description: Bridge Claude conversations to messaging platforms.
+description: Bridge Claude conversations to Telegram, Discord, Feishu / Lark, and QQ.
 ---
 
-CodePilot's Message Bridge lets you interact with Claude from external messaging platforms. Start a conversation on your desktop, then continue it from your phone via Discord, Telegram, Feishu (Lark), or QQ.
+# Message Bridge
+
+The Message Bridge lets you chat with Claude from instant messaging apps on your phone. Start CodePilot on your desktop, configure a Bot, and you can interact with Claude anytime through Telegram, Discord, Feishu / Lark, or QQ.
 
 ## Supported Platforms
 
-| Platform | Features |
-|----------|----------|
-| **Discord** | Full message bridge with bot integration |
-| **Telegram** | Direct message bridge via bot |
-| **Feishu/Lark** | Enterprise messaging bridge |
-| **QQ** | Bridge via QQ bot platform |
-
-## Setup
-
-### Discord
-
-1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Discord bridge
-2. Create a Discord bot at [discord.com/developers](https://discord.com/developers/applications)
-3. Copy the bot token and paste it into CodePilot
-4. Invite the bot to your Discord server
-5. Specify the channel ID where the bridge should operate
-6. Click **Enable**
-
-### Telegram
-
-1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Telegram bridge
-2. Create a bot via [@BotFather](https://t.me/BotFather) on Telegram
-3. Copy the bot token and paste it into CodePilot
-4. Click **Enable**
-5. Send a message to your bot to start bridging
-
-### Feishu/Lark
-
-1. Open **Bridge** from the sidebar, or go to **Settings** and configure the Feishu bridge
-2. Create an app in the [Feishu Open Platform](https://open.feishu.cn)
-3. Configure the app credentials (App ID and App Secret)
-4. Set up event subscriptions
-5. Click **Enable**
+| Platform | Highlights |
+|----------|------------|
+| **Telegram** | Long-polling mode, streaming preview, permission buttons, rich Markdown rendering |
+| **Discord** | WebSocket mode, streaming preview, channel and DM dual-mode |
+| **Feishu / Lark** | WebSocket mode, domestic / international edition switching, group policy control |
+| **QQ** | REST API mode, image sending, DM bridging |
 
 ## How It Works
 
-1. **Desktop to Mobile**: Messages you send in CodePilot are forwarded to the configured platform
-2. **Mobile to Desktop**: Messages from the platform are sent to Claude, and responses are forwarded back
-3. **Background Mode**: CodePilot can run in system tray mode, keeping the bridge active even when the window is closed
+```
+Phone IM → Bot receives message → CodePilot forwards to Claude → Claude replies → Bot sends reply back to IM
+```
 
-## Bridge Modes
+1. You send a message to the Bot in your messaging platform
+2. CodePilot's Bridge service receives the message and forwards it to Claude
+3. Claude processes the request and generates a reply
+4. The reply is sent back to your messaging platform via the Bot
+5. If Claude needs permission confirmation (e.g. writing a file), it sends a confirmation button in the IM
 
-- **Interactive Mode** — Full bidirectional messaging
-- **System Tray Mode** — Minimize to tray, bridge stays active in background
-- **Notification Only** — Only receive notifications, no message forwarding
+## Basic Setup
+
+### Enable the Bridge
+
+1. Click **Bridge** in the sidebar
+2. On the Bridge overview page, turn on the **Bridge master switch**
+3. Enable the channels you need (Telegram / Discord / Feishu / QQ)
+4. Go to each channel's page to configure Bot credentials
+5. Click **Start**
+
+### Bridge Global Settings
+
+On the Bridge overview page you can configure:
+
+- **Default working directory** — Default project path for new conversations
+- **Default model** — Model used for bridge conversations
+- **Default provider** — API provider used for bridge conversations
+- **Auto-start** — Automatically start the bridge service when CodePilot launches
+
+### Bridge Status
+
+The Bridge page shows real-time status:
+
+- Master service status (Connected / Disconnected)
+- Status of each channel adapter
+- Number of active session bindings
+- Time of the last message
+
+## Slash Commands
+
+You can use slash commands in the IM to control CodePilot:
+
+| Command | Arguments | Description |
+|---------|-----------|-------------|
+| `/new` | `[path]` | Start a new conversation, optionally specifying a working directory |
+| `/bind` | `<session-id>` | Bind the current IM chat to an existing CodePilot conversation |
+| `/cwd` | `/path/to/dir` | Switch the working directory for the current conversation |
+| `/mode` | `plan\|code\|ask` | Switch conversation mode |
+| `/status` | — | View current conversation status (ID, working directory, mode, model) |
+| `/sessions` | — | List recent conversations for the current channel (up to 10) |
+| `/stop` | — | Abort the currently running task |
+| `/help` | — | View available commands |
+
+## Usage Tips
+
+- **Keep CodePilot running** — The bridge relies on the desktop app as a relay; the Bot cannot respond if CodePilot is closed
+- **System tray mode** — Minimize to the system tray so the bridge stays active without taking up desktop space
+- **Prefer DMs** — Using DMs is recommended; group chats may be noisy with other messages
+- **Permission confirmations** — When Claude needs to perform a sensitive operation it sends a confirmation button in the IM; make sure to respond promptly
+
+## Channel Configuration
+
+- [Telegram Setup](/docs/bridge/telegram)
+- [Discord Setup](/docs/bridge/discord)
+- [Feishu / Lark Setup](/docs/bridge/feishu)
+- [QQ Setup](/docs/bridge/qq)
diff --git a/apps/site/content/docs/en/bridge/meta.json b/apps/site/content/docs/en/bridge/meta.json
new file mode 100644
index 0000000..db153c1
--- /dev/null
+++ b/apps/site/content/docs/en/bridge/meta.json
@@ -0,0 +1,10 @@
+{
+  "title": "Bridge",
+  "pages": [
+    "index",
+    "telegram",
+    "discord",
+    "feishu",
+    "qq"
+  ]
+}
diff --git a/apps/site/content/docs/en/bridge/qq.mdx b/apps/site/content/docs/en/bridge/qq.mdx
new file mode 100644
index 0000000..737fcbc
--- /dev/null
+++ b/apps/site/content/docs/en/bridge/qq.mdx
@@ -0,0 +1,76 @@
+---
+title: QQ
+description: Configure the QQ Bot bridge.
+---
+
+# QQ Bridge
+
+Chat with Claude through a QQ Bot. Supports image sending and DM bridging.
+
+## Create a QQ Bot
+
+1. Go to the [QQ Open Platform](https://q.qq.com) and register a developer account
+2. Create a new Bot application
+3. Complete identity verification (individual or enterprise)
+4. On the application management page, obtain:
+   - **AppID** (numeric format)
+   - **App Secret**
+5. Under **Feature Configuration**, enable the required message permissions
+6. Submit for review and wait for approval
+
+> The QQ Bot platform has a strict review process. It is recommended to read the platform documentation and integration guidelines carefully.
+
+## Configure in CodePilot
+
+1. Click **Bridge** in the sidebar, then switch to the **QQ** tab
+2. Enter the **App ID** and **App Secret**
+3. Click **Test Connection** to verify the credentials
+4. (Optional) Configure **Allowed Users** — Enter QQ user_openid values, separated by commas
+5. (Optional) Configure image settings:
+   - **Enable image sending** — Allow the Bot to send images (enabled by default)
+   - **Maximum image size** — Size limit per image (default 20 MB)
+6. Click **Save**
+
+## Enable the Bridge
+
+1. Go back to the Bridge overview page
+2. Make sure the **QQ** channel toggle is on
+3. Make sure the Bridge master switch is on
+4. Click **Start**
+5. Add the Bot as a friend in QQ, then send a message to start chatting with Claude
+
+## Message Format
+
+The QQ bridge sends messages in plain text format:
+
+- Markdown rendering is not supported
+- Overly long messages are automatically split into chunks (max 2000 characters each)
+- Each reply can contain at most 3 chunks (platform limitation)
+- Image sending is supported (must be enabled in image settings)
+
+## Permission Handling
+
+The QQ Bot platform does not support inline buttons, so permission confirmations are handled via text commands:
+
+- The Bot sends a permission confirmation message including the operation description and a permission ID
+- Reply `/perm allow <ID>` to allow the operation
+- Reply `/perm deny <ID>` to deny the operation
+- Reply `/perm allow_session <ID>` to allow similar operations for the rest of this session
+
+## Troubleshooting
+
+### Test connection failed
+
+1. Confirm the App ID and App Secret are correct
+2. Confirm the Bot application has passed review
+3. Confirm developer identity verification is complete
+
+### Bot not responding
+
+1. Confirm you have added the Bot as a QQ friend
+2. Confirm the CodePilot bridge is running
+3. If you configured an allowed users list, confirm your user_openid is in the list
+
+### Messages are truncated
+
+The QQ platform limits each reply to a maximum of 3 chunks. For particularly long replies, the end may be lost. Consider asking Claude to reply concisely in your prompts.
diff --git a/apps/site/content/docs/en/bridge/telegram.mdx b/apps/site/content/docs/en/bridge/telegram.mdx
new file mode 100644
index 0000000..825d612
--- /dev/null
+++ b/apps/site/content/docs/en/bridge/telegram.mdx
@@ -0,0 +1,80 @@
+---
+title: Telegram
+description: Configure the Telegram Bot bridge.
+---
+
+# Telegram Bridge
+
+Chat with Claude through a Telegram Bot. Supports streaming message preview, permission confirmation buttons, and rich Markdown rendering.
+
+## Create a Telegram Bot
+
+1. Search for [@BotFather](https://t.me/BotFather) in Telegram
+2. Send `/newbot`
+3. Follow the prompts to enter a display name and a username (must end with `_bot`)
+4. BotFather will return a **Bot Token** in a format like `123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11`
+5. Copy the Token for later use
+
+## Configure in CodePilot
+
+1. Click **Bridge** in the sidebar, then switch to the **Telegram** tab
+2. Paste the Bot Token in the **Bot Credentials** section
+3. Click **Test Connection** to verify the Token is valid
+4. Once verified, click **Auto-detect Chat ID**:
+   - First, send any message to your Bot in Telegram
+   - Then click the detect button; CodePilot will automatically retrieve your Chat ID
+5. (Optional) In **Allowed Users**, enter the Telegram user IDs permitted to use the Bot, separated by commas. Leave empty for no restrictions.
+6. Click **Save**
+
+## Enable the Bridge
+
+1. Go back to the Bridge overview page
+2. Make sure the **Telegram** channel toggle is on
+3. Make sure the Bridge master switch is on
+4. Click **Start**
+
+Send a message to the Bot in Telegram and you should receive a reply from Claude.
+
+## Streaming Preview
+
+The Telegram bridge supports streaming message preview — as Claude generates a reply, the Bot updates the message content in real time so you can follow the progress without waiting for the full response.
+
+Streaming preview parameters can be adjusted in the advanced settings:
+
+- **Minimum update characters** — Minimum number of new characters accumulated before updating the message (default 20)
+- **Minimum update interval** — Shortest interval between two updates (default 700 ms)
+- **Maximum message length** — Maximum length of the preview message (default 3900 characters)
+
+## Message Format
+
+The Telegram bridge converts Claude's Markdown replies into Telegram HTML format:
+
+- Code blocks → `<pre>` with language annotation
+- Bold, italic → HTML tags
+- Links → clickable links
+- Overly long messages are automatically split into chunks (max 4096 characters each)
+
+If HTML rendering fails, the message is automatically sent as plain text.
+
+## Permission Handling
+
+When Claude needs to perform a sensitive operation, the Bot sends a message with inline buttons:
+
+- **Allow** — Allow this operation
+- **Allow for session** — Automatically allow similar operations for the rest of this session
+- **Deny** — Deny the operation
+
+## Troubleshooting
+
+### Bot not responding
+
+1. Confirm the CodePilot bridge service is running (Bridge page shows "Connected")
+2. Confirm the Telegram channel toggle is on
+3. Confirm the Bot Token is correct (re-test the connection)
+4. If you configured an allowed users list, confirm your user ID is in the list
+
+### Receiving error messages
+
+- **Insufficient API quota** — Check the API key balance
+- **Model unavailable** — Check the bridge default provider and model configuration
+- **Permission timeout** — Claude timed out waiting for permission confirmation; resend the message
diff --git a/apps/site/content/docs/en/chat.mdx b/apps/site/content/docs/en/chat.mdx
new file mode 100644
index 0000000..3437d45
--- /dev/null
+++ b/apps/site/content/docs/en/chat.mdx
@@ -0,0 +1,104 @@
+---
+title: Chat
+description: CodePilot's chat features — modes, permissions, and context management.
+---
+
+# Chat
+
+Chat is CodePilot's core feature. This is where you collaborate with Claude on programming tasks.
+
+## Conversation Modes
+
+CodePilot offers three conversation modes, switchable at any time from above the input box:
+
+### Code Mode
+
+The default mode. Claude has full tool access and can:
+
+- Read and write project files
+- Execute terminal commands
+- Call MCP tools
+- Search the codebase
+
+Best for everyday development tasks: writing code, fixing bugs, refactoring, deploying.
+
+### Plan Mode
+
+Planning mode. Claude only analyzes and formulates plans — **it will not execute any actions**.
+
+- Analyzes problems and proposes implementation plans
+- Lists files and steps that need to be changed
+- Evaluates the pros and cons of different approaches
+
+Best for thinking things through before taking action, or assessing the impact of large changes.
+
+### Ask Mode
+
+Q&A mode. Claude only answers questions and does not use any tools.
+
+- Explains code logic
+- Answers technical questions
+- Discusses architecture and design
+
+Best for pure knowledge Q&A scenarios where Claude does not need access to project files.
+
+## Permission Control
+
+### Session Permissions
+
+Each conversation lets you choose a permission level:
+
+- **Default** — Claude will ask for confirmation before performing sensitive operations (writing files, running commands)
+- **Full Access** — Claude can automatically perform all operations without individual confirmation
+
+The permission selector is next to the chat input box. Use Default for exploratory tasks; use Full Access for trusted, repetitive tasks.
+
+### Permission Dialog
+
+When Claude needs to perform a restricted operation, a permission confirmation dialog appears showing:
+
+- Tool name and parameters
+- Description of the operation
+- Allow / Deny buttons
+
+You can review each of Claude's actions one by one.
+
+## Context Management
+
+### Context Usage Indicator
+
+The circular progress bar next to the input box shows the current conversation's context window usage. Hover over it for details:
+
+- Tokens used
+- Total available tokens
+- Usage percentage
+
+When the context approaches its limit, Claude will automatically compress message history to continue the conversation.
+
+### Conversation Rewind
+
+CodePilot supports rewinding a conversation to a previous point. Each user message is a rewind point — you can go back to any earlier message and restart the conversation from there.
+
+## Input Features
+
+### File Attachments
+
+You can attach image files in the input box for Claude to analyze screenshots or design mockups. Supports drag-and-drop or clicking the attachment button.
+
+### Slash Commands
+
+Type `/` to trigger the slash command menu for quick access to common actions.
+
+### @-Mentions
+
+Type `@` to reference files or context, helping Claude focus on specific content.
+
+## Session Management
+
+### Import CLI Sessions
+
+If you have previously used the Claude Code CLI, you can use the **Import Session** feature to bring CLI conversations into CodePilot. Supports searching and filtering past sessions.
+
+### Provider Switching
+
+The conversation header shows the current provider. You can switch providers mid-conversation — subsequent messages will be processed by the new provider. Each conversation remembers its provider setting.
diff --git a/apps/site/content/docs/en/design-agent.mdx b/apps/site/content/docs/en/design-agent.mdx
new file mode 100644
index 0000000..942cff8
--- /dev/null
+++ b/apps/site/content/docs/en/design-agent.mdx
@@ -0,0 +1,64 @@
+---
+title: Design Agent
+description: Generate images using AI-powered image generation.
+---
+
+# Design Agent
+
+Design Agent is CodePilot's built-in AI image generation feature. It uses Claude to analyze your requirements, then calls the Gemini Image API to generate images.
+
+## Prerequisites
+
+To use Design Agent, you need to configure the **Google Gemini (Image)** provider:
+
+1. Go to **Settings > Providers**
+2. Click **Add Provider** and select **Google Gemini (Image)**
+3. Enter your API key
+4. Click **Save**
+
+## Single Image Generation
+
+### Enabling Design Agent
+
+Find the **Design Agent** toggle to the right of the chat input box and click to enable it. Once enabled, your messages will be analyzed by Claude as image generation requests.
+
+### Generation Workflow
+
+1. Turn on the Design Agent toggle
+2. Describe the image you want in natural language
+3. Claude analyzes your request and generates a structured image description
+4. A confirmation panel appears where you can adjust:
+   - **Prompt** — Edit the generation prompt
+   - **Aspect ratio** — Choose a ratio (1:1, 16:9, 9:16, 3:2, 4:3, and 10 more)
+   - **Resolution** — Select 1K / 2K / 4K
+5. Click generate and wait for the result
+6. The generated image appears as a card in the conversation
+
+### Reference Image
+
+You can upload a reference image to guide the generation style and composition. Attach an image in the input box and Design Agent will automatically use it as a generation reference.
+
+### Iterative Editing
+
+After generating an image, you can describe modifications directly (e.g., "remove the bottle on the right"). The system automatically uses the previous result as a reference image, enabling continuous iteration.
+
+## Batch Generation
+
+Design Agent supports batch image generation based on document content.
+
+### Workflow
+
+1. Upload a document or provide content in the conversation
+2. Describe your image requirements and style preferences
+3. Claude analyzes the document and generates a batch generation plan:
+   - Prompt for each image
+   - Aspect ratio and resolution
+   - Tags and source references
+4. You can review and edit each item in the plan individually
+5. Confirm to start batch generation
+6. A progress panel shows the generation status of each image in real time
+7. Failed items can be retried individually
+
+## Viewing History
+
+All generated images are automatically saved to the [Gallery](/docs/gallery), where you can browse, download, or bookmark them at any time.
diff --git a/apps/site/content/docs/en/faq.mdx b/apps/site/content/docs/en/faq.mdx
index 71858a9..1ca7f76 100644
--- a/apps/site/content/docs/en/faq.mdx
+++ b/apps/site/content/docs/en/faq.mdx
@@ -3,68 +3,80 @@ title: FAQ
 description: Frequently asked questions about CodePilot.
 ---
 
+# FAQ
+
 ## General
 
 ### What is CodePilot?
 
-CodePilot is a native desktop GUI client for Claude Code. It provides a graphical interface for the Claude Code CLI, with additional features like multi-provider support, a plugin system, message bridging, and theme customization.
+CodePilot is a desktop workspace for Claude Code. It provides a graphical interface on top of the Claude Code CLI, integrating multi-provider management, MCP plugins, skills, message bridging, and the assistant workspace. Built with Electron + Next.js.
+
+### What is the relationship between CodePilot and Claude Code CLI?
+
+CodePilot is a graphical frontend for the Claude Code CLI. It calls Claude Code CLI capabilities through the Claude Agent SDK while adding GUI-exclusive features on top (multi-provider switching, bridging, gallery, etc.). You need to install the Claude Code CLI before using CodePilot.
 
 ### Is CodePilot free?
 
-CodePilot is open source and free to use. You need your own API key from a supported provider (Anthropic, OpenAI, Google, AWS Bedrock, etc.) to use it.
+CodePilot is open source and free to use. You need your own API key from a supported provider (Anthropic, OpenRouter, or others). API usage fees are charged by the provider.
 
-### What platforms are supported?
+### What operating systems are supported?
 
-CodePilot supports macOS (Apple Silicon and Intel) and Windows. Linux support is planned.
+- macOS 12+ (Apple Silicon and Intel)
+- Windows 10+ (64-bit)
 
-## Setup
+## Installation & Configuration
 
-### I get a "Node.js not found" error
+### "Node.js not found" on first launch
 
-CodePilot requires Node.js 18 or later. The setup wizard will offer to install it for you, or you can install it manually from [nodejs.org](https://nodejs.org).
+CodePilot requires Node.js 18+. The first-launch setup wizard will detect this and offer automatic installation. You can also install manually from [nodejs.org](https://nodejs.org).
 
 ### How do I get an API key?
 
-- **Anthropic**: Sign up at [console.anthropic.com](https://console.anthropic.com) and create an API key
-- **OpenAI**: Sign up at [platform.openai.com](https://platform.openai.com) and create an API key
-- **Google AI**: Get a key from [aistudio.google.com](https://aistudio.google.com)
+- **Anthropic** — [console.anthropic.com](https://console.anthropic.com)
+- **OpenRouter** — [openrouter.ai](https://openrouter.ai)
+- **GLM (Zhipu)** — [open.bigmodel.cn](https://open.bigmodel.cn)
+- **Kimi** — [platform.moonshot.cn](https://platform.moonshot.cn)
+- **Volcengine** — [console.volcengine.com](https://console.volcengine.com)
+- **Alibaba Cloud Bailian** — [dashscope.console.aliyun.com](https://dashscope.console.aliyun.com)
 
 ### Can I use a local LLM?
 
-Yes, if it provides an OpenAI-compatible API endpoint. Configure it as an OpenAI provider with your local server's URL.
+Yes. Any local service that provides an OpenAI-compatible API (Ollama, LM Studio, vLLM, etc.) can be connected as a custom API provider. Select Custom API in the provider settings and enter your local service URL.
+
+### macOS says "cannot verify the developer"
+
+Go to **System Settings > Privacy & Security**, find the CodePilot prompt, and click "Open Anyway".
 
 ## Usage
 
-### How do I switch between providers?
+### What are the differences between Code / Plan / Q&A modes?
 
-Use the provider selector in the chat header. Each conversation remembers its provider, and you can switch mid-conversation.
+- **Code** — Claude can read and write files and execute commands; suitable for everyday development
+- **Plan** — Claude only analyzes and proposes solutions without executing actions; suitable for the planning phase
+- **Q&A** — Claude only answers questions without using tools; suitable for pure Q&A
 
-### How do I use MCP plugins?
+### How do I chat with Claude from my phone?
 
-Open **MCP** from the sidebar to add MCP servers. Once connected, their tools are automatically available to Claude.
+Use the [Message Bridge](/docs/bridge) feature to connect CodePilot to Telegram, Discord, Feishu, or QQ. Keep the desktop app running and you can chat with Claude from your phone.
 
-### Can I use CodePilot on my phone?
+### What should I do if Claude isn't responding?
 
-Not directly, but you can use the [Message Bridge](/docs/bridge) to bridge conversations to Discord, Telegram, Feishu, or QQ and interact from your phone.
+1. Check that your API key is valid and has sufficient balance
+2. Check your internet connection
+3. Try switching to a different provider
+4. Check the MCP page for any server errors
+5. Restart CodePilot
 
-## Troubleshooting
+### How do I import CLI conversation history?
 
-### The app won't start
+Use the import feature on the chat page to search for and import historical sessions from the Claude Code CLI.
 
-1. Make sure Node.js 18+ is installed
-2. Try deleting the app data directory and relaunching
-3. Check the logs in the app data directory for error messages
-
-### Claude isn't responding
-
-1. Check that your API key is valid and has sufficient credits
-2. Verify your internet connection
-3. Try switching to a different provider to isolate the issue
-4. Check the **MCP** page in the sidebar for any MCP server errors that might be blocking
+## Feedback & Support
 
 ### How do I report a bug?
 
-Open an issue on [GitHub](https://github.com/op7418/CodePilot/issues) with:
+Open an issue on [GitHub Issues](https://github.com/op7418/CodePilot/issues). Please include:
+
 - Your OS and CodePilot version
-- Steps to reproduce the issue
-- Any relevant error messages from the logs
+- Steps to reproduce
+- Relevant error logs
diff --git a/apps/site/content/docs/en/gallery.mdx b/apps/site/content/docs/en/gallery.mdx
new file mode 100644
index 0000000..d9b1fa9
--- /dev/null
+++ b/apps/site/content/docs/en/gallery.mdx
@@ -0,0 +1,41 @@
+---
+title: Gallery
+description: Manage AI-generated image assets.
+---
+
+# Gallery
+
+The Gallery lets you browse, manage, and organize all images generated through Design Agent. Click **Gallery** in the sidebar to open it.
+
+## Browsing Images
+
+The Gallery displays all generated images in a masonry grid layout with infinite scroll loading.
+
+### Filtering and Sorting
+
+- **Date range** — Filter images by date
+- **Bookmarked only** — Show only bookmarked images
+- **Sort order** — Arrange by newest or oldest
+
+## Image Details
+
+Click any image to open the detail view. The left side shows the image preview, and the right side displays a metadata panel:
+
+- **Prompt** — The prompt used for generation
+- **Model** — The generation model used
+- **Aspect ratio** — Image ratio (e.g., 1:1, 16:9)
+- **Resolution** — Image dimensions
+- **Reference image** — The reference image used during generation (if any)
+- **Linked conversation** — Jump to the conversation where the image was generated
+
+### Actions
+
+- **Download** — Save the image locally
+- **Bookmark** — Mark as a bookmark for quick access later
+- **Delete** — Delete the image (confirmation required)
+
+When multiple images are generated together, a count badge and left/right navigation arrows are shown.
+
+## Storage Location
+
+Generated images are saved in the `~/.codepilot/.codepilot-media/` directory. If generated within a conversation, images are also copied to the `.codepilot-images/` folder in the project directory.
diff --git a/apps/site/content/docs/en/index.mdx b/apps/site/content/docs/en/index.mdx
index ce0c168..9618ea4 100644
--- a/apps/site/content/docs/en/index.mdx
+++ b/apps/site/content/docs/en/index.mdx
@@ -1,30 +1,57 @@
 ---
 title: Getting Started
-description: Get started with CodePilot - a native desktop GUI client for Claude Code.
+description: Get started with CodePilot — a desktop workspace for Claude Code.
 ---
 
 # Getting Started
 
-Welcome to CodePilot! This guide will help you get up and running.
+CodePilot is a desktop workspace for Claude Code that brings conversations, providers, MCP, Skills, Bridge, and Assistant Workspace together in one interface.
 
-## What is CodePilot?
+## Prerequisites
 
-CodePilot is a native desktop GUI client for Claude Code, built with Electron and Next.js.
-It provides a rich graphical interface for interacting with Claude, managing projects,
-and leveraging AI-powered development tools.
+Before using CodePilot, you need:
 
-## Quick Start
+1. **Node.js 18+** — CodePilot depends on Node.js to run the Claude Code CLI
+2. **Claude Code CLI** — Anthropic's official command-line tool (can be installed automatically on first launch)
+3. **At least one API key** — From Anthropic, OpenRouter, or another supported provider (see [Providers](/docs/providers) for details on obtaining and configuring keys)
 
-1. Download CodePilot from the [download page](/download)
-2. Install and launch the application
-3. Configure your API provider in Settings
-4. Start a new conversation and begin coding with Claude!
+## Installation & First Launch
 
-## Features
+1. Download the installer for your platform from [GitHub Releases](https://github.com/op7418/CodePilot/releases) ([detailed installation guide](/docs/installation))
+2. Install and launch CodePilot
+3. On first launch, a **Setup Wizard** will guide you through:
+   - Detecting and installing Node.js (if not found)
+   - Detecting and installing the Claude Code CLI (if not found)
+   - Configuring at least one API provider
 
-- **Multi-provider support** — Anthropic, OpenAI, Google, AWS Bedrock
-- **MCP Plugin System** — Extend functionality with Model Context Protocol plugins
-- **Message Bridge** — Connect to Discord, Telegram, Feishu, and QQ
-- **Assistant Workspace** — Inspect and manage Claude's working environment
-- **Theme System** — Customizable themes and visual styles
-- **Image Generation** — Built-in AI image generation capabilities
+## Interface Overview
+
+The CodePilot interface consists of a left sidebar and a main workspace area:
+
+| Navigation | Description |
+|------------|-------------|
+| **Chat** | Converse with Claude in Code / Plan / Ask modes |
+| **MCP** | Manage MCP servers to give Claude access to external tools |
+| **Skills** | Browse and manage skills (local + marketplace) |
+| **Bridge** | Bridge conversations to Telegram, Discord, Feishu, QQ |
+| **Gallery** | View images generated by Claude |
+| **Settings** | Providers, CLI config, usage stats, Assistant Workspace |
+
+## Starting Your First Conversation
+
+1. Click **Chat** in the sidebar to open the chat page
+2. Type your request in the input box and press Enter
+3. Claude will stream its response, showing tool calls and file operations as they happen
+4. Use the mode switcher above the input box to change the conversation mode:
+   - **Code** — Default mode. Claude can read/write files and run commands
+   - **Plan** — Planning mode. Claude analyzes and proposes a plan without executing anything
+   - **Ask** — Q&A mode. Claude answers questions without using any tools
+
+## Next Steps
+
+- [Installation](/docs/installation) — Detailed installation and setup steps
+- [Providers](/docs/providers) — Configure multiple LLM providers
+- [MCP](/docs/mcp) — Extend Claude's capabilities with MCP plugins
+- [Skills](/docs/skills) — Use and manage skills
+- [Bridge](/docs/bridge) — Continue Claude conversations on your phone
+- [Assistant Workspace](/docs/assistant-workspace) — Manage project context and Claude's behavior
diff --git a/apps/site/content/docs/en/mcp.mdx b/apps/site/content/docs/en/mcp.mdx
new file mode 100644
index 0000000..e0b2579
--- /dev/null
+++ b/apps/site/content/docs/en/mcp.mdx
@@ -0,0 +1,73 @@
+---
+title: MCP Plugins
+description: Connect external tools to Claude via the Model Context Protocol.
+---
+
+# MCP Plugins
+
+[Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard for connecting AI assistants to external tools. CodePilot has a built-in MCP client that supports connecting to any MCP server to extend Claude's capabilities.
+
+## What is MCP?
+
+MCP servers provide Claude with additional tools, such as:
+
+- **File System** — Read/write files, search directories
+- **Database** — Query databases directly
+- **API Integrations** — Connect to external services like GitHub, Jira, Slack
+- **Development Tools** — Run tests, lint code, manage dependencies
+- **Custom Tools** — Build any tool you need
+
+## Managing MCP Servers
+
+Click **MCP** in the sidebar to open the management page. The page provides two views:
+
+### List View
+
+Displays all configured MCP servers as cards, each showing:
+
+- Server name
+- Connection status (Connected / Disconnected / Error)
+- List of tools provided
+
+### JSON Editor
+
+Directly edit the MCP configuration JSON file — useful for bulk configuration or importing settings from other tools.
+
+## Adding an MCP Server
+
+1. Click **Add Server** on the MCP page
+2. Fill in the configuration:
+   - **Name** — A descriptive name for the server
+   - **Transport Type** — Select the connection method:
+     - **stdio** — Local process communicating via standard input/output (most common)
+     - **SSE** — Connect to a remote server via Server-Sent Events
+     - **HTTP (Streamable)** — Connect via HTTP streaming
+   - **Command** (stdio type) — The command to start the server, e.g., `npx @modelcontextprotocol/server-filesystem`
+   - **Arguments** — Command-line arguments
+   - **URL** (SSE / HTTP type) — The remote server address
+   - **Environment Variables** — Environment variables the server needs (API keys, etc.)
+3. After saving, the server will start automatically
+
+## Using MCP Tools
+
+Once an MCP server is connected, its tools automatically become available to Claude. Claude will call these tools as needed while processing your requests.
+
+You can view the specific tool list for each server on the MCP page.
+
+## Popular MCP Servers
+
+| Server | Purpose |
+|--------|---------|
+| `@modelcontextprotocol/server-filesystem` | File system access |
+| `@modelcontextprotocol/server-github` | GitHub integration |
+| `@modelcontextprotocol/server-slack` | Slack integration |
+| `@anthropic-ai/mcp-server-fetch` | Web fetching |
+
+More MCP servers can be found in the [official MCP repository](https://github.com/modelcontextprotocol/servers) and the community.
+
+## Troubleshooting
+
+- **Server won't connect** — Check that the command is correct and the required npm package is installed
+- **Tools not appearing** — Try disconnecting and reconnecting the server
+- **Permission errors** — Ensure the MCP server has access to the required resources
+- **SSE/HTTP connection fails** — Check that the URL is correct and the server is running
diff --git a/apps/site/content/docs/en/mcp/index.mdx b/apps/site/content/docs/en/mcp/index.mdx
deleted file mode 100644
index df1d24c..0000000
--- a/apps/site/content/docs/en/mcp/index.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: MCP
-description: Extend CodePilot with Model Context Protocol servers.
----
-
-The [Model Context Protocol (MCP)](https://modelcontextprotocol.io) is an open standard for connecting AI assistants to external tools and data sources. CodePilot has built-in support for MCP servers.
-
-## What is MCP?
-
-MCP servers give Claude access to additional tools beyond its default capabilities:
-
-- **File system tools** — Read/write files, search directories
-- **Database access** — Query databases directly
-- **API integrations** — Connect to external services (GitHub, Jira, Slack, etc.)
-- **Development tools** — Run tests, lint code, manage dependencies
-- **Custom tools** — Build your own tools for any purpose
-
-## Managing MCP Servers
-
-### Adding an MCP Server
-
-1. Open **MCP** from the sidebar
-2. Click **Add MCP Server**
-3. Configure the server:
-   - **Name** — A descriptive name for the server
-   - **Command** — The command to start the MCP server (e.g., `npx @modelcontextprotocol/server-filesystem`)
-   - **Arguments** — Command-line arguments
-   - **Environment Variables** — Any required env vars (API keys, etc.)
-4. Click **Save** and the server will be started
-
-### Server Status
-
-Each MCP server shows its connection status:
-- **Connected** — Server is running and tools are available
-- **Disconnected** — Server is not running
-- **Error** — Server encountered an error (check logs for details)
-
-## Using MCP Tools
-
-Once an MCP server is connected, its tools automatically become available to Claude in your conversations. Claude will use these tools when relevant to your request.
-
-You can see which tools are available from each server on the **MCP** page by expanding the server details.
-
-## Popular MCP Servers
-
-| Server | Purpose |
-|--------|---------|
-| `@modelcontextprotocol/server-filesystem` | File system access |
-| `@modelcontextprotocol/server-github` | GitHub integration |
-| `@modelcontextprotocol/server-slack` | Slack integration |
-| `@anthropic-ai/mcp-server-fetch` | Web fetching |
-
-## Troubleshooting
-
-- **Server won't connect**: Check that the command is correct and the required npm package is installed
-- **Tools not appearing**: Try disconnecting and reconnecting the server
-- **Permission errors**: Ensure the MCP server has access to the resources it needs
diff --git a/apps/site/content/docs/en/meta.json b/apps/site/content/docs/en/meta.json
index 76a0fca..7b2468a 100644
--- a/apps/site/content/docs/en/meta.json
+++ b/apps/site/content/docs/en/meta.json
@@ -4,10 +4,14 @@
     "index",
     "installation",
     "---Guides---",
+    "chat",
     "providers",
     "mcp",
+    "skills",
     "bridge",
     "assistant-workspace",
+    "design-agent",
+    "gallery",
     "---Help---",
     "faq"
   ]
diff --git a/apps/site/content/docs/en/providers.mdx b/apps/site/content/docs/en/providers.mdx
new file mode 100644
index 0000000..2084b9b
--- /dev/null
+++ b/apps/site/content/docs/en/providers.mdx
@@ -0,0 +1,158 @@
+---
+title: Provider Configuration
+description: Configure LLM providers to power CodePilot.
+---
+
+# Provider Configuration
+
+CodePilot supports multiple LLM providers. You can configure several providers simultaneously and use different models in different conversations.
+
+## Authentication Overview
+
+CodePilot has two ways to obtain API credentials:
+
+### 1. CLI Environment Authentication (Auto-Detected)
+
+If you have the `ANTHROPIC_API_KEY` environment variable set in your shell, CodePilot **automatically detects** it on startup and uses it as a built-in provider.
+
+```bash
+export ANTHROPIC_API_KEY="sk-ant-..."
+```
+
+> **Note:** Configurations changed via `claude config set` or Claude Code's `/config` command are **not recognized by CodePilot**. CodePilot only reads shell environment variables and does not share Claude Code CLI's internal configuration. If you switched accounts/keys in the CLI via `cc switch` or similar methods, you need to manually reconfigure the corresponding key in CodePilot's **Settings > Providers**.
+
+> After modifying environment variables, you need to **restart CodePilot** for changes to take effect.
+
+### 2. Manually Adding Providers
+
+Manually add API keys in **Settings > Providers**. These credentials are stored in CodePilot's local database, independent of the CLI environment.
+
+This is ideal for scenarios where you need multiple providers or non-Anthropic services.
+
+### Priority
+
+When sending a message, CodePilot determines which provider to use in the following order:
+
+1. **Conversation-specific** — The provider manually selected in the conversation header
+2. **Global default** — The provider marked as "Default" in the provider list
+3. **Environment variable** — If no providers are configured, falls back to credentials from the shell environment
+
+## Supported Providers
+
+### Anthropic (Official)
+
+Direct connection to the Anthropic API, using Claude models (Opus, Sonnet, Haiku).
+
+- **Auth**: API Key
+- **Note**: If you only use Anthropic, CLI environment authentication is sufficient — no need to add manually
+
+### Anthropic (Third-Party Compatible)
+
+Connect to third-party endpoints compatible with the Anthropic API format.
+
+- **Auth**: API Key or Auth Token + custom Base URL. When adding, you need to select the authentication type:
+  - **API Key** — The key provided by the service starts with `sk-`, or the documentation explicitly labels it as an API Key. Most providers use this method, corresponding to the `ANTHROPIC_API_KEY` environment variable
+  - **Auth Token** — The service provides an OAuth Token or other form of access token, typically not starting with `sk-`. Some subscription-based services (such as Kimi Coding Plan, 火山引擎 Ark) use this method, corresponding to the `ANTHROPIC_AUTH_TOKEN` environment variable
+  - If unsure, try API Key first; if authentication fails, switch to Auth Token
+- **Model Mapping**: Some third-party providers require their own model names (rather than Anthropic's original model names). If you encounter a model unavailable error, click **More Options** at the bottom of the configuration form and enter the provider's required model identifier in the **Model Name** field
+
+### Chinese Providers
+
+CodePilot includes built-in configuration presets for major Chinese providers. After selecting one, the Base URL and default model are auto-filled:
+
+| Provider | Description | Auth Method |
+|----------|-------------|-------------|
+| **智谱 GLM (Domestic)** | 智谱 AI GLM series | API Key |
+| **智谱 GLM (International)** | 智谱 AI international endpoint | API Key |
+| **Kimi Coding Plan** | Moonshot Kimi coding edition | Auth Token |
+| **Moonshot** | Moonshot API | API Key |
+| **MiniMax (Domestic)** | MiniMax abab series | API Key |
+| **MiniMax (International)** | MiniMax international endpoint | API Key |
+| **火山引擎 Ark** | ByteDance Volcengine | Auth Token |
+| **阿里云百炼 Coding Plan** | Alibaba Cloud Tongyi series | API Key |
+
+> **Auth Token type**: Kimi Coding Plan and 火山引擎 Ark use `ANTHROPIC_AUTH_TOKEN` rather than `ANTHROPIC_API_KEY` for authentication. When adding them in CodePilot, the system automatically handles the authentication method — you just need to enter the key provided by the respective platform.
+
+### OpenRouter
+
+Access multiple model providers (Anthropic, OpenAI, Google, Meta, etc.) through OpenRouter's unified interface.
+
+- **Auth**: API Key
+- **Advantage**: One key to access multiple models, with automatic routing and failover
+
+### AWS Bedrock
+
+Use Claude through AWS infrastructure.
+
+- **Auth**: Environment variables — requires `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`
+- **Note**: After adding in CodePilot, the system reads your AWS environment variables for authentication. No need to enter keys in the UI.
+
+### Google Vertex
+
+Use Claude and Gemini through Google Cloud.
+
+- **Auth**: Environment variables — requires Google Cloud service account credentials
+- **Note**: Similar to Bedrock, authenticates via environment variables
+
+### Google Gemini (Image)
+
+Gemini image generation API, used by the design Agent.
+
+- **Auth**: API Key
+- **Note**: This is a provider specifically for image generation, not for text conversations
+
+### Custom API (OpenAI-Compatible)
+
+Any endpoint compatible with the OpenAI Chat Completions API.
+
+- **Auth**: API Key + Base URL
+- **Use case**: Connect local models (Ollama, LM Studio, vLLM) or other third-party proxies
+
+### LiteLLM
+
+Unified proxy supporting 100+ LLM providers.
+
+- **Auth**: API Key + Base URL
+
+## Adding a Provider
+
+1. Open **Settings > Providers**
+2. Click **Add Provider**
+3. Select the provider type (or a Chinese provider preset)
+4. Enter credentials:
+   - **API Key type**: Paste the key
+   - **Custom endpoint**: Also enter the Base URL
+   - **Environment variable type** (Bedrock / Vertex): Ensure environment variables are set
+5. Select a default model
+6. Click **Save**
+
+## Switching Providers
+
+- Select from the provider picker in the conversation header
+- Each conversation remembers the provider used
+- You can switch mid-conversation; subsequent messages will use the new provider
+- Click **Set as Default** in the provider list to set the global default
+
+## FAQ
+
+### Environment variables are set but CodePilot doesn't detect them
+
+- Confirm the environment variables are available in the shell environment when CodePilot starts
+- If set via `.zshrc` / `.bashrc`, make sure you **restarted CodePilot** (not just refreshed) after the change
+- Apps launched via macOS Launchpad may not inherit terminal environment variables — try launching from the terminal or manually adding the provider
+
+### API key is valid but requests fail
+
+- Check if the account has sufficient balance
+- Check if the key has model access permissions
+- For Chinese providers, check if the corresponding API endpoint is reachable from your network
+- For AWS Bedrock, check if IAM permissions include `bedrock:InvokeModel`
+
+### Conversation issues after switching providers
+
+- Different providers have different context window sizes; switching may cause errors if the context is too long
+- Some providers do not support all Claude Code features (such as tool use); certain operations may be unavailable after switching
+
+### How to use local models
+
+Select the **Custom API (OpenAI-Compatible)** type, and enter the local service address as the Base URL (e.g., `http://localhost:11434/v1`). The API key can be any value (local services typically don't validate it).
diff --git a/apps/site/content/docs/en/providers/index.mdx b/apps/site/content/docs/en/providers/index.mdx
deleted file mode 100644
index 327f0a0..0000000
--- a/apps/site/content/docs/en/providers/index.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: Providers
-description: Configure LLM providers to power your CodePilot experience.
----
-
-CodePilot supports multiple LLM providers. You can configure one or more providers and switch between them at any time.
-
-## Supported Providers
-
-| Provider | Description | Auth Method |
-|----------|-------------|-------------|
-| **Anthropic** | Direct access to Claude models (Opus, Sonnet, Haiku) | API Key |
-| **Custom API (OpenAI-compatible)** | Any OpenAI-compatible endpoint, including local LLMs | API Key + Base URL |
-| **OpenRouter** | Access multiple model providers via OpenRouter | API Key |
-| **AWS Bedrock** | Claude via AWS infrastructure | AWS Credentials |
-| **Google Vertex** | Claude and Gemini via Google Cloud | Service Account |
-| **Google Gemini (Image)** | Gemini image generation | API Key |
-| **LiteLLM** | Unified proxy for 100+ LLM providers | API Key + Base URL |
-
-Additional presets are available for Chinese providers: GLM, Kimi/Moonshot, MiniMax, Volcengine Ark, and Aliyun Bailian.
-
-## Adding a Provider
-
-1. Open **Settings** and go to the **Providers** section
-2. Click **Add Provider**
-3. Select the provider type
-4. Enter your credentials:
-   - For API key providers: paste your API key
-   - For AWS Bedrock: configure your AWS region and credentials
-   - For Google Vertex: configure your project ID and region
-5. Select a default model
-6. Click **Save**
-
-## Switching Providers
-
-You can switch the active provider at any time:
-
-- Use the provider selector in the chat header
-- Each conversation remembers which provider was used
-- Switching providers mid-conversation is supported
-
-## Provider-Specific Features
-
-### Anthropic
-- Supports **extended thinking** mode for complex reasoning
-- Token usage tracking with cost estimates
-- Full Claude Agent SDK integration
-
-### Custom API (OpenAI-compatible)
-- Works with any endpoint that implements the OpenAI chat completions API
-- Use this for local LLMs (Ollama, LM Studio, vLLM, etc.) or third-party proxies
-- Configure via custom base URL
-
-### OpenRouter
-- Access models from Anthropic, OpenAI, Google, Meta, and more through a single API key
-- Automatic model routing and fallback
-
-### AWS Bedrock
-- Uses your existing AWS IAM credentials
-- Supports cross-region inference
-- No separate API key needed if AWS CLI is configured
-
-## Environment Variables
-
-Providers can also be configured via environment variables. CodePilot automatically reads your shell environment:
-
-```bash
-# Anthropic (auto-detected on startup)
-export ANTHROPIC_API_KEY="sk-ant-..."
-
-# AWS Bedrock (uses standard AWS env vars)
-export AWS_ACCESS_KEY_ID="..."
-export AWS_SECRET_ACCESS_KEY="..."
-export AWS_REGION="us-east-1"
-```
-
-CodePilot auto-detects `ANTHROPIC_API_KEY` from your shell environment on startup. For other providers, configure credentials directly in the Providers settings UI. If you update environment variables, restart CodePilot to pick up the changes.
diff --git a/apps/site/content/docs/en/skills.mdx b/apps/site/content/docs/en/skills.mdx
new file mode 100644
index 0000000..4ece224
--- /dev/null
+++ b/apps/site/content/docs/en/skills.mdx
@@ -0,0 +1,51 @@
+---
+title: Skills
+description: Extend Claude's capabilities and workflows with skills.
+---
+
+# Skills
+
+Skills are reusable prompt templates and tool collections that extend Claude's capabilities for specific scenarios. Think of skills as "skill packs" — load different skills into Claude and it can better handle specific types of tasks.
+
+## Skill Categories
+
+Skills in CodePilot fall into three categories:
+
+### Global
+
+Global skills that apply to all conversations. These are typically foundational capability enhancements, such as code style checking or document generation templates.
+
+### Installed
+
+Skills downloaded from the skill marketplace or imported locally. Can be enabled or disabled as needed.
+
+### Plugins
+
+Skills from MCP servers. When you connect an MCP server, the skills it provides automatically appear here.
+
+## Managing Skills
+
+Click **Skills** in the sidebar to open the management page.
+
+### Browsing the Skill Marketplace
+
+The skill marketplace offers community and officially published skills. You can:
+
+- Browse by category
+- Search for skills with specific functionality
+- View skill details and usage instructions
+- Install with one click
+
+### Local Skills
+
+You can also manage local skill files:
+
+- View existing local skills
+- Enable or disable specific skills
+- View skill content and configuration
+
+## Using Skills in Conversations
+
+Installed and enabled skills automatically take effect in conversations. You can also manually trigger specific skills using the slash command `/`.
+
+Claude will automatically select appropriate skills based on context to enhance response quality when processing tasks.