chore: screenshot updates and copy improvements

packages/projects-docs/pages/learn/ai/boxy.mdx

@@ -5,61 +5,71 @@ description: Introduction to Boxy the AI-powered coding companion
 
 import { Callout } from 'nextra-theme-docs'
 
-
 # Meet Boxy
 
-Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.  
+<Callout emoji="⚠️">Boxy will be deprecated on July 31, 2024.</Callout>
+
+Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.
 
 ![run project with boxy](../images/boxy-overview.jpg)
 
 ## Boxy in the Editor
-If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar. 
 
-![run project with boxy](../images/boxy-avatar.jpg) 
+If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar.
+
+![run project with boxy](../images/boxy-avatar.jpg)
 
 The easiest way to work with Boxy is to select a piece of code and choose a saved prompt. When you select the code, you will see a toolbar hover above the top line of the selected code. From there, you can either open the DevTool to chat with Boxy or run a saved prompt.
 
 ![run project with boxy](../images/boxy-toolbar.jpg)
 
-
 - **Edit** shows prompts related to refactoring code.
 - **Ask** shows prompts related to chat actions.
 - The **AI icon** opens a chat DevTool.
 
 ### Command Palette
-Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`. 
-
-From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to. 
-
+
+Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`.
+
+From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to.
+
 When you ask Boxy to perform an action like `Document Code` or `Improve Readability` and you have code selected in the editor, Boxy will make suggestions directly in the file.
 
 If you ask Boxy to `Explain Code` or `Consider Security`, the chat DevTool will automatically open with Boxy's response.
-
 
 ## Boxy Chat
+
 Open a chat DevTool to have a conversation with Boxy. You can open a chat in two different ways:
+
 - select the AI icon in the toolbar.
 - open a new DevTool and select `Chat with Boxy`.
 
-You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat. 
+You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat.
 
 Below are a few tips and tricks that can help you make the most of your interactions with Boxy.
 
 ## Tips and Tricks
+
 ### Tips
+
 **Keep chatting**
 Boxy remembers your previous conversations and takes them into account when providing responses. For example, if you have asked Boxy to include the file path for the suggested code repeatedly in the past, it will include it in future responses.
 
 **Request response formats**
-Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like. 
+Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like.
 
 **When in doubt, provide more context**
 Boxy will give you what you ask for. They may make suggestions based on the way your frame your question. Boxy may have better responses when you ask them to consider specific files or libraries that may contain useful context for your question.
 
 ### Tricks
+
 - use backticks for keywords or code segments
 - use "again" to repeat your last prompt
 
 ## Commit suggestions
+
 Say goodbye to nondescriptive or confusing commit messages. When you enable AI to work on repositories, Boxy will automatically generate commit messages based on the files changed in your branch. You can easily edit or remove these suggestions according to your preference.
 
+## Boxy for Sandboxes
+
+Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your Sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.

packages/projects-docs/pages/learn/ai/faqs.mdx

@@ -21,4 +21,4 @@ Yes. Boxy is available in all plans.
 
 No. Boxy is exclusively available in devboxes and repositories. However, you can easily [convert a Sandbox into a Devbox](/tutorial/convert-browser-sandbox-cloud) to get access to Boxy. This is available through the "Convert to Devbox" button at the top right of the Sandbox editor.
 
-![Convert browser sandbox](../images/convert-sandbox-from-ai.png)
+![Convert Sandbox to Devbox](../images/convert-sandbox-to-devbox.jpg)

packages/projects-docs/pages/learn/ai/getting-started.mdx

@@ -4,19 +4,13 @@ description: Instructions for getting started with AI
 ---
 
 # Getting Started
-All CodeSandbox AI tools are available for Pro users. To enable these features, admins need to grant permissions in the workspace settings.
-
-![run project with boxy](../images/boxy-permission.jpg)
 
+All CodeSandbox AI tools are available to Free and Pro users. To enable these features, admins need to grant permissions in the [workspace settings](https://codesandbox.io/t/permissions).
 
+![AI Permissions](../images/ai-permissions.jpg)
 
 Once you grant AI permissions, CodeSandbox will send information about the event to OpenAI for analysis. Under no circumstances will we send any event data to OpenAI without explicit instruction to do so. We will only share selected event data with OpenAI after you toggle on these permissions. OpenAI does not use the event data shared via this feature to train its AI models. To learn more about our privacy agreement with OpenAI, check out our [Privacy page](https://codesandbox.io/legal/privacy).
 
 ## Running AI
-Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.		
-
-## Boxy for Sandboxes
-Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.
-
-
 
+Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.

packages/projects-docs/pages/learn/editors/desktop-setup.mdx

@@ -49,7 +49,7 @@ Once you open the branch, follow these steps:
 1. Click on the dropdown icon of the "Open in VS Code" button.
 1. In the dropdown menu, click on the "Open in VS Code Insiders" option.
 
-![Dropdown to select the Open in VS Code Insiders option](../images/vs-code-insiders-open.jpg)
+![Dropdown to select the Open in VS Code Insiders option](../images/vscode-desktop-open.png)
 
 <br/>
 ### In the command palette

packages/projects-docs/pages/learn/editors/settings.mdx

@@ -20,7 +20,7 @@ import { Tabs, WrapContent } from '../../../../../shared-components/Tabs'
 
         #### VIM
 
-        For all the VIM users, this setting enables the use of the command palette to control VIM.
+        This setting enables all VIM users out there to use the command palette to control VIM.
 
         #### Pointer cursor
         Enabled by default, this setting determines if the cursor is displayed as a pointer over interactive elements.

packages/projects-docs/pages/learn/editors/web-interface.mdx

@@ -17,12 +17,11 @@ In the Terminal panel, you can see all the running tasks, private terminals, and
 
 While the layout is entirely customizable, the standard layout opens previews, and support tools like documentation and setup tools in the right editor panel.
 
-
 ## Tasks, Terminals and Previews
 
 Preview ports, Tasks and shared terminals are controlled through the devtool extension in the sidebar.
 
-![CSB devtool](../images/vscode-web-devtools.png)
+![CodeSandbox DevTools](../images/devtools.jpg)
 
 **Tasks**
 

packages/projects-docs/pages/learn/repositories/_meta.json

@@ -29,7 +29,7 @@
     "title": "File Upload",
     "href": "/learn/devboxes/upload"
   },
-  "review": "Code Reviews",
+  "review": "PR Reviews",
   "open-source": "Open Source Collaboration",
   "collaborate-share": "Collaborate & Share"
 }

