Add secrets manager documentation to GUI mode docs (OpenHands#9084)

Co-authored-by: openhands <[email protected]>

Author: neubig

docs/usage/how-to/gui-mode.mdx

@@ -27,7 +27,7 @@ You can use the Settings page at any time to:
 - [Configure MCP servers](/usage/mcp).
 - [Connect to GitHub](/usage/how-to/gui-mode#github-setup) and [connect to GitLab](/usage/how-to/gui-mode#gitlab-setup)
 - Set application settings like your preferred language, notifications and other preferences.
-- Generate custom secrets.
+- [Manage custom secrets](/usage/how-to/gui-mode#secrets-management).
 
 #### GitHub Setup
 
@@ -122,6 +122,36 @@ OpenHands automatically exports a `GITLAB_TOKEN` to the shell environment if pro
 </Accordion>
 </AccordionGroup>
 
+#### Secrets Management
+
+OpenHands provides a secrets manager that allows you to securely store and manage sensitive information that can be accessed by the agent during runtime, such as API keys. These secrets are automatically exported as environment variables in the agent's runtime environment.
+
+1. **Accessing the Secrets Manager**:
+   - In the Settings page, navigate to the `Secrets` tab.
+   - You'll see a list of all your existing custom secrets (if any).
+
+2. **Adding a New Secret**:
+   - Click the `Add New Secret` button.
+   - Fill in the following fields:
+     - **Name**: A unique identifier for your secret (e.g., `AWS_ACCESS_KEY`). This will be the environment variable name.
+     - **Value**: The sensitive information you want to store.
+     - **Description** (optional): A brief description of what the secret is used for, which is also provided to the agent.
+   - Click `Add Secret` to save.
+
+3. **Editing a Secret**:
+   - Click the `Edit` button next to the secret you want to modify.
+   - You can update the name and description of the secret.
+   - Note: For security reasons, you cannot view or edit the value of an existing secret. If you need to change the value, delete the secret and create a new one.
+
+4. **Deleting a Secret**:
+   - Click the `Delete` button next to the secret you want to remove.
+   - Confirm the deletion when prompted.
+
+5. **Using Secrets in the Agent**:
+   - All custom secrets are automatically exported as environment variables in the agent's runtime environment.
+   - You can access them in your code using standard environment variable access methods (e.g., `os.environ['SECRET_NAME']` in Python).
+   - Example: If you create a secret named `OPENAI_API_KEY`, you can access it in your code as `process.env.OPENAI_API_KEY` in JavaScript or `os.environ['OPENAI_API_KEY']` in Python.
+
 #### Advanced Settings
 
 The `Advanced` settings allows configuration of additional LLM settings. Inside the Settings page, under the `LLM` tab,