Layers and AI docs updates for 5.7

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
 

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

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

@@ -14,34 +14,34 @@ 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
 
 Once you are signed in, the panel shows the start screen. If Claude Code is not signed in to a Claude account yet, the **Visual AI with Claude Code** row shows a **Set up** button, and the message box reads *Set up Claude Code to start chatting*.
 
 ![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
 
 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 **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")

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.

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")
 

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,17 +60,17 @@ 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
 
 Sometimes the AI asks you something that is easier to answer by looking at the page: which of two layouts, which color, which element. It then shows a **Phoenix AI asks** card inside the Live Preview, with options it built for the question. If the preview is closed, it opens for the question. This works on HTML pages in the Live Preview panel, not in a page opened in an external browser.
 
 ![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.