packages/projects-docs/pages/tutorial/convert-browser-sandbox-cloud.mdx

@@ -5,56 +5,37 @@ description: Learn how to quickly convert CodeSandbox browser sandboxes into the
 
 # Convert a Sandbox into a Devbox
 
-CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: sandboxes and devboxes.
+CodeSandbox provides two different sandboxing environments you can use to quickly experiment with code, learn, prototype a project and share it with others: Sandboxes and Devboxes.
 
 Devboxes are part of our evolved CodeSandbox experience, so we now provide a way to easily convert existing browser sandboxes into this new experience.
 
 ## Why convert into a Devbox?
 
-Cloud and browser sandboxes are valuable tools for web development projects, but they have critical differences regarding their capabilities and limitations.
+Sandboxes and Devboxes are valuable tools for web development projects, but they have critical differences regarding their capabilities and limitations.
 
-[Browser sandboxes](/learn/sandboxes/editors?tab=browser), also known as client-side sandboxes, run directly within the user's web browser. Because they rely on browser features to provide environments for running code, they are lightweight and easy to use. Still, they do not provide the same level of scalability and isolation as virtualized environments since they rely heavily on the browser.
+[Sandboxes](/learn/sandboxes/editor-features) run directly within the user's web browser. Because they rely on browser features to provide environments for running code, they are lightweight and easy to use. Still, they do not provide the same level of scalability and isolation as virtualized environments since they rely heavily on the browser.
 
-In contrast, [Devboxes](/learn/sandboxes/editors?tab=cloud) use [microVMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These microVMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than browser sandboxes.
+In contrast, [Devboxes](/learn/devboxes/overview) use [VMs](/learn/environment/vm) to provide an isolated and secure environment for running code. These VMs are lightweight and optimized for running web applications, and they provide a more consistent and predictable environment for running code than Sandboxes.
 
-As a result, Devboxes get rid of several [limitations of sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, Devboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility.
+As a result, Devboxes get rid of several [limitations of Sandboxes](/faq#are-there-any-limitations-with-sandboxes), while offering additional benefits when managing and scaling infrastructure. Namely, Devboxes can be easily scaled up or down to accommodate project needs, offering more resource allocation and management flexibility.
 
 Additionally, Devboxes are collaborative by default, allowing for easier collaboration among team members, as developers can easily share their code and collaborate in real time. This sets CodeSandbox apart from other cloud development tools.
 
 ### Feature comparison
 
 Besides the benefits presented above, there are some other noteworthy features that are only available in Devboxes:
+
 - built-in [Docker support](/learn/environment/docker)
 - support for any programming language (using Docker)
 - Boxy [AI assistant](/learn/boxy/overview)
 - collaborative [terminals](/learn/repositories/terminal) with `root` access
-- [VS Code integration](/learn/getting-started/setting-up-vscode)
+- [VS Code Desktop integration](/learn/getting-started/setting-up-vscode)
 - element inspector
 - [tasks](/learn/repositories/task)
+- [live sessions](/learn/devboxes/live-sessions)
 
-However, Devboxes currently do not offer feature parity to Sandboxes. The following Sandboxes features are currently not available in Devboxes:
-- deployment menu
-- live sessions
-
-## Convert into a Devbox via URL
-
-There are several ways to convert a Sandbox into a Devbox. The first is from the URL.
-
-Usually, Sandboxes start with `https://codesandbox.io/s/`. To convert into Devbox, you can replace the prefix with `https://codesandbox.io/p/sandbox/`. This will automatically open up a Devbox.
-
-## Convert from the browser sandbox UI
-
-There are a few prompts for converting a sandbox in the browser sandbox UI.
-
-### Terminal tab
-
-If you want to access the terminal in the browser sandbox UI, we suggest you convert it into a Devbox since the experience is much better there.
-
-![Convert from terminal](/convert-from-terminal.png)
-
-### Sidebar icons
-
-In case you want to use some cloud-only features such as Docker, VS Code integration or AI, click the corresponding icon on the left sidebar. This will display a prompt allowing you to convert or fork the sandbox to get access to those features.
+## Convert a Sandbox to a Devbox
 
-![Convert from left sidebar](/convert-from-sidebar.png)
+You can convert most Sandboxes into a Devbox by clicking the "Convert to Devbox" button at the top right of the Sandbox editor.
 
+![Convert Sandbox to Devbox](https://assets.codesandbox.io/images/convert-sandbox-to-devbox.jpg)