diff --git a/docs/02-Live Preview/04-layers-panel.md b/docs/02-Live Preview/04-layers-panel.md index be2801e1..fdb2d647 100644 --- a/docs/02-Live Preview/04-layers-panel.md +++ b/docs/02-Live Preview/04-layers-panel.md @@ -25,13 +25,13 @@ Click the **Layers** tab at the top of the sidebar, next to **Files** and **AI** The panel reads the page shown in the Live Preview, so it needs three things: -- **A Live Preview**: If the Live Preview is closed, the panel shows an **Open Live Preview** button. You can also click **Open in Browser** to open the page in a browser window instead. The panel reads a popped-out preview too. +- **A Live Preview**: If the Live Preview is closed, the panel shows an **Open Live Preview** button. The panel reads a popped-out preview too. - **An HTML page**: The panel works with `.html`, `.htm`, and `.xhtml` files. If the preview is showing something else, like a Markdown or PHP file, the panel lists the HTML pages in your project instead. Click one to open it. - **Edit Mode**: Opening the tab switches the Live Preview to [Edit Mode](./live-preview-edit) for you. When you switch to another tab, the previous mode is restored. ![Page picker](../images/pro/layers-file-picker.png "The panel lists the HTML pages in the project when the preview is not showing one") -> The page picker groups pages by folder. Type in the search box to find a page by name. +> The page picker groups pages by folder, and remembers which folders you opened while the project is open. Type in the search box to find a page by name. Double-click a page to add it to the Working Files, as in the file tree. ## Panel Layout diff --git a/docs/02-Live Preview/08-markdown-editor.md b/docs/02-Live Preview/08-markdown-editor.md index f3ebba5a..cfadc603 100644 --- a/docs/02-Live Preview/08-markdown-editor.md +++ b/docs/02-Live Preview/08-markdown-editor.md @@ -27,6 +27,12 @@ The preview toolbar also has a **theme toggle** *(sun/moon icon)* to switch betw > Print is not available on macOS desktop apps. +## Viewing Images + +Click an image in the preview to see it full size. Press `Esc`, or click anywhere, to go back to the document. While [editing](#editing-markdown-pro), double-click the image instead, or click the **expand** button at its top-right corner. + +![An image opened full size](../images/pro/markdown-image-lightbox.png "An image from the document, opened full size over the preview") + ## Editing Markdown (Pro) :::info Pro Feature diff --git a/docs/03-AI/01-ai-setup.md b/docs/03-AI/01-ai-setup.md index 95e4faa8..b7e02df8 100644 --- a/docs/03-AI/01-ai-setup.md +++ b/docs/03-AI/01-ai-setup.md @@ -14,9 +14,9 @@ Chats are billed to the Claude account you connect, not to Phoenix Code. A free 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**. Phoenix Code shows a verification code and opens the sign in page in your browser. Use the code there to finish. The panel updates on its own once you are signed in. -![AI sign in screen](../images/pro/ai-signin.png "The sign in screen, with a Surprise Me demo you can watch before signing in") +![AI sign in screen](../images/pro/ai-signin.png "The sign in screen, with a See a demo button next to Sign In") -> You can watch a demo before signing in. Click **Surprise Me** to see a recorded build play in the panel. +> You can watch a demo before signing in. Click **See a demo** to see a recorded build play in the panel. ## Step 2: Set up Claude Code @@ -24,9 +24,9 @@ Once you are signed in, the panel shows the start screen. If Claude Code is not ![Set up button](../images/pro/ai-setup-button.png "The Set up button on the Visual AI row") -Click **Set up**. Phoenix Code opens its built-in terminal and starts the Claude Code login. Pick the way you want to log in and finish the steps in the terminal. The panel picks up the login on its own while the AI tab is open. If it has not after a couple of minutes, click **Set up** again, or just send a message. No restart is needed. +Click **Set up**. Phoenix Code opens its built-in terminal, starts the Claude sign-in, and opens the sign-in page in your browser. Finish signing in there. The panel picks up the login on its own when you come back to it. If it has not, click **Set up** again, or just send a message. No restart is needed. -You have two ways to log in: +You have two ways to pay for Claude: ### With a Claude subscription @@ -34,14 +34,14 @@ Claude Code is included in Claude's paid plans (Pro and above). The free claude. 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 **Set up** and pick **Claude account with subscription** in the terminal. It opens your browser to confirm. +3. Click **Set up** and sign in with that account in your browser. ### 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. Either click **Set up** and pick **Anthropic Console account** in the terminal, which bills your API usage, or add the key as a provider in [AI Settings](./09-ai-models-providers.md#settings). With a provider active, the Claude login step is skipped. +2. Add the key as a provider in [AI Settings](./09-ai-models-providers.md#settings). With a provider active, the Claude sign-in is skipped. You can also use any other provider with an Anthropic-compatible API. See [Models and Providers](./09-ai-models-providers.md#compatible-providers). @@ -61,6 +61,6 @@ If you entered a path in AI Settings and it no longer works, clear or correct it ## 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. +If your Claude login expires later, the chat shows a **Claude Code is signed out or your login has expired** notice with a **Sign in to Claude** button. Click it, finish signing in on the page that opens in your browser, then send your message again. ![Expired login notice](../images/pro/ai-login-expired.png "The expired login notice in the chat") diff --git a/docs/03-AI/02-ai-chatting.md b/docs/03-AI/02-ai-chatting.md index edcf6201..4f57c4bc 100644 --- a/docs/03-AI/02-ai-chatting.md +++ b/docs/03-AI/02-ai-chatting.md @@ -14,10 +14,10 @@ Click the **AI** tab *(sparkle icon)* in the sidebar. The panel opens on the sta - **Surprise Me**: Plays a demo of what the AI can do. See [Surprise Me](#surprise-me). - **Visual AI with Claude Code**: The built-in chat. Click the row, or the message box, and start typing. -- **Claude Code CLI** and **Codex CLI**: The command-line tools, running inside the panel. If you have not installed either CLI yourself, the two rows are folded into a *Use a CLI instead* line. Click it to open them. See [Claude Code CLI and Codex CLI](./06-ai-cli.md). +- **Claude Code CLI** and **Codex CLI**: The command-line tools, running inside the panel. If you have not installed either CLI yourself, the two rows are folded into a *Use a CLI instead* line. Click it to open them. You can run several sessions at once. See [Claude Code CLI and Codex CLI](./06-ai-cli.md). - **AI Settings**: The link at the bottom opens the settings dialog, where you can add a custom provider. See [Models and Providers](./09-ai-models-providers.md). -Once you have used the panel, the Surprise Me card shrinks to a *Want a demo? Surprise me.* line at the bottom, so the rows come first. +Once you have used the panel, or when you click the **x** on the card, the Surprise Me card shrinks to a *Want a demo? Surprise me.* line at the bottom, so the rows come first. ![The compact start screen](../images/pro/ai-start-compact.png "The start screen after the first chat") @@ -63,35 +63,26 @@ Phoenix Code tells the AI what you are looking at. Chips above the message box s - **Live Preview**: Shown while the Live Preview is open. The AI is told which page it shows. - **Selection L12-L40 in index.html**: Shown when you have text selected in the editor. A short selection goes with your message in full. For a longer one, the AI gets the line range and reads the lines itself. - **Line 26 in index.html**: Shown when nothing is selected. The AI is told which file you are in and where the cursor is. -- **Folder chips**: One for each folder you added with **Add folder as context**. See [Attachments](#attachments). +- **Folder chips**: One for each folder you added with **Add folder as context**. See [Attachments and Screenshots](#attachments-and-screenshots). The AI is also told which open files have unsaved changes, so it reads what you see in the editor instead of the file on disk. Click the **x** on a chip to leave that part out. The chip comes back when the selection, the cursor line, or the Live Preview changes. -## Attachments +## Attachments and Screenshots -Click the **paperclip** button to attach more context: +Click the **+** button next to the message box to attach more context: -![Attach menu](../images/pro/ai-attach-dropdown.png "Attach a file, or add a folder as context") +![Attach menu](../images/pro/ai-attach-menu.png "Files, folders, and screenshots in one menu") - **Attach a file**: Pick one or more files. Images are attached as pictures the AI can look at. Other files are attached as references, and the AI reads them when it needs to. - **Add folder as context**: Pick any folder, for example one outside your project. It appears as a chip, and the AI treats the files inside it like files in your project. The folder stays attached for this project until you remove the chip. +- **Area screenshot**: Draw a rectangle over any part of the window. Drag the handles to adjust it, or drag inside it to move it, then click **Capture** or press `Enter`. Click **Select the whole window** to capture all of it. Press `Esc` to cancel. +- **Live Preview screenshot**: Whatever the Live Preview shows, including a Markdown preview. +- **Live Preview selection screenshot**: Just the element selected in the Live Preview. It is greyed out until an element is selected on an HTML page. You can also paste an image, or files copied from your file manager, into the message box. Attachments appear in a tray above the message box. Click an image to see it full size, click a file to open it in the editor, or click the **x** to remove an attachment. A message can carry up to 10 images, in PNG, JPEG, GIF, WebP, or SVG. Large images are shrunk before they are sent. -## Screenshots - -Click the **camera** button to attach a screenshot: - -![Screenshot menu](../images/pro/ai-screenshot-dropdown.png "The screenshot options") - -- **Select Area**: Draw a rectangle over any part of the window. Drag the handles to adjust it, or drag inside it to move it, then click **Capture** or press `Enter`. Press `Esc` to cancel. -- **Live Preview**: The page in the Live Preview. The preview is opened if it is closed. -- **Live Preview Selection**: Just the element selected in the Live Preview. -- **Full Editor**: The whole Phoenix Code window. -- **Upload from Device**: Pick an image from your computer. - > The AI can take its own screenshots of the Live Preview and the editor while it works. They show up as cards in the chat, and a banner at the top of the preview reads *AI is inspecting the live preview* while it looks. ## Following the AI's Work @@ -116,10 +107,20 @@ When the AI needs a decision, it asks with a card. Click an option, or type your ![Question card](../images/pro/ai-question-card.png "A question with options and a custom answer box") -> Typing in the message box does not answer the question. It is queued until the question is answered. +> Typing in the message box does not answer the question. If you send a message while a question is waiting, the panel points you back to the question and keeps your draft. The AI can also ask inside the Live Preview, with options you can preview on the page. See [Questions in the Live Preview](./05-ai-ask.md#questions-in-the-live-preview). +### Interactive Replies + +The AI can answer with something you can try, not just read: a mockup of a layout, a few button styles to click through, a slider to find the right spacing, or a small working demo. It renders right in the chat, so you can explore an idea before anything touches your code. + +![An interactive reply](../images/pro/ai-interactive-reply.png "Button styles to compare, rendered in the chat") + +Click **See code** under the content to read the code behind it, with a **Copy code** button. Some interactive replies are questions with a reply box. Make your choice, add a note if you like, and send it from there. + +> To try options on your own page instead, see [Questions in the Live Preview](./05-ai-ask.md#questions-in-the-live-preview). + ### Code in Replies Code blocks in a reply have a **Copy** button in their header. Blocks longer than five lines can be collapsed with the chevron in the header or the bar at the bottom. Color codes outside code blocks get a swatch so you can see the color. diff --git a/docs/03-AI/03-ai-permission-modes.md b/docs/03-AI/03-ai-permission-modes.md index dc5016d0..1abfdc32 100644 --- a/docs/03-AI/03-ai-permission-modes.md +++ b/docs/03-AI/03-ai-permission-modes.md @@ -40,11 +40,11 @@ In Plan Mode the AI explores your project and then proposes a plan, which opens ![Proposed plan](../images/pro/ai-plan-fullscreen.png "A proposed plan, opened full screen") -- **Approve**: The AI carries out the plan in the same turn. The mode switches to **Auto** so it can edit files. -- **Revise**: Type what should change in the box at the bottom and send it. The AI stays in Plan Mode and proposes a new plan. -- **Stop**: Interrupts the AI and discards the plan. The panel stays in Plan Mode. +- **Approve**: The AI carries out the plan in the same turn. The mode switches to **Auto** so it can edit files, even if you started from AI Edit Mode. +- **Reject**: Interrupts the AI and discards the plan. The panel stays in Plan Mode. +- **What would you like changed?**: Type what should change in the box at the bottom and send it. The AI stays in Plan Mode and proposes a new plan. -Press `Esc`, click outside the plan, or click the **minimize** button to shrink it back into the chat. The card in the chat has the same **Approve** and **Revise** buttons, and an **expand** button *(diagonal arrows icon)* to open it full screen again. +Press `Esc`, click outside the plan, or click the **minimize** button to shrink it back into the chat. The card in the chat has the same buttons and box, and an **expand** button *(diagonal arrows icon)* to open it full screen again. ![Plan card in the chat](../images/pro/ai-plan-card.png "The plan card in the chat after approval") diff --git a/docs/03-AI/05-ai-ask.md b/docs/03-AI/05-ai-ask.md index 1d8d30ba..f45c4a43 100644 --- a/docs/03-AI/05-ai-ask.md +++ b/docs/03-AI/05-ai-ask.md @@ -32,7 +32,7 @@ The dialog can carry more than one thing: ![Picking an element](../images/pro/ai-ask-picker.png "Picking another element to add as context") -Up to 10 images can go with one question. Click the **x** on a card to remove it. The dialog keeps your draft when you close it, switch files, or close the Live Preview, so you can come back to it. +Up to 10 images can go with one question, including images pasted from the clipboard. Click the **x** on a card to remove it. The dialog keeps your draft when you close it, switch files, or close the Live Preview, so you can come back to it. > Drag the dialog by its header to move it. Double-click the header to put it back. @@ -60,9 +60,9 @@ Click it to attach the exact range to the dialog. The AI reads those lines from ## Sending to a CLI -The dialog sends to whichever assistant the AI panel is showing. When the panel is on **Claude Code CLI** or **Codex CLI**, the send button reads **Transfer to Claude Code CLI** or **Transfer to Codex CLI**. The question is pasted into the CLI's prompt, with a note about what is attached, and the CLI fetches the screenshots and code when it reads the question. Review the prompt and press `Enter` in the terminal to send it. +The dialog sends to whichever assistant the AI panel is showing. When the panel is on **Claude Code CLI** or **Codex CLI**, the send button reads **Transfer to Claude Code CLI** or **Transfer to Codex CLI**. The question is pasted into the CLI's prompt, with a note about what is attached, and the CLI fetches the screenshots and code when it reads the question. Review the prompt and press `Enter` in the terminal to send it. When several CLI sessions are running, the question goes to the one the panel is showing. -> The CLI must be connected to Phoenix and waiting at an empty prompt. If it is busy with a question or an approval, the dialog keeps your draft and tells you to finish that first. See [Claude Code CLI and Codex CLI](./06-ai-cli.md#connected-to-phoenix). +> The CLI must be running and connected to Phoenix. If it is not, the dialog keeps your draft and tells you what to do. See [Connected to Phoenix](./06-ai-cli.md#connected-to-phoenix). ## Questions in the Live Preview @@ -70,7 +70,7 @@ Sometimes the AI asks you something that is easier to answer by looking at the p ![A question in the Live Preview](../images/pro/ai-preview-question.png "A Phoenix AI asks card over the page, with an option previewed on the button") -Hover an option to preview it on the page, and click it to answer. You can also type an answer in the box at the bottom of the card. The AI can also ask you to pick an element: hover the page to outline one, click it to answer, or press `Esc` to cancel. The card can be dragged and resized, and the **minimize** button tucks it into a pill at the corner of the page until you need it. +Hover an option to preview it on the page. Click it to keep that preview and put the choice in the reply box, then click **Send** or press `Enter` to answer. You can keep comparing options before you send, or type your own answer in the box instead. The AI can also ask you to pick an element: hover the page to outline one, click it to answer, or press `Esc` to cancel. The card can be dragged and resized, and the **minimize** button tucks it into a pill at the corner of the page until you need it. When the question is about one element, the page is dimmed around it. Click the **focus** button in the card header to see the page as it is. diff --git a/docs/03-AI/06-ai-cli.md b/docs/03-AI/06-ai-cli.md index 13a32bcd..8cbbadc7 100644 --- a/docs/03-AI/06-ai-cli.md +++ b/docs/03-AI/06-ai-cli.md @@ -28,7 +28,7 @@ The terminal appears in the panel once the CLI is up, and the header changes to ![Claude Code CLI running in the panel](../images/pro/ai-cli-terminal.png "Claude Code CLI in the AI panel") -Both CLIs can run at the same time, and they keep running while you look at the other one, at Visual AI, or at another sidebar tab. A green dot on the row marks a running CLI. When a CLI finishes a turn while you are looking at something else, a notification says it is done. Click it to go to the session. +Both CLIs can run at the same time, and they keep running while you look at the other one, at Visual AI, or at another sidebar tab. A green dot on the row marks a running CLI. When a CLI finishes a turn while you are looking at something else, a notification says it is done. Click **View chat** to go to the session. > Free users can still run the CLIs from the bottom Terminal panel. Pick a CLI row and click **Open in Terminal**. The CLI then runs on its own, without the Phoenix Code connection. @@ -47,6 +47,16 @@ Click it to open the setup dialog: The saved path is shown in [AI Settings](./09-ai-models-providers.md#settings). Clear it to go back to automatic detection. If the saved path stops working, the dialog opens again with a **Detect automatically instead** link. +### Running Several Sessions + +You can run more than one session of the same CLI, for example one per task. Click **+ Add CLI session** above the rows and pick a CLI. The new session gets its own row, named like **Claude Code CLI 2**. Click the row to start it. + +![Several CLI sessions](../images/pro/ai-cli-sessions.png "An added Claude Code CLI session, with its row menu open") + +Click the **three-dot** button on a row to rename the session, stop it, or remove its row. Removing a running session stops it too. The sessions are also listed by name in the dropdown in the panel header, and the [Ask AI](./05-ai-ask.md#sending-to-a-cli) dialog sends to the one you are looking at. + +> Added sessions and their names last until you close Phoenix Code. + ## Connected to Phoenix The **plug** icon in the header shows the connection. Green means the CLI is connected. Click it to see what the connection gives the CLI, and to turn it off or on for this session: @@ -56,8 +66,8 @@ The **plug** icon in the header shows the connection. Green means the CLI is con While connected, the CLI: - Receives a line with every prompt that names the file you are editing, which open files have unsaved changes, and what the Live Preview shows while it is open. -- Can take screenshots of the editor and the Live Preview, run JavaScript in the page, resize the preview, read lint problems, search your unsaved text, open files and move the cursor, change editor settings, search Unsplash and save photos into the project, show notifications, and ask you questions inside the Live Preview. These appear in the terminal as `phoenix-editor` tools. -- Works on what you see. Before the CLI reads or edits a file with its own file tools, Phoenix Code saves your unsaved changes to it. Edits made with shell commands skip this. After the CLI edits a file, the open document updates. If you typed in that file in the meantime, Phoenix Code asks which version to keep, and the CLI stays out of that file until you save or close it. +- Can take screenshots of the editor and the Live Preview, run JavaScript in the page, resize the preview, read lint problems, search your unsaved text, open files and move the cursor, change editor settings, search Unsplash and save photos into the project, show notifications, and ask you questions inside the Live Preview or with an interactive card in the panel. These appear in the terminal as `phoenix-editor` tools. +- Works on what you see. Before the CLI reads or edits a file with its own file tools, Phoenix Code saves your unsaved changes to it. Edits made with shell commands skip this. After the CLI edits a file, the open document updates. If you typed in that file in the meantime, Phoenix Code asks which version to keep. Nothing is written into your project or into the CLI's own configuration. The connection is set up for the session and removed when it ends. diff --git a/docs/03-AI/08-ai-usage.md b/docs/03-AI/08-ai-usage.md index a9e3ea35..be17b019 100644 --- a/docs/03-AI/08-ai-usage.md +++ b/docs/03-AI/08-ai-usage.md @@ -29,7 +29,7 @@ Click the card, or **Details**, to open the breakdown: ![Usage details](../images/pro/ai-usage-details.png "The usage details for the last 30 days") -- The headline figures show spend, tokens, and active days for the period. Hover a figure to see the split by kind of token. +- The headline figures show spend, tokens, and active days for the period. Hover a figure, or a model row, to see the split by kind of token. - The bars show each day, split by model. Hover a bar or a heat map cell for that day's numbers. - **Top models** lists the top five models by spend, or by tokens when **Show $ cost** is off. Click **See more** for the rest. - **Activity** shows your longest streak, active days, and the average per active day. @@ -37,7 +37,13 @@ Click the card, or **Details**, to open the breakdown: The **reload** button *(circular arrow)* fetches the latest figures, for example after a chat in another Phoenix Code window or on another computer. -The card counts every Visual AI turn, and the API calls of [CLI sessions](./06-ai-cli.md) started from the panel with the Phoenix connection on, listed as `cli-` models. Usage belongs to your Phoenix Code account, so chats from every computer you sign in on are counted. +The card counts every Visual AI turn, and the API calls of [CLI sessions](./06-ai-cli.md) started from the panel with the Phoenix connection on, listed as `cli-` models. Codex usage on its Fast and Ultrafast tiers is listed on its own, since it is priced differently. Usage belongs to your Phoenix Code account, so chats from every computer you sign in on are counted. + +### Deleting Usage History + +Click **Delete history** at the bottom of the details to remove your usage and cost records for the past 24 hours, week, month, or all time. Your chats are kept. This cannot be undone. + +![Delete usage history](../images/pro/ai-usage-delete.png "The Delete usage history dialog") ## Free Account Limits diff --git a/docs/03-AI/09-ai-models-providers.md b/docs/03-AI/09-ai-models-providers.md index 0ac42d18..426fe1ef 100644 --- a/docs/03-AI/09-ai-models-providers.md +++ b/docs/03-AI/09-ai-models-providers.md @@ -16,6 +16,14 @@ You can switch models in the middle of a chat. The new model takes over from you > The model dropdown belongs to Visual AI. In a CLI session, pick the model inside the CLI. +## Thinking Effort + +Some models can think more or less before they answer. For these, a **bulb** chip sits next to the permission mode at the bottom of the panel. Click it to pick a level, from **Low** for quick, simple tasks to **Max** for hard problems that need deep reasoning. Higher levels take longer and use more tokens. **Default** leaves the choice to the model. + +![Thinking effort](../images/pro/ai-effort.png "The thinking effort chip and its slider") + +The levels offered depend on the selected model, and your choice is remembered per model. The chip is not shown for models without this setting, or when a provider with a custom endpoint is active. + ## Settings Click the **gear** button in the panel header, or the **AI Settings** link on the start screen, to open the settings dialog. diff --git a/docs/03-AI/index.md b/docs/03-AI/index.md index 166a0e0d..d010a8be 100644 --- a/docs/03-AI/index.md +++ b/docs/03-AI/index.md @@ -29,11 +29,12 @@ The panel gives you three assistants to choose from. Pick one on the start scree - **[Chat about your project](./02-ai-chatting.md)**: The AI knows which file you are in, what you have selected, and what the Live Preview shows. Attach files, folders, and screenshots for more context. - **[Ask about an element](./05-ai-ask.md)**: Click **Ask AI** on a selected element, a Markdown selection, or a code selection. A screenshot and the source location go along with your question. +- **[See options, not just text](./02-ai-chatting.md#interactive-replies)**: The AI can reply with mockups, buttons, and controls you can try right in the chat. - **[Decide how much it can do](./03-ai-permission-modes.md)**: Four permission modes, from a plan you approve first to full autonomy. - **[Review and undo changes](./04-ai-reviewing-changes.md)**: Every edit shows a diff. Roll back any response with **Undo** or **Restore to this point**. - **[Find photos](./07-ai-images.md)**: Ask for pictures and the AI searches Unsplash, shows the results in the chat, and adds the one you pick to the page. - **[Watch usage and cost](./08-ai-usage.md)**: Tokens and cost for the current chat, plus a usage calendar on the start screen. -- **[Pick a model or provider](./09-ai-models-providers.md)**: Switch models mid-chat, or bring your own API key and endpoint. +- **[Pick a model or provider](./09-ai-models-providers.md)**: Switch models mid-chat, set how hard the model thinks, or bring your own API key and endpoint. ## In This Section diff --git a/docs/images/pro/ai-attach-dropdown.png b/docs/images/pro/ai-attach-dropdown.png deleted file mode 100644 index 02a67fac..00000000 Binary files a/docs/images/pro/ai-attach-dropdown.png and /dev/null differ diff --git a/docs/images/pro/ai-attach-menu.png b/docs/images/pro/ai-attach-menu.png new file mode 100644 index 00000000..b6bf0c38 Binary files /dev/null and b/docs/images/pro/ai-attach-menu.png differ diff --git a/docs/images/pro/ai-cli-rows.png b/docs/images/pro/ai-cli-rows.png index 8541fba3..a0ef1a34 100644 Binary files a/docs/images/pro/ai-cli-rows.png and b/docs/images/pro/ai-cli-rows.png differ diff --git a/docs/images/pro/ai-cli-sessions.png b/docs/images/pro/ai-cli-sessions.png new file mode 100644 index 00000000..c56b559b Binary files /dev/null and b/docs/images/pro/ai-cli-sessions.png differ diff --git a/docs/images/pro/ai-effort.png b/docs/images/pro/ai-effort.png new file mode 100644 index 00000000..87e4b095 Binary files /dev/null and b/docs/images/pro/ai-effort.png differ diff --git a/docs/images/pro/ai-interactive-reply.png b/docs/images/pro/ai-interactive-reply.png new file mode 100644 index 00000000..20f841d4 Binary files /dev/null and b/docs/images/pro/ai-interactive-reply.png differ diff --git a/docs/images/pro/ai-login-expired.png b/docs/images/pro/ai-login-expired.png index 06a6ade9..d1d41861 100644 Binary files a/docs/images/pro/ai-login-expired.png and b/docs/images/pro/ai-login-expired.png differ diff --git a/docs/images/pro/ai-mode-dropdown.png b/docs/images/pro/ai-mode-dropdown.png index d766b314..ed749ff9 100644 Binary files a/docs/images/pro/ai-mode-dropdown.png and b/docs/images/pro/ai-mode-dropdown.png differ diff --git a/docs/images/pro/ai-permissions.png b/docs/images/pro/ai-permissions.png index ec64cf46..1f2346a1 100644 Binary files a/docs/images/pro/ai-permissions.png and b/docs/images/pro/ai-permissions.png differ diff --git a/docs/images/pro/ai-plan-card.png b/docs/images/pro/ai-plan-card.png index 94626683..4c29705c 100644 Binary files a/docs/images/pro/ai-plan-card.png and b/docs/images/pro/ai-plan-card.png differ diff --git a/docs/images/pro/ai-plan-fullscreen.png b/docs/images/pro/ai-plan-fullscreen.png index e67d0924..d2ee8816 100644 Binary files a/docs/images/pro/ai-plan-fullscreen.png and b/docs/images/pro/ai-plan-fullscreen.png differ diff --git a/docs/images/pro/ai-screenshot-dropdown.png b/docs/images/pro/ai-screenshot-dropdown.png deleted file mode 100644 index 90f6f0a6..00000000 Binary files a/docs/images/pro/ai-screenshot-dropdown.png and /dev/null differ diff --git a/docs/images/pro/ai-signin.png b/docs/images/pro/ai-signin.png index 947e56a3..dcc716b1 100644 Binary files a/docs/images/pro/ai-signin.png and b/docs/images/pro/ai-signin.png differ diff --git a/docs/images/pro/ai-start-compact.png b/docs/images/pro/ai-start-compact.png index 593c04c1..e5ad6dcf 100644 Binary files a/docs/images/pro/ai-start-compact.png and b/docs/images/pro/ai-start-compact.png differ diff --git a/docs/images/pro/ai-start-screen.png b/docs/images/pro/ai-start-screen.png index 6215b61e..c678f30c 100644 Binary files a/docs/images/pro/ai-start-screen.png and b/docs/images/pro/ai-start-screen.png differ diff --git a/docs/images/pro/ai-usage-chip.png b/docs/images/pro/ai-usage-chip.png index aeac2aea..dda9d28d 100644 Binary files a/docs/images/pro/ai-usage-chip.png and b/docs/images/pro/ai-usage-chip.png differ diff --git a/docs/images/pro/ai-usage-delete.png b/docs/images/pro/ai-usage-delete.png new file mode 100644 index 00000000..7134fdec Binary files /dev/null and b/docs/images/pro/ai-usage-delete.png differ diff --git a/docs/images/pro/ai-usage-details.png b/docs/images/pro/ai-usage-details.png index b156bae0..18c77cf7 100644 Binary files a/docs/images/pro/ai-usage-details.png and b/docs/images/pro/ai-usage-details.png differ diff --git a/docs/images/pro/markdown-image-lightbox.png b/docs/images/pro/markdown-image-lightbox.png new file mode 100644 index 00000000..9428eb81 Binary files /dev/null and b/docs/images/pro/markdown-image-lightbox.png differ