Update AI docs and cover its setup guide section

app-links.js

@@ -130,11 +130,11 @@ export const appLinks = [
 	},
 	{
 		from: '/app-links/claude-code-integration',
-		to: '/docs/Pro Features/ai-chat',
+		to: '/docs/Pro Features/ai-setup#step-2-install-claude-code',
 	},
 	{
 		from: '/app-links/claude-code-config',
-		to: '/docs/Pro Features/ai-chat',
+		to: '/docs/Pro Features/ai-setup#step-3-connect-your-claude-account',
 	},
 	{
 		from: '/app-links/design-mode',
@@ -170,7 +170,7 @@ export const appLinks = [
 	},
 	{
 		from: '/app-links/ai-models',
-		to: '/docs/Pro Features/ai-chat#choosing-a-model',
+		to: '/docs/Pro Features/ai-models#choosing-a-model',
 	},
 	{
 		from: '/app-links/video-audio-preview',

docs/03-AI/01-ai-setup.md

@@ -0,0 +1,68 @@
+---
+title: Setup
+slug: "/Pro Features/ai-setup"
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+AI in Phoenix Code is powered by [Claude Code](https://code.claude.com/docs/en/overview), the coding agent from Anthropic. To use it you need three things:
+
+1. A **Phoenix Code account**, signed in to the editor.
+2. The **Claude Code CLI**, installed on your machine.
+3. A **Claude account** that pays for the AI: either a Claude subscription or an API key.
+
+Phoenix Code walks you through each step in the AI panel. Chats are billed to the Claude account you connect, not to Phoenix Code.
+
+<VideoPlayer
+  src="https://docs-images.phcode.dev/website/videos/claude-code-config.mp4"
+/>
+
+## Step 1: Sign in to Phoenix Code
+
+Click the **AI tab** *(sparkle icon)* in the sidebar. If you are not signed in, the panel asks you to sign in to your Phoenix Code account. Click **Sign In**.
+
+![AI sign in screen](../images/pro/ai-signin.png "Sign in to your Phoenix Code account")
+
+## Step 2: Install Claude Code
+
+If the Claude Code CLI is not installed on your machine, the panel tells you it must be installed. Click **Install Claude Code**. Phoenix Code opens its built-in terminal and runs the official installer from Anthropic. The install can take a while; Phoenix Code detects when it finishes.
+
+![Install Claude Code screen](../images/pro/ai-install-claude.png "The Install Claude Code screen")
+
+Restart Phoenix Code after the installation completes.
+
+If you prefer to install the CLI yourself, follow [Anthropic's setup guide](https://code.claude.com/docs/en/setup#install-claude-code) and restart Phoenix Code when done.
+
+## Step 3: Connect your Claude account
+
+Once the CLI is installed, the panel shows **Claude Code is installed but needs to be configured**. Click **Setup Claude Code** to open Claude Code in the built-in terminal, where you log in with your Claude account. Restart Phoenix Code after the configuration completes.
+
+![Setup Claude Code screen](../images/pro/ai-setup-claude.png "The Setup Claude Code screen")
+
+You have two ways to log in:
+
+### With a Claude subscription
+
+Claude Code is included in Claude's paid plans (Pro and above). The free claude.ai plan does not include Claude Code.
+
+1. Create a Claude account at [claude.ai](https://claude.ai) if you don't have one.
+2. Get a plan that includes Claude Code at [claude.com/pricing](https://claude.com/pricing).
+3. Click **Setup Claude Code** and pick the subscription login option in the terminal.
+
+### With an API key
+
+If you don't want a subscription, you can pay per use with an API key instead:
+
+1. Create an API key at [platform.claude.com](https://platform.claude.com).
+2. Click **Setup Claude Code** and pick the API key option in the terminal, or add the key as a custom provider in [AI settings](./05-ai-models-providers.md#settings).
+
+You can also use any other provider with an Anthropic-compatible API. See [Models and Providers](./05-ai-models-providers.md#compatible-providers).
+
+> The Claude Code CLI must be installed even when you bring your own API key or use a third-party provider.
+
+## If your login expires
+
+If your Claude login expires later, the chat shows a **Claude Code is signed out or your login has expired** notice with a **Log in to Claude in Terminal** button. Click it, type `/login` in the terminal that opens, then send your message again.
+
+![Expired login notice](../images/pro/ai-login-expired.png "The expired login notice in the chat")

docs/03-AI/02-ai-chatting.md

@@ -0,0 +1,71 @@
+---
+title: Chatting
+slug: "/Pro Features/ai-chatting"
+---
+
+## Opening the AI Panel
+
+Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
+
+![AI tab in the sidebar](../images/pro/ai-chat-panel.png "AI tab in the sidebar")
+
+## Sending Messages
+
+Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
+
+While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
+
+To stop the AI mid-response, click the **stop button** *(square icon)* that appears next to the send button while the AI is working, or press `Escape`.
+
+![Stop button](../images/pro/ai-stop.png "Stop button")
+
+### Context
+
+Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
+
+- **Selection** - the file and line range you have selected in the editor
+- **Cursor** - your current line and file
+- **Live Preview** - if the Live Preview panel is open
+
+You can dismiss any of these by clicking the **x** button on the chip.
+
+![Context chips above the input box](../images/pro/ai-chips.png "Context chips above the input box")
+
+## Attachments and Screenshots
+
+Click the **paperclip button** to attach a file or folder. The dropdown lets you choose:
+
+- **Attach a file** - attach a single file. Supported image formats include PNG, JPG, GIF, WebP, and SVG. You can also attach code or document files.
+- **Add folder as context** - attach an entire folder so the AI can read its contents.
+
+![Paperclip attach dropdown](../images/pro/ai-attach-dropdown.png "Paperclip attach dropdown")
+
+You can also paste an image directly from your clipboard into the input box.
+
+Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
+
+- **Live Preview** - your Live Preview panel (if open)
+- **Live Preview Selection** - the currently selected element in Live Preview
+- **Full Editor** - the entire editor window
+- **Select Area** - a custom region you select with a crop tool
+- **Upload from Device** - choose an existing image from your computer instead of taking a new screenshot
+
+![Camera screenshot dropdown](../images/pro/ai-screenshot-dropdown.png "Camera screenshot dropdown")
+
+## Session History
+
+Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
+
+![Session history dropdown](../images/pro/ai-history.png "Session history dropdown")
+
+> Sessions are saved per project, so each project has its own chat history.
+
+## Keyboard Shortcuts
+
+| Action | Shortcut |
+| -------- | ---------- |
+| Send message | `Enter` |
+| New line | `Shift + Enter` |
+| Cycle permission mode | `Shift + Tab` |
+| Stop the AI mid-response | `Escape` (while AI is generating) |
+| Clear input and focus the editor | `Escape` (when idle) |

docs/03-AI/03-ai-permission-modes.md

@@ -0,0 +1,18 @@
+---
+title: Permission Modes
+slug: "/Pro Features/ai-permissions"
+---
+
+The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them, or press `Shift + Tab`.
+
+- **Plan** - the AI proposes a plan first as a card in the chat (titled **Proposed Plan**). Click the **expand icon** in the card header to view the plan in full screen. Then click **Approve** to proceed, or **Revise** to open an inline feedback box where you describe what should change before the AI tries again. If the AI tries to edit a file while in Plan mode, you'll see an **Allow / Stay in Plan** prompt; choosing **Allow** switches the session to Edit mode for the rest of the turn. Good for complex tasks where you want to stay in control.
+- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
+- **Full Auto** - the AI runs everything without pausing. File edits, terminal commands, and tool calls all execute without confirmation. The first time you turn this on in a project, Phoenix Code shows a one-time warning so you understand the risk.
+
+![Permission mode selector](../images/pro/ai-permissions.png "Permission mode selector")
+
+## Approving Terminal Commands
+
+In Edit mode (the default), the AI shows an **Allow / Deny** card before running any terminal command. The card displays the full command so you can verify it before approving. Choosing **Deny** lets the AI continue with the rest of its response without running it.
+
+> Bash confirmations are skipped in Full Auto mode.

docs/03-AI/04-ai-reviewing-changes.md

@@ -0,0 +1,24 @@
+---
+title: Reviewing and Undoing Changes
+slug: "/Pro Features/ai-review"
+---
+
+## Reviewing Diffs
+
+Every edit card shows the number of lines added and removed, along with a **Show diff** button that toggles a unified diff of the change inline. Click the **three-dot menu** on the card to:
+
+- **Expand all** - open every diff section on the card at once
+- **Collapse all** - hide every diff section on the card
+- **Always show** - keep diffs open by default on future edits without clicking Show diff each time
+
+![Edit card with the diff menu open](../images/pro/ai-diff.png "The three-dot menu on an edit card shows Expand all, Collapse all, and Always show")
+
+## Undo and Restore
+
+Before each AI response that edits files, Phoenix Code creates a **restore point**. Each edit summary card has a button to revert to that point: it reads **Undo** on the most recent response and **Restore to this point** on earlier ones. Both do the same thing: they roll your files back to the saved state.
+
+The first time you undo or restore in a session, Phoenix Code shows a confirmation dialog before reverting.
+
+> Restore only reverts changes made by the AI. Edits you made outside the AI panel are not tracked and may be lost if they overlap with files the AI also edited. For full version history, use version control like Git.
+
+![Undo and Restore](../images/pro/ai-undo.png "Undo and Restore")

docs/03-AI/05-ai-models-providers.md

@@ -0,0 +1,43 @@
+---
+title: Models and Providers
+slug: "/Pro Features/ai-models"
+---
+
+## Choosing a Model
+
+The chat header shows which model is answering you. Hover over the panel and the model name appears on the left. Click it to pick a different one.
+
+![Model dropdown in the chat header](../images/pro/ai-model-dropdown.png "Model dropdown in the chat header")
+
+The dropdown lists:
+
+- **Default**: lets Claude Code pick. The row shows which model that is right now, for example *Currently Fable*.
+- The models your provider offers, such as **Fable**, **Opus**, **Sonnet**, and **Haiku**. Fable appears only on plans that include it.
+
+You can switch models in the middle of a chat. The new model takes over from your next message and keeps the conversation history.
+
+## Settings
+
+Click the **gear icon** in the chat panel to open AI settings.
+![AI settings button](../images/pro/ai-settings.png "AI settings button")
+
+This will open a dialog where you can:
+
+- Pick the **active provider** from a dropdown at the top
+- Add a custom API provider with a name, API key (masked), and base URL
+- Edit or delete any custom provider you've added
+- Set a custom API timeout
+
+When a custom provider with a base URL is active, the chat shows a one-time **Using custom endpoint: \<hostname\>** notice on your next message.
+
+![Claude Code Settings dialog](../images/pro/ai-settings-dialog.png "Claude Code Settings dialog")
+
+### Compatible providers
+
+Phoenix Code uses the Claude Code CLI under the hood, so it works with any provider that exposes an Anthropic-compatible API.
+
+- **Anthropic Claude** (default): recommended; gives the best results. Create an API key at [platform.claude.com](https://platform.claude.com).
+- **z.ai GLM**: tested working as a drop-in alternative. Use z.ai's Anthropic-compatible endpoint as the base URL.
+- **Other Anthropic-API-compatible providers**: add the provider's base URL and API key in the dialog above.
+
+> The Claude Code CLI must be installed even when a custom provider is active. See [Setup](./01-ai-setup.md).

docs/03-AI/06-ai-disable.md

@@ -0,0 +1,14 @@
+---
+title: Turning AI Off
+slug: "/Pro Features/ai-disable"
+---
+
+If you don't want AI in your editor, you can switch it off completely. Go to `View > Enable AI` and unselect it. Phoenix Code asks you to confirm with the **Disable AI and Restart** button. Phoenix Code restarts right away to apply the change.
+
+![Disable AI confirmation dialog](../images/pro/ai-disable-dialog.png "The Disable AI confirmation dialog with the Disable AI and Restart button")
+
+You can also do this from the AI settings dialog, with the **Enable AI features** checkbox.
+
+This turns off everything: the AI tab in the sidebar and the chat panel. To get it back, go to `View > Enable AI` again and confirm with **Enable AI and Restart**.
+
+> This is a user controlled preference. For schools and workplaces, please refer to [AI Control For School And Work](/docs/control-ai).

docs/03-AI/_category_.json

@@ -0,0 +1,5 @@
+{
+    "label": "AI",
+    "collapsible": true,
+    "collapsed": true
+}

docs/03-AI/index.md

@@ -0,0 +1,44 @@
+---
+title: AI
+slug: "/Pro Features/ai-chat"
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots, and work alongside you as you code.
+
+> AI is available only in desktop apps.
+
+:::note
+Free users get a daily and monthly chat limit. Once you're past halfway on either limit, a usage bar appears at the top of the chat. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
+:::
+
+<VideoPlayer
+  src="https://docs-images.phcode.dev/website/videos/ai-pro-dialog.mp4"
+/>
+
+## What you can do
+
+- **[Plan, Edit, and Full Auto modes](./03-ai-permission-modes.md)** let you decide how much freedom the AI has. Plan mode proposes a plan for your approval first, Edit lets the AI edit files but asks before running terminal commands, and Full Auto runs everything without pausing.
+- **[Restore points and a visual undo timeline](./04-ai-reviewing-changes.md)** mean every AI change is reversible. If you don't like what it did, roll back with one click.
+- **Live preview integration**: the AI can see your running app, take screenshots, click around, and verify its own work.
+- **[Choose the model](./05-ai-models-providers.md)** you want, and switch it even in the middle of a chat.
+- **[Bring your own provider](./05-ai-models-providers.md#settings)**: Claude from Anthropic (the default) gives the best results, or bring your own API key from any Claude Code CLI-compatible provider.
+- **Privacy-first onboarding** with a clear consent dialog and a video walkthrough.
+- **[Type while the AI is still working](./02-ai-chatting.md#sending-messages)**: your next message gets queued.
+- **[Session history](./02-ai-chatting.md#session-history)** keeps your conversations alive across restarts.
+- **Free-tier quotas** let everyone try AI; pro users get unlimited use.
+
+## In this section
+
+- [Setup](./01-ai-setup.md): install Claude Code and connect your Claude account, with or without a Claude subscription.
+- [Chatting](./02-ai-chatting.md): send messages, attach files and screenshots, and manage session history.
+- [Permission Modes](./03-ai-permission-modes.md): control how much the AI can do on its own.
+- [Reviewing and Undoing Changes](./04-ai-reviewing-changes.md): inspect diffs and roll back AI edits.
+- [Models and Providers](./05-ai-models-providers.md): pick a model or use a custom API provider.
+- [Turning AI Off](./06-ai-disable.md): remove AI from the editor completely.