diff --git a/AGENTS.md b/AGENTS.md index 3b29230..d3ad135 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -177,6 +177,26 @@ Use formatting consistently to distinguish different types of content: - File naming: lowercase, hyphens, descriptive (`agent-mode-code-diff.png`, not `Screenshot 2026-03-15.png`) - Store PNGs in `src/assets/
/` (Astro optimizes them) and GIFs in `public/assets/
/` (to bypass optimization). See the "Assets" section below for the full convention. +#### Image caption guidelines +Captions orient the reader — they identify what the image shows so the reader knows where to look. They are not a place for instructions, marketing language, or exhaustive descriptions. + +**Rules:** +- **Orient, don't instruct** — describe what is shown, not what to do. Procedural steps belong in the body text. +- **Write complete sentences** — every caption should read as a standalone sentence, not a fragment or label. A reader should understand what the image shows without looking at it. +- **Keep it short** — aim for 10 words or fewer. Never exceed ~20 words. +- **No marketing language** — avoid "easily," "quickly," "powerful," "at a glance," or similar. +- **Don't repeat the prose** — if the paragraph above already describes the image, the caption should add context, not echo it. +- **Don't list everything visible** — name the subject, not every detail in the screenshot. +- **Sentence case, end with a period** — consistent with all other text in the docs. + +**Examples:** +- ✅ `
The Environments page in the Oz web app.
` +- ✅ `
Agent Profile settings.
` +- ✅ `
Codebase indexing settings.
` +- ❌ `
Codebase indexing settings in Warp. Easily track sync status and manage which folders are indexed for AI-powered context and suggestions.
` (marketing language, too long) +- ❌ `
Click the toast to jump to the agent's session.
` (procedural — belongs in body text) +- ❌ `
Universal Input's contextual input chips, from left to right: conversation management, node version, active directory, Git and code diffs, and 2 attached images.
` (exhaustive list) + ### Links and cross-references - Use descriptive link text that explains what users will find - ✅ "Learn more about [Codebase Context](...)" / "See [configuring environments](...)" diff --git a/src/content/docs/agent-platform/capabilities/agent-notifications.mdx b/src/content/docs/agent-platform/capabilities/agent-notifications.mdx index ef50787..503f08a 100644 --- a/src/content/docs/agent-platform/capabilities/agent-notifications.mdx +++ b/src/content/docs/agent-platform/capabilities/agent-notifications.mdx @@ -25,13 +25,19 @@ Floating toast notifications appear in the corner of the Warp window when an age Up to two toasts are visible at a time. If additional notifications arrive, the oldest toast is replaced. +
![A Warp toast notification in the upper-right corner showing an agent task completed, with an Open conversation action and a keyboard shortcut chip](../../../../assets/agent-platform/toast-notification.png) +
Agent task completion notification.
+
### Notification mailbox The notification mailbox is a sidebar panel that collects all agent notifications in one place. Open it from the bell icon in the top-right corner of Warp. +
![The Warp notification mailbox open in the upper-right of the window with All tabs and Unread filter tabs, a Mark all as read action, and a notification entry](../../../../assets/agent-platform/notification-mailbox.png) +
Agent notification mailbox.
+
The mailbox includes: @@ -83,7 +89,10 @@ For **third-party CLI agents**, each agent requires a one-time setup. The proces * **Codex** - add `notification_condition = "always"` under `[tui]` in `~/.codex/config.toml`, then restart Codex. See [Codex setup](/agent-platform/cli-agents/codex/#setting-up-notifications). * **OpenCode** - add `"@warp-dot-dev/opencode-warp"` to the `plugin` array in your OpenCode config. See [OpenCode setup](/agent-platform/cli-agents/opencode/#setting-up-notifications). +
![The Enable Claude Code notifications chip in the agent utility bar with a tooltip reading Install the Warp plugin to enable rich agent notifications within Warp](../../../../assets/agent-platform/enable-cli-agent-notifications.png) +
Notification plugin install chip.
+
If auto-install doesn't work or you're running an agent over SSH, Warp displays an installation-instructions chip in the terminal with setup steps you can follow directly. diff --git a/src/content/docs/agent-platform/capabilities/agent-profiles-permissions.mdx b/src/content/docs/agent-platform/capabilities/agent-profiles-permissions.mdx index d1cbaa0..c93c436 100644 --- a/src/content/docs/agent-platform/capabilities/agent-profiles-permissions.mdx +++ b/src/content/docs/agent-platform/capabilities/agent-profiles-permissions.mdx @@ -13,7 +13,10 @@ Agent Profiles let you configure how your Agent behaves in different situations. * **Default profile**: Every user starts with a default profile, you can edit it at any time, and new profiles will copy its settings as a starting point. * **Other profiles**: Set up different profiles for different workflows (e.g., "Safe & cautious", "YOLO mode", etc.). Manage them in the Profiles settings menu. +
![Agent Profiles in Settings: define how your Agent operates.](../../../../assets/agent-platform/agent-profiles.png) +
Agent Profile settings.
+
**In each Agent Profile, you can configure:** @@ -21,7 +24,10 @@ Agent Profiles let you configure how your Agent behaves in different situations. * **Base model**: The core engine for your Agent. It handles most interactions and invokes other models when needed (e.g. for code generation). This model is also used for [Planning](/agent-platform/capabilities/planning/) by default, though you can configure a separate planning model. * Agent autonomy and permissions +
![Agent Profiles in Settings: editing a Profile.](../../../../assets/agent-platform/agent-profiles-settings.png) +
Editing an Agent Profile.
+
## Agent Permissions @@ -63,7 +69,10 @@ The Agent lets you define an allowlist of commands that run automatically withou You can add your own regular expressions to this list in **Settings** > **Agents** > **Profiles** > **Command allowlist**. Commands in the allowlist will always auto-execute, even if they are not read-only operations. +
![Command allowlist and denylists as part of an Agent Profile.](../../../../assets/agent-platform/agent-profiles-allow-and-denylists.png) +
Command allowlist and denylists as part of an Agent Profile.
+
### Command denylist @@ -86,7 +95,10 @@ In this settings menu, you can configure which MCP servers the Agent is allowed * Use the MCP denylist to require approval before calling certain servers, even if they’re also in the allowlist. * Or set the Agent to “decide” — it will act autonomously when confident, and ask for confirmation when uncertain. +
![Customize how the Agent interacts with MCP servers by choosing between “Agent decides,” allowlist, or denylist settings.](../../../../assets/agent-platform/MCP_servers_agent_permissions.png) +
MCP server interaction settings in an Agent Profile.
+
:::note To learn how to build and configure your own MCP server, check out the [MCP feature docs](/agent-platform/capabilities/mcp/). @@ -108,7 +120,10 @@ During an Agent interaction, you can give the Agent full autonomy for the curren +
![A button overlay in the lower-right corner lets you enable auto-approve or end the Agent interaction.](../../../../assets/agent-platform/run-until-completion.png) +
Auto-approve and take-over controls.
+
:::note _Run until completion_ ignores the denylist entirely. It's the purest form of “YOLO” mode and essentially a fully "autonomous mode" where the Agent proceeds without asking for confirmation. diff --git a/src/content/docs/agent-platform/capabilities/codebase-context.mdx b/src/content/docs/agent-platform/capabilities/codebase-context.mdx index 56d3621..03b7b0f 100644 --- a/src/content/docs/agent-platform/capabilities/codebase-context.mdx +++ b/src/content/docs/agent-platform/capabilities/codebase-context.mdx @@ -47,7 +47,10 @@ Feature requests: * WSL: [GitHub #6744](https://github.com/warpdotdev/Warp/issues/6744) ::: +
![Codebase indexing settings in Warp. Easily track sync status and manage which folders are indexed for AI-powered context and suggestions.](../../../../assets/agent-platform/codebase-context-main.png) +
Codebase indexing settings.
+
**Codebase indexing intervals and triggers:** @@ -79,7 +82,10 @@ When viewing indexed codebases in Warp under **Settings** > **Code** > **Indexin * **Failed** – Indexing failed. Common reasons include unreadable `.git` directories or corrupted repositories. Try re-cloning the repo and syncing again. * **Codebase too large** – The number of files in the codebase exceeds your current plan’s limit. You can either reduce the number of files being indexed using `.warpindexingignore`, or [contact sales](https://warp.dev/contact-sales) for support with larger codebases. +
![View and manage the indexing status of your codebases in Warp. Easily see which projects are synced, in progress, or require attention.](../../../../assets/agent-platform/codebase-context-statuses.png) +
Codebase indexing status overview.
+
### When does codebase syncing happen? diff --git a/src/content/docs/agent-platform/capabilities/full-terminal-use.mdx b/src/content/docs/agent-platform/capabilities/full-terminal-use.mdx index d230f28..cd2f865 100644 --- a/src/content/docs/agent-platform/capabilities/full-terminal-use.mdx +++ b/src/content/docs/agent-platform/capabilities/full-terminal-use.mdx @@ -33,7 +33,10 @@ You can either ask the agent to run an interactive command, or start one manuall * Example: * If you’ve already launched an interactive tool (for example `psql` or `npm run dev`), you can bring the agent into the running session using the "Use Agent" button in the terminal footer or via `CMD + I` . +
![Option to tag the agent into a running command.](../../../../assets/agent-platform/full-terminal-use-tag-hint.png) +
Option to tag the agent into a running command.
+
* Once the agent is tagged in, you can follow up with natural-language requests such as: “Watch this process and help debug the error on the /session endpoint.” @@ -41,9 +44,15 @@ You can either ask the agent to run an interactive command, or start one manuall +
![Running a build command.](../../../../assets/agent-platform/full-terminal-use-build.png) +
Running a build command.
+
+
![Tagging in the Agent to monitor the dev server.](../../../../assets/agent-platform/full-terminal-use-dev-monitor.png) +
Tagging in the Agent to monitor the dev server.
+
Warp attaches the agent to the running command so it can see and control the terminal buffer. @@ -68,14 +77,20 @@ You can swap control at any time. * Use the Takeover control to stop the agent from typing or performing any actions. * The shell stays open, and you can type directly into the same session. +
![Option to take over from agent in the footer.](../../../../assets/agent-platform/full-terminal-use-takeover.png) +
Option to take over from agent in the footer.
+
**Hand back control** * When you’re ready for the agent to continue, click the control again. * The agent resumes where you left off, with full access to the current terminal state. +
![Option to hand-off to the agent in the conversation footer.](../../../../assets/agent-platform/full-terminal-use-handoff.png) +
Option to hand-off to the agent in the conversation footer.
+
This makes it easy to: @@ -140,7 +155,10 @@ Each time the agent wants to take an action inside an interactive shell, you’l * Refine the request with `CTRL + C`, which clears the proposed action and lets you follow up with a different query. * Take over manually with `CMD + I`, which stops the agent from issuing any further PTY writes until you hand control back. +
![Allow, Refine, or Take over an agent response.](../../../../assets/agent-platform/allow-refine-takeover.png) +
Allow, Refine, or Take over an agent response.
+
![Ability to accept or auto-approve future interactions.](../../../../assets/agent-platform/full-terminal-use-options-2.png) diff --git a/src/content/docs/agent-platform/capabilities/mcp.mdx b/src/content/docs/agent-platform/capabilities/mcp.mdx index b83bea6..b8b8a06 100644 --- a/src/content/docs/agent-platform/capabilities/mcp.mdx +++ b/src/content/docs/agent-platform/capabilities/mcp.mdx @@ -26,7 +26,10 @@ You can navigate to the MCP servers page in any of the following ways: This will show a list of all configured MCP servers, including which are currently running. If you close Warp with an MCP server running, it will run again on next start of Warp. MCP servers that are stopped will remain so on next launch of Warp. +
![MCP servers page](../../../../assets/agent-platform/mcp-servers-list.png) +
MCP servers page.
+
### Adding an MCP Server @@ -38,7 +41,10 @@ MCP server types you can add: Provide a startup command. Warp will launch this command when starting up and shut it down on exit. +
![Adding a CLI MCP Server (Command)](../../../../assets/agent-platform/mcp-servers-add-cli.png) +
Adding a CLI MCP Server (Command).
+
:::note Always set `working_directory` explicitly when your MCP server command or args include relative paths. This ensures consistent and predictable behavior across machines and sessions. @@ -56,7 +62,10 @@ MCP server types you can add: Provide a URL where Warp can reach an already-running MCP server that supports Server-Sent Events. +
![Adding an SSE MCP Server (URL)](../../../../assets/agent-platform/mcp-servers-add-sse.png) +
Adding an SSE MCP Server (URL).
+
**Streamable HTTP or SSE Server (URL) MCP Configuration Properties** @@ -161,7 +170,10 @@ You can rename and edit a server's name, as well as delete the server. If you ar MCP servers can be shared with your teammates by clicking the share icon. When sharing, sensitive values in the `env` configuration will be automatically scrubbed and replaced with variables. +
![Sharing a MCP Server](../../../../assets/agent-platform/mcp-servers-share.png) +
Sharing a MCP Server.
+
Your teammates can find shared MCP servers under the `Shared` section of their MCP settings. When your teammates install your server configuration, they will be prompted to enter any scrubbed `env` values. diff --git a/src/content/docs/agent-platform/capabilities/model-choice.mdx b/src/content/docs/agent-platform/capabilities/model-choice.mdx index 03bf595..95e14e6 100644 --- a/src/content/docs/agent-platform/capabilities/model-choice.mdx +++ b/src/content/docs/agent-platform/capabilities/model-choice.mdx @@ -91,7 +91,10 @@ Warp also supports leading open source models hosted via Fireworks AI, so you ca You can use the model picker in your prompt input to quickly switch between models. The currently active model appears directly in the input editor. +
![Model selector dropdown showing available models with Intelligence, Speed, and Cost benchmarks](../../../../assets/agent-platform/model-selector-dropdown.png) +
Model selector in Warp's input.
+
To change models, click the displayed model name (for example, _Claude Sonnet 4.5_) to open a dropdown with all supported options. Your selection will automatically persist for future prompts. diff --git a/src/content/docs/agent-platform/capabilities/planning.mdx b/src/content/docs/agent-platform/capabilities/planning.mdx index 78761e4..aa45917 100644 --- a/src/content/docs/agent-platform/capabilities/planning.mdx +++ b/src/content/docs/agent-platform/capabilities/planning.mdx @@ -18,7 +18,10 @@ Warp has native planning functionality that helps you break down complex enginee You can generate a plan using the `/plan` [slash command](/agent-platform/capabilities/slash-commands/) or by asking the agent in natural language. +
![Prompting the agent to create a plan using the slash command.](../../../../assets/agent-platform/plan-slash-command.png) +
Creating a plan with the /plan command.
+
The agent then creates a structured plan inside Warp’s native rich text editor, which is designed for long, multi-step workflows. The editor includes clean formatting, inline code blocks, and clickable file paths so you can open referenced files immediately in Warp (see below) or in your external editor. @@ -26,29 +29,44 @@ The agent then creates a structured plan inside Warp’s native rich text editor Once a plan is generated, you can review it, reorganize steps, or refine details. You can edit the document manually or ask the agent to revise sections for you. +
![Plan editor in Warp.](../../../../assets/agent-platform/planning-main-view.png) +
Plan editor in Warp.
+
Any update made by the agent **creates a new version**. Version history lets you compare past iterations and restore an older version if you want to revert your approach, preserving a clear decision trail as the plan evolves. +
![Access previous versions of your plan.](../../../../assets/agent-platform/agent-plans-versioning.png) +
Access previous versions of your plan.
+
### Executing a plan When you’re ready to start implementing, prompt the agent to run the plan. You can ask it to execute the full set of steps or only a specific section, such as “Implement phase 1 of the plan.” +
![Manually referencing the plan using @ to kickoff the plan.](../../../../assets/agent-platform/manually-trigger-plan.png) +
Referencing a plan using @.
+
The agent applies changes incrementally and updates files as it proceeds. This makes it easy to validate early steps before moving forward, adjust the plan mid-run, or try alternative paths without committing to the full workflow. If you revise the plan while the agent is running, you can notify it directly; the agent will adjust its execution based on your updates. +
![Option to pass new plan to agent if plan changes during runtime.](../../../../assets/agent-platform/update-agent-mid-plan.png) +
Prompt to update the agent's plan during execution.
+
### Monitoring progress While the agent is running, you can reopen the plan at any time by selecting **View plan** in the input. You can also follow each change in real time through the [Code Review](/code/code-review/) panel and add comments or guidance using [Interactive Code Review](/agent-platform/local-agents/interactive-code-review/). +
![Monitoring progress with the task list and plan view.](../../../../assets/agent-platform/agent-plans-tasks.png) +
Monitoring progress with the task list and plan view.
+
This gives you clear oversight, helps confirm expected behavior, and lets you intervene quickly if something needs correction. @@ -56,15 +74,24 @@ This gives you clear oversight, helps confirm expected behavior, and lets you in Warp automatically saves all plans in the _Plans_ folder in [Warp Drive](/knowledge-and-collaboration/warp-drive/). You'll see a confirmation when your plan is synced. +
![Plans are automatically synced to Warp Drive.](../../../../assets/agent-platform/agent-plans-synced.png) +
Plans are automatically synced to Warp Drive.
+
You can export any plan as Markdown, check it into your repository, or share a link—useful for GitHub PRs, design reviews, or async collaboration. +
![Different ways to share a plan.](../../../../assets/agent-platform/export-notebooks.png) +
Different ways to share a plan.
+
Because plans persist in Warp Drive, you can return to them later, reuse them for new work, or treat them as documentation for ongoing projects. This is also naturally passed to the agent as context. +
![Plans are accessible directly from the Warp Drive side panel.](../../../../assets/agent-platform/plans-in-warp-drive-side-panel.png) +
Plans are accessible directly from the Warp Drive side panel.
+
You can configure whether your plans will be automatically added and synced to Warp Drive in your [Agent Profiles & Permissions](/agent-platform/capabilities/agent-profiles-permissions/) under **Settings** > **Agents** > **Profiles**. diff --git a/src/content/docs/agent-platform/capabilities/rules.mdx b/src/content/docs/agent-platform/capabilities/rules.mdx index dbe86b0..868c101 100644 --- a/src/content/docs/agent-platform/capabilities/rules.mdx +++ b/src/content/docs/agent-platform/capabilities/rules.mdx @@ -87,7 +87,10 @@ This ensures the most specific, project-relevant rules take priority over broade * From the macOS Menu: `AI > Open Rules` * From the Slash Commands menu: `/open-project-rules` to open Project Rules directly in Warp's code editor +
![Project Rules UI open in a Rules pane](../../../../assets/agent-platform/project-scoped-rules-pane.png) +
Project Rules UI open in a Rules pane.
+
## How to create, edit, or delete Rules @@ -115,9 +118,15 @@ To view all Project Rules and open them in Warp, access it via the Warp Drive Ru When relevant, Agents automatically pull in applicable rules to guide their responses. Rules used in an interaction will appear in the conversation under **References** or marked as derived from a specific rule. +
![Context derived from memory](../../../../assets/agent-platform/context-derived-from-memory.png) +
An agent response showing which rules were applied.
+
+
![Context derived from memory](../../../../assets/agent-platform/context-references-memory.png) +
Rules listed as references in an agent conversation.
+
### Rules privacy diff --git a/src/content/docs/agent-platform/capabilities/slash-commands.mdx b/src/content/docs/agent-platform/capabilities/slash-commands.mdx index ef24b7b..e3a2d51 100644 --- a/src/content/docs/agent-platform/capabilities/slash-commands.mdx +++ b/src/content/docs/agent-platform/capabilities/slash-commands.mdx @@ -7,7 +7,10 @@ description: >- When using Agent Mode or Auto-Detection Mode, typing `/` in the input field opens the Slash Commands menu. +
![Slash Commands menu](../../../../assets/agent-platform/slash-commands-menu.png) +
Slash Commands menu.
+
As you type, the menu filters results in real time, making it easy to find and run the command or prompt you need. @@ -28,7 +31,10 @@ In addition to static commands, the menu also shows [Agent Prompts](/knowledge-a * These prompts can be custom ones you’ve created or ones shared with you. * As you type after `/`, prompts are filtered dynamically, so you can quickly run them without leaving the input field. +
![Slash Commands menu with filtered Agent Prompts](../../../../assets/agent-platform/slash-commands-prompts.png) +
Slash Commands menu with filtered Agent Prompts.
+
### Tips @@ -39,6 +45,12 @@ In addition to static commands, the menu also shows [Agent Prompts](/knowledge-a Below is an example interaction when `/init` is run: +
![/init setup flow; 1 of 2](../../../../assets/agent-platform/init-setup-flow-1.png) +
The /init setup flow, step 1 of 2.
+
+
![/init setup flow; 2 of 2](../../../../assets/agent-platform/init-setup-flow-2.png) +
The /init setup flow, step 2 of 2.
+
diff --git a/src/content/docs/agent-platform/capabilities/task-lists.mdx b/src/content/docs/agent-platform/capabilities/task-lists.mdx index 2ce6b8a..06c6912 100644 --- a/src/content/docs/agent-platform/capabilities/task-lists.mdx +++ b/src/content/docs/agent-platform/capabilities/task-lists.mdx @@ -10,7 +10,10 @@ The Agent can automatically break down complex requests into clear, trackable st \ When you make a sufficiently complex request that requires multiple actions, the Agent will automatically create a list of steps, execute them in order, and track progress from start to finish. There’s no need to adjust settings or enable a special mode—the Agent detects and creates task lists automatically. +
![An example of a task list in progress.](../../../../assets/agent-platform/in-progress-tasklist.png) +
An example of a Task List in progress.
+
### How task lists work @@ -20,7 +23,10 @@ When you make a sufficiently complex request that requires multiple actions, the After each step is completed, there is also a completion marker in the Agent conversation. +
![Completion markers inside the Agent conversation after each task is completed.](../../../../assets/agent-platform/completion-markers.png) +
Task completion markers in a conversation.
+
### Task statuses @@ -37,4 +43,7 @@ During any Agent conversation, a task list chip appears at the bottom-right of t * Click the chip to open the current task list. * You can collapse or expand the view at any time without interrupting the Agent. +
![Access the task list during an Agent conversation in the task list chip in the conversation.](../../../../assets/agent-platform/tasklist-popup.png) +
Task List chip in an agent conversation.
+
diff --git a/src/content/docs/agent-platform/cli-agents/overview.mdx b/src/content/docs/agent-platform/cli-agents/overview.mdx index 84fbfe0..9fbad2f 100644 --- a/src/content/docs/agent-platform/cli-agents/overview.mdx +++ b/src/content/docs/agent-platform/cli-agents/overview.mdx @@ -28,7 +28,10 @@ Warp currently supports the following CLI coding agents: When you launch a supported agent inside Warp, the **agent toolbelt** appears automatically, giving you quick access to Warp's enhanced features. +
![The agent toolbelt appearing at the bottom of the pane when a supported CLI agent is running in Warp](../../../../assets/agent-platform/cli-agent-toolbelt.png) +
The agent toolbelt for CLI agents.
+
## Feature support diff --git a/src/content/docs/agent-platform/cli-agents/remote-control.mdx b/src/content/docs/agent-platform/cli-agents/remote-control.mdx index a5f149d..eda91e7 100644 --- a/src/content/docs/agent-platform/cli-agents/remote-control.mdx +++ b/src/content/docs/agent-platform/cli-agents/remote-control.mdx @@ -32,7 +32,10 @@ Remote Control differs from standard [Agent Session Sharing](/agent-platform/loc 1. Start or resume a third-party agent session in Warp (for example, Claude Code or Codex). 2. Click the **`/remote-control`** chip in the agent utility bar. Warp publishes the session to the cloud and copies the shareable link to your clipboard. +
![The /remote-control chip in the agent utility bar with a Start remote control tooltip](../../../../assets/agent-platform/remote-control.png) +
The /remote-control chip in the agent utility bar.
+
3. A **Sharing link copied** toast notification confirms the link is on your clipboard, and the pane's status icon changes to a red broadcast indicator to show that publishing is active. 4. Open the link on another device, or share it with a teammate. diff --git a/src/content/docs/agent-platform/cli-agents/rich-input.mdx b/src/content/docs/agent-platform/cli-agents/rich-input.mdx index 61233a1..6d37582 100644 --- a/src/content/docs/agent-platform/cli-agents/rich-input.mdx +++ b/src/content/docs/agent-platform/cli-agents/rich-input.mdx @@ -22,13 +22,19 @@ There are two ways to open the rich input editor: 1. **Keyboard shortcut** - Press `Ctrl-G` (configurable) while a supported agent is running in the active pane. 2. **Rich Input button** - Click the **Rich Input** button in the agent utility bar at the bottom of the pane. +
![The Rich Input button in the agent utility bar at the bottom of the pane](../../../../assets/agent-platform/rich-input-button.png) +
The Rich Input button in the agent utility bar.
+
The rich input editor also auto-opens when an agent resumes from a blocked state (for example, after you approve a command). This requires the agent's plugin to be supported and installed. Toggle **Auto show/hide based on agent status** in [Rich input settings](#rich-input-settings) to control this behavior. When the rich input editor is active, Warp hides the cursor inside the CLI agent and moves focus to the editor input. Submit your prompt from here and it goes directly to the running agent. +
![The rich input editor open with a prompt being composed](../../../../assets/agent-platform/rich-input-prompt.png) +
The rich input editor.
+
## Rich input settings @@ -40,7 +46,10 @@ In the Warp app, go to **Settings** > **Agents** > **Third party CLI agents** to * **Keyboard shortcut** - The default shortcut is `Ctrl-G`. Customize this in **Settings** > **Keyboard shortcuts**. * **Disable the Rich Input button** - Right-click the agent utility bar and remove the **Rich Input** chip, or disable the footer entirely in **Settings** > **Agents** > **Third party CLI agents**. +
![Rich input settings panel](../../../../assets/agent-platform/rich-input-settings.png) +
Rich input settings in Warp.
+
## Related pages diff --git a/src/content/docs/agent-platform/cloud-agents/environments.mdx b/src/content/docs/agent-platform/cloud-agents/environments.mdx index 92730a7..a36a971 100644 --- a/src/content/docs/agent-platform/cloud-agents/environments.mdx +++ b/src/content/docs/agent-platform/cloud-agents/environments.mdx @@ -144,7 +144,10 @@ Musl-based Docker images (such as Alpine Linux) are not supported. The agent run Create one environment per codebase, then reuse it across triggers like Slack, Linear, and CLI runs. ::: +
![Creating a new environment in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-new-environment.png) +
Creating a new environment in the Oz web app.
+
### Create an environment with guided setup (recommended) diff --git a/src/content/docs/agent-platform/cloud-agents/integrations/slack.mdx b/src/content/docs/agent-platform/cloud-agents/integrations/slack.mdx index da29e2b..9d25797 100644 --- a/src/content/docs/agent-platform/cloud-agents/integrations/slack.mdx +++ b/src/content/docs/agent-platform/cloud-agents/integrations/slack.mdx @@ -161,7 +161,10 @@ To remove the Oz app from your Slack workspace: 5. Scroll to the bottom and select **Remove App**. 6. Confirm the removal. +
![Warpy is just an internal Slackbot, your Warp slackbot should be called Oz.](../../../../../assets/agent-platform/delete-warpy.png) +
The Oz Slackbot in Slack.
+
![Confirmation dialog to remove the Oz app from a Slack workspace.](../../../../../assets/agent-platform/remove-slack-app.png) diff --git a/src/content/docs/agent-platform/cloud-agents/managing-cloud-agents.mdx b/src/content/docs/agent-platform/cloud-agents/managing-cloud-agents.mdx index 2c87987..c5a96f1 100644 --- a/src/content/docs/agent-platform/cloud-agents/managing-cloud-agents.mdx +++ b/src/content/docs/agent-platform/cloud-agents/managing-cloud-agents.mdx @@ -22,7 +22,10 @@ The management view is designed to answer, at a glance: This management view includes your **local (interactive) agents** and [cloud agent](/agent-platform/cloud-agents/overview/) runs. +
![Warp's management view showing interactive and cloud agent runs.](../../../../assets/agent-platform/management-view-scannable-list.png) +
Warp's management view showing interactive and cloud agent runs.
+
### What appears in the management view diff --git a/src/content/docs/agent-platform/cloud-agents/oz-web-app.mdx b/src/content/docs/agent-platform/cloud-agents/oz-web-app.mdx index feb4cdb..c572f6b 100644 --- a/src/content/docs/agent-platform/cloud-agents/oz-web-app.mdx +++ b/src/content/docs/agent-platform/cloud-agents/oz-web-app.mdx @@ -21,7 +21,10 @@ Watch this short demo to create an environment and run an agent using the Oz web
PagePathWhat you can do
Dashboard/dashboardQuick actions, suggested agents, recent agents, and featured reads
Runs/runsView all runs, filter by status/source/creator, start new runs, inspect transcripts
Agents/agentsBrowse skills from your environments, view suggested skills, dispatch skills as agents
Schedules/schedulesCreate scheduled agents, pause/enable schedules, view run history
Environments/environmentsCreate and manage environments with repos, Docker images, and setup commands
Integrations/integrationsConnect Slack and Linear to trigger agents from external tools
+
![The Oz Web App's management view.](../../../../assets/agent-platform/oz-web-app-runs-view.png) +
The Oz web app management view.
+
## When to use the web app @@ -124,7 +127,10 @@ Each skill displays:
FieldDescription
NameThe skill's identifier
DescriptionWhat the skill does
EnvironmentsWhich environments have access to this skill
+
![The Agents page in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-agents.png) +
The Agents page in the Oz web app.
+
Filter by environment or switch to the **Suggested** tab to see pre-built skills for common workflows like code review, dependency updates, and documentation sync. @@ -140,7 +146,10 @@ For more details on how skills work with cloud agents, see [Skills as Agents](/a Click **New agent** to create a new skill. The guided flow helps you define the skill's instructions, which are then available for future runs. +
![Creating a new agent skill in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-new-agent.png) +
Creating a new agent skill in the Oz web app.
+
--- @@ -154,7 +163,10 @@ Each schedule displays:
FieldDescription
NameA descriptive name for the scheduled task
FrequencyHuman-readable description of the cron schedule (e.g., "Every Monday at 10am")
Next runWhen the schedule will next execute
EnvironmentWhich environment the scheduled agent runs in
AgentWhich skill the schedule uses (if any)
StatusWhether the schedule is active or paused
+
![The Schedules page in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-schedules.png) +
The Schedules page in the Oz web app.
+
--- @@ -197,7 +209,10 @@ Each environment displays:
FieldDescription
NameThe environment's identifier
Docker imageThe container image used for execution
RepositoriesWhich repos the agent can access
Setup commandsCommands run before the agent starts
+
![The Environments page in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-environments.png) +
The Environments page in the Oz web app.
+
--- @@ -226,7 +241,10 @@ The **Integrations** page (`/integrations`) lets you configure first-party integ
IntegrationDescription
SlackTag @Oz in messages or threads to trigger agents directly from Slack conversations
LinearTag @Oz on issues to trigger agents from your issue tracker
+
![The Integrations page in the Oz Web App.](../../../../assets/agent-platform/oz-web-app-integrations.png) +
The Integrations page in the Oz web app.
+
### Setting up an integration diff --git a/src/content/docs/agent-platform/cloud-agents/team-access-billing-and-identity.mdx b/src/content/docs/agent-platform/cloud-agents/team-access-billing-and-identity.mdx index 9b28fb6..298e9f9 100644 --- a/src/content/docs/agent-platform/cloud-agents/team-access-billing-and-identity.mdx +++ b/src/content/docs/agent-platform/cloud-agents/team-access-billing-and-identity.mdx @@ -124,11 +124,17 @@ There are two places you may encounter this installation flow: Each installation is scoped to a single GitHub organization or personal account — you can install the app to multiple orgs separately. ::: +
![Oz by Warp GitHub App installation page showing repository access options](../../../../assets/agent-platform/oz-github-app-installation.png) +
Installing the Oz by Warp GitHub App.
+
2. **Enable the GitHub org for your Warp team.** A Warp team admin opens the Admin Panel in the Warp app (**Settings** > **Admin Panel** > **Platform**) and adds the GitHub organization under **Enabled GitHub Orgs**. This associates the GitHub App installation with your Warp team. +
![Enabled GitHub Orgs setting in the Admin Panel Platform section](../../../../assets/agent-platform/admin-panel-enabled-github-orgs.png) +
Enabled GitHub Orgs setting in the Admin Panel.
+
3. **Use a team API key.** Tasks initiated with a team API key now use tokens from the GitHub App installation to clone repos and push changes. No individual GitHub authorization is needed. diff --git a/src/content/docs/agent-platform/local-agents/agent-context/blocks-as-context.mdx b/src/content/docs/agent-platform/local-agents/agent-context/blocks-as-context.mdx index 6254c48..fbe910c 100644 --- a/src/content/docs/agent-platform/local-agents/agent-context/blocks-as-context.mdx +++ b/src/content/docs/agent-platform/local-agents/agent-context/blocks-as-context.mdx @@ -12,7 +12,10 @@ Warp’s Agent can use blocks from your Agent conversations as context to better You can attach a block directly from the terminal blocklist by clicking the AI sparkles icon on it and selecting “Attach as context.” +
![From a block of output, attach the block and ask Agent Mode to remove all untracked files.](../../../../../assets/agent-platform/remove_all_untracked_files.png) +
Attaching a block as agent context.
+
The most common use case is to ask the AI to fix an error. You can attach the error in a query to Agent Mode and type "fix it." diff --git a/src/content/docs/agent-platform/local-agents/agent-context/images-as-context.mdx b/src/content/docs/agent-platform/local-agents/agent-context/images-as-context.mdx index b4691c2..50e775f 100644 --- a/src/content/docs/agent-platform/local-agents/agent-context/images-as-context.mdx +++ b/src/content/docs/agent-platform/local-agents/agent-context/images-as-context.mdx @@ -13,9 +13,15 @@ You can attach images in the following ways: * Using the **image upload button** found on the toolbelt (either on the bottom left or right), depending on which input mode you're using: +
![Attaching 5 images on the new "Universal" input (bottom left toolbelt)](../../../../../assets/agent-platform/image-as-context-universal.png) +
Attaching images in Universal Input.
+
+
![Attaching 4 images on the "Classic" input (bottom right)](../../../../../assets/agent-platform/image-as-context-classic.png) +
Attaching images in Classic Input.
+
* Copy and paste images directly (e.g. right-click an image > "Copy image" or copy from a file manager) into Warp. * Drag and drop images, such as from a file manager or screenshot utility. diff --git a/src/content/docs/agent-platform/local-agents/agent-context/selection-as-context.mdx b/src/content/docs/agent-platform/local-agents/agent-context/selection-as-context.mdx index ba39a9f..91c7cbf 100644 --- a/src/content/docs/agent-platform/local-agents/agent-context/selection-as-context.mdx +++ b/src/content/docs/agent-platform/local-agents/agent-context/selection-as-context.mdx @@ -15,7 +15,10 @@ When you have Warp’s [native code editor](/code/code-editor/) open beside a re This makes it easy to highlight just the lines you want the Agent to analyze or modify. +
![Selecting a function and attaching it as context from Warp's native code editor.](../../../../../assets/agent-platform/selection-as-context.png) +
Selecting code as agent context.
+
### Attaching selections from Warp’s Code Review panel diff --git a/src/content/docs/agent-platform/local-agents/agent-context/urls-as-context.mdx b/src/content/docs/agent-platform/local-agents/agent-context/urls-as-context.mdx index 8999060..c416ed2 100644 --- a/src/content/docs/agent-platform/local-agents/agent-context/urls-as-context.mdx +++ b/src/content/docs/agent-platform/local-agents/agent-context/urls-as-context.mdx @@ -17,4 +17,7 @@ You can attach a public URL to any prompt to provide page content as context. Wa **Important**: URL attachments are different from web search. If you need the agent to look something up, gather real-time information, or pull in multiple sources, use [Web Search](/agent-platform/capabilities/web-search/) instead. ::: +
![Example of referencing docs via a URL](../../../../../assets/agent-platform/url-as-context.png) +
Example of referencing docs via a URL.
+
diff --git a/src/content/docs/agent-platform/local-agents/agent-context/using-to-add-context.mdx b/src/content/docs/agent-platform/local-agents/agent-context/using-to-add-context.mdx index 877724a..c2b6740 100644 --- a/src/content/docs/agent-platform/local-agents/agent-context/using-to-add-context.mdx +++ b/src/content/docs/agent-platform/local-agents/agent-context/using-to-add-context.mdx @@ -16,13 +16,22 @@ Attaching context with @ works in **both natural language mode** (when interacti **Note**: the search in the @-context menu is always relative to the root of the Git repository, even when you're working in a subdirectory. This means you can reference _any_ file or folder tracked in the repo, regardless of the current working directory. +
![Using the @ symbol to search for and attach a file or folder from the project root.](../../../../../assets/agent-platform/at-context.png) +
File search using the @ symbol.
+
Additionally, no codebase indexing (via [Codebase Context](/agent-platform/capabilities/codebase-context/)) is required — file search is available immediately in any Git-initialized directory. The search also respects `.gitignore` rules and will exclude ignored files from the results. +
![Filtering files using @app to locate files containing “app” in their name or path.](../../../../../assets/agent-platform/at-context-app.png) +
Filtering files with @app.
+
+
![Referencing a folder or all files within it by typing @styles.](../../../../../assets/agent-platform/at-context-styles.png) +
Referencing a folder with @styles.
+
### Referencing code symbols diff --git a/src/content/docs/agent-platform/local-agents/code-diffs.mdx b/src/content/docs/agent-platform/local-agents/code-diffs.mdx index 88d8bf0..c2ca0fb 100644 --- a/src/content/docs/agent-platform/local-agents/code-diffs.mdx +++ b/src/content/docs/agent-platform/local-agents/code-diffs.mdx @@ -22,7 +22,10 @@ If the `Apply Code Diffs` permission is set to `Always allow` in [Agent Profiles Code diffs generated by Warp are never stored on our servers. Warp's coding agent only works on local repositories. The agent can make changes on remote or docker repositories, but falls back to using terminal commands (i.e. `sed`, `grep` ) to make the changes. ::: +
![A code diff surfaced in an Agent Conversation.](../../../../assets/agent-platform/generated_blocklist_diff.png) +
A code diff surfaced in an Agent Conversation.
+
You can also choose whether Warp automatically opens the [Code Review](/code/code-review/) panel the first time you accept a diff in a conversation. @@ -50,7 +53,10 @@ If the initial suggestion needs more work: You can open up code files in Warp in various different ways, refer to: [Opening files in Warp](/code/code-editor/#opening-files-in-warp) ::: +
![Editing a code diff directly in Warp's native code editor](../../../../assets/agent-platform/editting_diff.png) +
Editing a code diff in Warp's code editor.
+
## Accepting diffs and continuing in Agent Mode diff --git a/src/content/docs/agent-platform/local-agents/generate.mdx b/src/content/docs/agent-platform/local-agents/generate.mdx index 327f649..55cf500 100644 --- a/src/content/docs/agent-platform/local-agents/generate.mdx +++ b/src/content/docs/agent-platform/local-agents/generate.mdx @@ -24,7 +24,10 @@ Currently, you need to be online to use this feature. If this feature doesn't wo Type `#` on the command-line input to generate command suggestions. +
![Typing '#' on the command line opens the suggestions interface](../../../../assets/agent-platform/open-ai-commands.png) +
Typing '#' on the command line opens the suggestions interface.
+
@@ -42,9 +45,15 @@ The agent can provide input when prompted, navigate interactive screens, and con In interactive CLI applications, you can generate input using natural language. +
![Generate a SQL query](../../../../assets/agent-platform/generate-psql.png) +
Generating a SQL query using natural language.
+
+
![Generate Vim input](../../../../assets/agent-platform/generate-vim.png) +
Generating Vim commands using natural language.
+
diff --git a/src/content/docs/agent-platform/local-agents/interacting-with-agents/index.mdx b/src/content/docs/agent-platform/local-agents/interacting-with-agents/index.mdx index d1a0ec4..9aa4a05 100644 --- a/src/content/docs/agent-platform/local-agents/interacting-with-agents/index.mdx +++ b/src/content/docs/agent-platform/local-agents/interacting-with-agents/index.mdx @@ -34,9 +34,15 @@ By default, if you ask an AI query immediately after interacting in Agent Mode, * Open the **Conversations menu** (`CMD + Y` on macOS, `CTRL + SHIFT + Y` on Windows/Linux), select a conversation, and then enter your query. * Alternatively, click the pink conversation chip in the input field to resume. +
![Continuing an Agent conversation in Classic Input (with indicator)](../../../../../assets/agent-platform/classic-input-follow-up.png) +
Continuing an agent conversation in Classic Input.
+
+
![Continuing an Agent conversation in agent conversation view](../../../../../assets/agent-platform/follow-up-universal-input.png) +
Continuing an agent conversation in the conversation view.
+
#### Agent tips in the input @@ -92,9 +98,15 @@ Visual indicators differ slightly depending on input mode: +
![Starting a new Conversation in Classic Input](../../../../../assets/agent-platform/classic-input-new-convo.png) +
Starting a new Conversation in Classic Input.
+
+
![Starting a new Agent Conversation in agent conversation view](../../../../../assets/agent-platform/universal-input-new-convo.png) +
Starting a new Agent Conversation in agent conversation view.
+
## Context window management diff --git a/src/content/docs/agent-platform/local-agents/interacting-with-agents/terminal-and-agent-modes.mdx b/src/content/docs/agent-platform/local-agents/interacting-with-agents/terminal-and-agent-modes.mdx index 988d880..d7386c6 100644 --- a/src/content/docs/agent-platform/local-agents/interacting-with-agents/terminal-and-agent-modes.mdx +++ b/src/content/docs/agent-platform/local-agents/interacting-with-agents/terminal-and-agent-modes.mdx @@ -73,7 +73,10 @@ The shortcuts shown on this page use macOS keybindings. For Windows and Linux sh * Familiar "charms" (current directory, git branch, diff view entry point, etc.) are still available. * Designed for multi-turn workflows and managing multiple conversations. +
![The dedicated Agent Conversation View.](../../../../../assets/agent-platform/agent-modality-conversation-view.png) +
The dedicated Agent Conversation View.
+
**Key difference** @@ -301,7 +304,10 @@ For more forking methods and use cases, see [Conversation Forking](/agent-platfo If you prefer to type natural language at any point in a terminal session and have it automatically routed to an agent, you can configure this using the "default mode for new sessions" setting. +
![Using Agent as your default for new tab sessions](/assets/agent-platform/recreate-universal-input.gif) +
Using Agent as your default for new tab sessions.
+
### Step 1 — Set new tabs to open in agent view diff --git a/src/content/docs/agent-platform/local-agents/interacting-with-agents/voice.mdx b/src/content/docs/agent-platform/local-agents/interacting-with-agents/voice.mdx index 4598860..c4abad4 100644 --- a/src/content/docs/agent-platform/local-agents/interacting-with-agents/voice.mdx +++ b/src/content/docs/agent-platform/local-agents/interacting-with-agents/voice.mdx @@ -55,7 +55,10 @@ There are two ways to activate Voice: +
![Voice settings panel showing hotkey configuration and voice input toggle options](../../../../../assets/agent-platform/voice-settings.png) +
Voice input settings.
+
### Sample use cases @@ -65,7 +68,10 @@ You can also describe multi-step system tasks like "Find all log files in my pro Voice input is not limited to just Agent Mode - it works across all of Warp's input interfaces. Whether you're using the Find dialog to search through text, entering commands in the terminal, or working with other input editors, you can use voice commands to quickly input your text. +
![Voice input works across Warp's editor interfaces, including the Find dialog and other input editors](../../../../../assets/agent-platform/voice-in-find.png) +
Voice input in a Warp editor.
+
## Privacy & security diff --git a/src/content/docs/agent-platform/local-agents/interactive-code-review.mdx b/src/content/docs/agent-platform/local-agents/interactive-code-review.mdx index e1acd96..b568d9f 100644 --- a/src/content/docs/agent-platform/local-agents/interactive-code-review.mdx +++ b/src/content/docs/agent-platform/local-agents/interactive-code-review.mdx @@ -47,7 +47,10 @@ Select any changed line or block and add a comment describing what you want adju Add as many comments as you need before submitting them. The agent receives your entire batch of feedback, applies the changes in one iteration, and returns an updated diff for verification. +
![Adding comments directly in the Code Review view.](../../../../assets/agent-platform/interactive-code-review-batch-comments.png) +
Adding comments directly in the Code Review view.
+
### Example demo diff --git a/src/content/docs/agent-platform/local-agents/session-sharing.mdx b/src/content/docs/agent-platform/local-agents/session-sharing.mdx index 5d26b68..7982c6d 100644 --- a/src/content/docs/agent-platform/local-agents/session-sharing.mdx +++ b/src/content/docs/agent-platform/local-agents/session-sharing.mdx @@ -34,9 +34,15 @@ When you share an agent session, Warp publishes it to the cloud and generates a 4. Confirm the share. Warp uploads the session to the cloud and generates a shareable link. 5. Copy the link and share it with teammates, or open it on another device. +
![Starting a shared agent session from the right-click context menu](../../../../assets/agent-platform/agent-session-sharing-right-click-menu.png) +
Start a shared session via the right click menu.
+
+
![Starting a shared agent session from the Command Palette](../../../../assets/agent-platform/agent-session-sharing-command-palette.png) +
Start a shared session via the Command Palette.
+
## Viewing shared sessions diff --git a/src/content/docs/code/code-editor/file-tree.mdx b/src/content/docs/code/code-editor/file-tree.mdx index 6ebcf5f..a6ab134 100644 --- a/src/content/docs/code/code-editor/file-tree.mdx +++ b/src/content/docs/code/code-editor/file-tree.mdx @@ -40,7 +40,10 @@ Right-clicking any **file** opens a context menu with several useful options: * **Copy path**: Copy the absolute file path. * **Copy relative path**: Copy the path relative to your current working directory. +
![Right-click context menu on a folder in the file tree.](../../../../assets/terminal/file-tree-context-menu.png) +
Right-click context menu on a folder in the file tree.
+
Right-clicking any **folder** opens a context menu with the following options: diff --git a/src/content/docs/code/code-review.mdx b/src/content/docs/code/code-review.mdx index 4f4a6bb..f532917 100644 --- a/src/content/docs/code/code-review.mdx +++ b/src/content/docs/code/code-review.mdx @@ -19,7 +19,10 @@ Any uncommitted changes appear in the panel (or compare the changes on your bran +
![Full view of Code Review panel and terminal pane.](../../../assets/terminal/code-review-panel-update.png) +
Full view of Code Review panel and terminal pane.
+
:::note To review agent-generated diffs, leave inline comments, batch your feedback, and have the agent apply all requested changes, see [Interactive Code Review](/agent-platform/local-agents/interactive-code-review/). @@ -94,7 +97,10 @@ Any saved edits made outside of Warp (e.g. in another editor), as well as change The Code Review pane makes it simple to share changes with the Agent. You can attach an entire diff to a prompt so the Agent has full visibility into what was added or removed. +
![Attaching a diff as context from the Code Review panel.](../../../assets/terminal/attach-diff-hunk-as-context.png) +
Attaching a diff as context from the Code Review panel.
+
This ensures responses are grounded in your latest edits, whether you're asking for feedback, explanations, or follow-up changes. For more details, see [Selection as Context](/agent-platform/local-agents/agent-context/selection-as-context/). diff --git a/src/content/docs/code/overview.mdx b/src/content/docs/code/overview.mdx index 04ca6ff..a5abd77 100644 --- a/src/content/docs/code/overview.mdx +++ b/src/content/docs/code/overview.mdx @@ -66,7 +66,10 @@ Code responds to prompts related to code generation, editing, and analysis. Here Warp provides multiple entry points to begin coding with agents, whether you are starting a new project, opening an existing one, or cloning from GitHub. Each new tab shows a **zero state** that lets you choose how to proceed. +
![Zero-state tab with 3 starting points for agentic coding in Warp.](../../../assets/terminal/code_mode.png) +
Zero-state tab with coding starting points.
+
#### 1. Starting a new project diff --git a/src/content/docs/enterprise/team-management/admin-panel.mdx b/src/content/docs/enterprise/team-management/admin-panel.mdx index 78a3449..be62cc2 100644 --- a/src/content/docs/enterprise/team-management/admin-panel.mdx +++ b/src/content/docs/enterprise/team-management/admin-panel.mdx @@ -260,7 +260,10 @@ To configure: 2. Under **Enabled GitHub Orgs**, review the list of GitHub organizations where the Oz by Warp GitHub App is installed. 3. Select which organizations your team should have access to. +
![Enabled GitHub Orgs setting in the Admin Panel Platform section](../../../../assets/agent-platform/admin-panel-enabled-github-orgs.png) +
Enabled GitHub Orgs setting in the Admin Panel.
+
The organizations and repository access shown here reflect the Oz by Warp GitHub App installation scope, which is configured in [GitHub settings](https://github.com/settings/installations). To change which repositories the app can access, edit the installation directly in GitHub. diff --git a/src/content/docs/getting-started/keyboard-shortcuts.mdx b/src/content/docs/getting-started/keyboard-shortcuts.mdx index 76affb5..4308ad7 100644 --- a/src/content/docs/getting-started/keyboard-shortcuts.mdx +++ b/src/content/docs/getting-started/keyboard-shortcuts.mdx @@ -23,7 +23,10 @@ On macOS, [system keyboard shortcuts](https://support.apple.com/en-us/HT201236) Keybinds that conflict with others are highlighted with an orange border. ::: +
![keybinds that conflict with others are highlighted in orange](../../../assets/terminal/keybinds-conflict.png) +
An example of a keybinding conflict warning.
+
## All available shortcuts diff --git a/src/content/docs/getting-started/migrate-to-warp/migrate-to-warp-from-iterm2.mdx b/src/content/docs/getting-started/migrate-to-warp/migrate-to-warp-from-iterm2.mdx index 93d516b..5a8aa7f 100644 --- a/src/content/docs/getting-started/migrate-to-warp/migrate-to-warp-from-iterm2.mdx +++ b/src/content/docs/getting-started/migrate-to-warp/migrate-to-warp-from-iterm2.mdx @@ -27,7 +27,10 @@ To run the importer: 3. Select **iTerm2 Profile: Default**. Warp only imports the profile marked as your Default Bookmark in iTerm2. 4. Choose which settings to keep or skip on the preview screen. +
![Select a settings profile to import](../../../../assets/terminal/migrate-to-warp.png) +
Select a settings profile to import.
+
## Use Warp's agent for follow-up settings diff --git a/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx b/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx index 3cb3020..f0c6008 100644 --- a/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx @@ -46,11 +46,17 @@ Once the agent has finished the task, open Warp's [Code Review panel](/code/code * **Review changes button**: After an agent conversation, click **Review changes** at the bottom of the conversation * **Tab bar**: Click the Code Review button in the top-right corner of Warp +
![Code Review button in the top-right corner of the Warp title bar showing file and line change counts](../../../../assets/guides/code-review-button.png) +
The Code Review button.
+
The panel shows all uncommitted changes as a visual diff, grouped by file. Additions are highlighted in green with a `+` prefix, removals in red with a `-` prefix. +
![Code Review panel showing file diffs between branches](../../../../assets/guides/code-review-panel-with-diffs.png) +
Code Review panel with diffs.
+
## 3. Review diffs by file @@ -62,14 +68,20 @@ With the Code Review panel, you can review changes file-by-file: Focus on the areas where agents are most likely to make mistakes: imports, error handling, and anything that touches security or authentication. +
![Code Review panel with file navigation sidebar showing changed files](../../../../assets/guides/code-review-file-sidebar.png) +
Changed files sidebar.
+
## 4. Leave inline comments on issues Click the "Add comment" button on any line or block of code and add a comment describing what needs to change. Warp anchors each comment to the exact file and line, so any agent understands precisely what to fix. You can add as many comments as you need before submitting — Warp batches them so the agent receives all your feedback at once instead of processing changes one at a time. +
![Adding an inline comment on a diff line in the Code Review panel](../../../../assets/guides/code-review-inline-comment.png) +
Inline comments on specific diff lines.
+
## 5. Submit all comments to the agent diff --git a/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx b/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx index ce808ae..21f5e98 100644 --- a/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx @@ -29,7 +29,10 @@ You can configure what information to display for each tab: * The working directory * A status indicator showing whether the agent is active, waiting for input, or idle +
![Warp vertical tabs sidebar showing multiple terminal sessions with branch metadata](../../../../assets/terminal/vertical-tabs-multi-agent.png) +
Vertical tabs overview.
+
## 2. Launch agents in separate tabs @@ -59,7 +62,10 @@ Refactor src/auth/ to use async/await instead of callbacks Write comprehensive tests for src/auth/ covering edge cases ``` +
![Multiple agent tabs in Warp's vertical sidebar showing session status, branch, and directory metadata](../../../../assets/terminal/multi-agents.png) +
Vertical tab with agent details.
+
## 3. Monitor agents with notifications @@ -77,7 +83,10 @@ Notification setup varies by agent: Agent notifications are currently supported for Claude Code, Codex, and OpenCode. For setup details, see [Agent notifications](/agent-platform/capabilities/agent-notifications/). For a full breakdown of which features work with each agent, see the [third-party CLI agents feature matrix](/agent-platform/cli-agents/overview/). ::: +
![Warp notification popup showing an agent requesting permission to edit a file](../../../../assets/guides/tab-notification-indicator.png) +
Agent approval notification.
+
## 4. Compare outputs from different agents @@ -96,7 +105,10 @@ If you regularly work with the same multi-agent setup, save it as a tab config s 1. Hover over the tab and click the three dots on the right-hand side. 2. Click **Save as new config**. +
![Creating a new tab config from the tab context menu in Warp](../../../../assets/terminal/save-new-tab-config.png) +
Saving a tab config.
+
Tab configs are TOML files that define the directory, startup commands, and layout for a tab. For example, you might create a config that: diff --git a/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx b/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx index 73eac82..c93c268 100644 --- a/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx @@ -21,7 +21,10 @@ Voice transcription is available in Warp's agent input. To use it: 1. Click the **microphone icon** in the input area, or use the voice input keyboard shortcut. +
![Warp input area showing the microphone icon for voice transcription](../../../../assets/guides/voice-input-microphone.png) +
The microphone icon appears in the input area for voice transcription.
+
2. Speak your prompt naturally. Warp transcribes your speech and places the text in the input field. 3. Review the transcription, edit if needed, then submit your prompt. @@ -56,7 +59,10 @@ Paste (`⌘+V`) or drag images directly into the input area to give the agent vi * **Error messages** — Screenshot a stack trace instead of copying and reformatting it. * **Visual diffs** — Show the agent what the UI looks like now vs. what it should look like. +
![Image attached as context in the Warp input area alongside a text prompt](../../../../assets/guides/image-as-context.png) +
Attaching images as agent context.
+
## 4. Combine voice and images for design-to-code workflows diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 91e6eb9..f3c3b06 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -10,7 +10,10 @@ import VideoEmbed from '@components/VideoEmbed.astro'; Warp is an [open source](https://github.com/warpdotdev/warp) **Agentic Development Environment**, a modern terminal combined with powerful agents that help you build, test, deploy, and debug code. Warp's AI is powered by **Oz**, the orchestration platform for cloud agents. +
![Warp, the Agentic Development Environment: Warp (a modern terminal built for coding with agents) and Oz (the orchestration platform for cloud agents)](../../assets/terminal/warp-oz-welcome.png) +
Warp terminal with Oz orchestration.
+
--- diff --git a/src/content/docs/knowledge-and-collaboration/admin-panel.mdx b/src/content/docs/knowledge-and-collaboration/admin-panel.mdx index d03f3fa..8c23a89 100644 --- a/src/content/docs/knowledge-and-collaboration/admin-panel.mdx +++ b/src/content/docs/knowledge-and-collaboration/admin-panel.mdx @@ -25,7 +25,10 @@ Admin Panel access is restricted to team administrators. Right now, only the cre Team administrators can access the Admin Panel directly at https://app.warp.dev/admin/ +
![Admin Panel main interface with sections for AI, privacy, billing, code, and sharing settings](../../../assets/terminal/admin-panel-overview.png) +
Admin Panel main interface.
+
## How settings enforcement works diff --git a/src/content/docs/knowledge-and-collaboration/teams.mdx b/src/content/docs/knowledge-and-collaboration/teams.mdx index 759da1a..3602f8e 100644 --- a/src/content/docs/knowledge-and-collaboration/teams.mdx +++ b/src/content/docs/knowledge-and-collaboration/teams.mdx @@ -42,7 +42,10 @@ If you’re on a paid plan, upgrading will automatically include all team member For more details on how team member billing works, please see our [billing FAQs](/support-and-community/plans-and-billing/pricing-faqs/#what-counts-as-a-team-member-and-how-does-billing-work-for-members). ::: +
![Teams settings panel](../../../assets/terminal/teams-invite-demo.png) +
Teams settings panel.
+
When you share this link with your teammates directly (we suggest using a secure channel like Slack or email), they will be able to join your team in Warp. diff --git a/src/content/docs/knowledge-and-collaboration/warp-drive/index.mdx b/src/content/docs/knowledge-and-collaboration/warp-drive/index.mdx index 149035c..8ac2546 100644 --- a/src/content/docs/knowledge-and-collaboration/warp-drive/index.mdx +++ b/src/content/docs/knowledge-and-collaboration/warp-drive/index.mdx @@ -28,7 +28,10 @@ All objects stored in Warp Drive sync immediately as they’re updated, so you a +
![Warp Drive icon on top left corner of Warp](../../../../assets/terminal/Open_Warp_Drive.png) +
The Warp Drive icon in the top-left corner.
+
## Workspaces in Warp Drive @@ -51,7 +54,10 @@ If you are a member of a team using Warp Drive, your team’s workspace will als In offline mode, some files will be read-only. You can still create and edit files while offline in your personal space. They will only be saved locally and will not be synced. They cannot be moved into a team or deleted until you are back online. +
![Warp Drive offline mode](../../../../assets/terminal/warp_drive_offline.png) +
Warp Drive operating in offline mode.
+
## Navigating Warp Drive with your keyboard @@ -89,7 +95,10 @@ You can take these keyboard actions within Warp Drive: +
![Warp Drive navigation states](../../../../assets/terminal/warp_drive_nav1.png) +
Navigation states in the Warp Drive sidebar.
+
To switch between panels using your keyboard, you can use the “Switch Focus to Left Panel” and “Switch Focus to Right Panel” commands in the [Command Palette](/terminal/command-palette/). @@ -108,7 +117,10 @@ Every object in Warp Drive can be exported to or imported from a file. When impo To import a local file or directory, `RIGHT-CLICK` on a folder or click **+** on a workspace and choose "Import." If importing a directory, supported files in the directory and its sub-directories will be imported into a matching folder structure. +
![Import modal](../../../../assets/terminal/notebook-import-modal.png) +
The import dialog for adding local files to Warp Drive.
+
### Exporting files from Warp Drive @@ -130,17 +142,26 @@ To share a Drive object, navigate to the object's overflow menu, and choose "Cop To access an object, link-followers must have permission to open it through one of the sharing methods above. If they do not have permission, they can automatically request access from the object owner or team admin. ::: +
![Copy link Menu Item](../../../../assets/terminal/wd-copy-link-menu.png) +
The Copy link option in the right-click menu.
+
### Managing permissions To manage a Drive object's permissions, navigate to its overflow menu and choose "Share". If the object is open, you can also use the [Command Palette](/terminal/command-palette/#how-to-access-it) and search for "Share pane", or click the share button in the pane header: +
![The pane header for a notebook, with the share button circled](../../../../assets/terminal/wd-share-button.png) +
The share button in the pane header.
+
This opens a dialog that lists the current sharing settings and allows you to change them: +
![A sharing dialog showing that anyone with the link can view, the owner has full access, and another user can edit.](../../../../assets/terminal/wd-share-dialog.png) +
Warp Drive sharing dialog.
+
In this dialog, you can: diff --git a/src/content/docs/knowledge-and-collaboration/warp-drive/notebooks.mdx b/src/content/docs/knowledge-and-collaboration/warp-drive/notebooks.mdx index e9fc91d..8259d96 100644 --- a/src/content/docs/knowledge-and-collaboration/warp-drive/notebooks.mdx +++ b/src/content/docs/knowledge-and-collaboration/warp-drive/notebooks.mdx @@ -39,7 +39,10 @@ Any of these entry points will open the notebook editor where you can: Note: The notebook will not be saved until either title or body text is added. ::: +
![Editing a Notebook](/assets/terminal/notebooks_editor.gif) +
Editing a Notebook.
+
### Working with Notebooks @@ -51,7 +54,10 @@ Notebook elements (text, code, list items) can be added in several ways: * Typing /, which will open up a selection menu of supported elements. * Pressing the + icon which appears when hovering over a line and selecting from the menu of supported elements. +
![Markdown element types](../../../../assets/terminal/markdown-element-types.png) +
Available Markdown element types in the Notebook editor.
+
#### Styling existing elements @@ -72,7 +78,10 @@ Command and code blocks have several unique properties such as syntax highlighti Once you’ve inserted your code block you can select the language at the bottom of the block from numerous options which will apply the appropriate syntax highlighting if available (or default to Code if your language is not found). All code and command blocks will apply syntax highlighting and provide a quick copy button for easy access. +
![Example code block](../../../../assets/terminal/notebook-code-block.png) +
A code block with syntax highlighting in a Notebook.
+
#### Special properties of command blocks @@ -99,13 +108,19 @@ Developers can execute shell command blocks by: The command text will be inserted into the developer’s active terminal session, or a new session if none are active. +
![Run option for command block](../../../../assets/terminal/notebook-cmd-block-run.png) +
The run button on a command block in a Notebook.
+
#### Adding arguments to Command Blocks Command blocks accept parameters in the same format as [Workflows](/knowledge-and-collaboration/warp-drive/workflows/). To add an argument to your command block, use `{{double_curly_brackets}}` to specify your argument term. +
![Command block with parameters](../../../../assets/terminal/notebook-cmd-with-params.png) +
A command block with editable parameters.
+
#### Navigating command blocks with the keyboard @@ -136,7 +151,10 @@ Command Blocks also support keyboard navigation. There are two ways to enter the If you have existing [Workflows](/knowledge-and-collaboration/warp-drive/workflows/) that you’d like to insert into your notebook rather than duplicating their content, you can select Embedded Workflow from the new element menu and select from the available Workflows. Once embedded in a notebook, the workflow will be executable like a regular command block. To edit the content of the embedded workflow, you will need to edit the source workflow which can be found by searching for the title in the [Command Palette](/terminal/command-palette/). +
![Embedding an existing workflow in a notebook.](../../../../assets/terminal/embedding-a-workflow.png) +
Embedding an existing workflow in a notebook.
+
### Working with Notebooks in a team @@ -146,7 +164,10 @@ If the notebook is shared with a team, all team members will have access to edit Note that only one editor is allowed at a given time. Opening the notebook while there is an active editor will open the notebook in Viewing mode. Your mode (view vs edit) can be toggled above the notebook’s title. ::: +
![View mode example](../../../../assets/terminal/notebook-view-mode.png) +
A Notebook displayed in view mode.
+
### Import and export notebooks in Warp Drive diff --git a/src/content/docs/knowledge-and-collaboration/warp-drive/prompts.mdx b/src/content/docs/knowledge-and-collaboration/warp-drive/prompts.mdx index 8be413d..59119a2 100644 --- a/src/content/docs/knowledge-and-collaboration/warp-drive/prompts.mdx +++ b/src/content/docs/knowledge-and-collaboration/warp-drive/prompts.mdx @@ -13,7 +13,10 @@ A prompt is a parameterized natural language query you can name and save in Warp Prompts are searchable and easily accessed from the [Command Palette](/terminal/command-palette/) so you can find and execute them without switching context. They allow you to save and reuse specific and complex AI workflows, making it easier to repeat multi-step tasks with Agent Mode. +
![View of a Prompt in Warp Drive showing the command view interface](../../../../assets/terminal/prompts-command-view.png) +
Command view of a Prompt in Warp Drive.
+
### Demo: Trigger reusable actions with saved prompts @@ -32,7 +35,10 @@ You can create a new prompt from Warp Drive by clicking the + button and selecti * Add a meaningful description that will be indexed for search (optional) * Add arguments, descriptions for arguments, and default values (optional) +
![View of the Prompt editor interface showing the edit form with fields for name, query, description, and arguments](../../../../assets/terminal/prompts-edit-view.png) +
Edit view of a Prompt in Warp Drive.
+
Once a prompt has been created, you can edit it at any time, as long as you have access to an internet connection. @@ -67,9 +73,15 @@ You can execute a prompt in several ways: * From the [Command Palette](/terminal/command-palette/) or [Command Search](/terminal/entry/command-search/), search for a prompt by name or type "prompts:" to see all available prompts and your prompt history * When a prompt is selected, you can use `SHIFT-TAB` to cycle through the arguments. +
![Command Palette interface showing a search for Prompts with results displayed](../../../../assets/terminal/prompts-command-palette.png) +
Searching for Prompts in the Command Palette.
+
+
![Command Search interface showing a search for Prompts with results displayed](../../../../assets/terminal/prompts-command-search.png) +
Searching for Prompts in Command Search.
+
These options will paste the prompt into your active terminal input. Prompt names and any relevant descriptions and arguments will be displayed in a dialog, so you can understand how to use the prompt. diff --git a/src/content/docs/knowledge-and-collaboration/warp-drive/web.mdx b/src/content/docs/knowledge-and-collaboration/warp-drive/web.mdx index a4cc707..420a289 100644 --- a/src/content/docs/knowledge-and-collaboration/warp-drive/web.mdx +++ b/src/content/docs/knowledge-and-collaboration/warp-drive/web.mdx @@ -9,7 +9,10 @@ description: >- Warp Drive on the Web lets you view and edit your Warp Drive objects and shared sessions directly in the browser, on any device. +
![A web-based rendering of a Team Workflow](../../../../assets/terminal/wd-web-team-workflow.png) +
A web-based rendering of a Team Workflow.
+
## How to access Warp on the web @@ -39,7 +42,10 @@ If you would like to use Warp locally and do not have it installed, please visit 2. This preference can be changed at any point in **Settings** > **Features** > **General** > **Open links in desktop app** Note that this setting is only available while on the web-based version of Warp. +
![Setting managing how to open links](../../../../assets/terminal/wd-open-links-preference.png) +
Setting managing how to open links.
+
3. You can always switch between web and desktop views on a case-by-case basis. 1. To switch from a web-view to Desktop for a given object, open the _overflow menu > Open link on Desktop._ diff --git a/src/content/docs/knowledge-and-collaboration/warp-drive/workflows.mdx b/src/content/docs/knowledge-and-collaboration/warp-drive/workflows.mdx index b0a5fd2..baf7b73 100644 --- a/src/content/docs/knowledge-and-collaboration/warp-drive/workflows.mdx +++ b/src/content/docs/knowledge-and-collaboration/warp-drive/workflows.mdx @@ -29,7 +29,10 @@ Any of these entry points will open the workflow editor where you can: * Add a meaningful description that will be indexed for search (optional) * Add arguments, descriptions for arguments, and default values (optional) +
![Workflows save and edit modal](../../../../assets/terminal/edit-workflow-pane.png) +
Workflows save / edit pane.
+
@@ -71,7 +74,10 @@ Workflow aliases are not compatible with [YAML Workflows](/terminal/entry/yaml-w Once a workflow has been created, you can edit it at any time, as long as you have access to an internet connection. +
![Edit workflow menu](../../../../assets/terminal/Edit_Workflow.png) +
The edit menu for a Workflow in Warp Drive.
+
#### AI Autofill @@ -103,11 +109,17 @@ When you create two or more arguments with the same name, Warp automatically sel Also, tailor your Command Search experience by toggling off "Show Global Workflows" in **Settings** > **Features**. When disabled, your search will exclusively encompass YAML and Warp Drive Workflows. ::: +
![Search for any workflow in the Command Palette with CMD + P](../../../../assets/terminal/search-workflow-command-palette.png) +
Searching for Workflows in the Command Palette.
+
These options will paste the workflow into your active terminal input. Workflow names and any relevant descriptions and arguments will be displayed in a dialog, so you can understand how to use the workflow. +
![Execute a Workflow](../../../../assets/terminal/execute-a-workflow.png) +
Executing a Workflow from Warp Drive.
+
You make any adjustments you need to the arguments (or the command itself) before running the command in your input editor. diff --git a/src/content/docs/reference/cli/api-keys.mdx b/src/content/docs/reference/cli/api-keys.mdx index 4b8b091..0d2fb03 100644 --- a/src/content/docs/reference/cli/api-keys.mdx +++ b/src/content/docs/reference/cli/api-keys.mdx @@ -34,7 +34,10 @@ Team keys without GitHub App authorization are the right fit for automated workf 6. Click **Create key**. 7. Copy the raw API key and store it securely. **You won't be able to see it again after closing the dialog.** +
![API key management interface in Warp settings](../../../../assets/reference/api-key-management.png) +
API key management interface in Warp settings.
+
## Personal vs team API keys diff --git a/src/content/docs/reference/cli/mcp-servers.mdx b/src/content/docs/reference/cli/mcp-servers.mdx index c8e5a19..42cff41 100644 --- a/src/content/docs/reference/cli/mcp-servers.mdx +++ b/src/content/docs/reference/cli/mcp-servers.mdx @@ -42,7 +42,10 @@ $ oz mcp list Alternatively, copy the UUID from Warp in **Settings** > **Agents** > **MCP servers**. +
![MCP servers page, showing a server with its UUID](../../../../assets/reference/mcp-server-id.png) +
MCP servers page, showing a server with its UUID.
+
2. Pass the UUID to `--mcp`: diff --git a/src/content/docs/support-and-community/plans-and-billing/credits.mdx b/src/content/docs/support-and-community/plans-and-billing/credits.mdx index 86e784f..f039eed 100644 --- a/src/content/docs/support-and-community/plans-and-billing/credits.mdx +++ b/src/content/docs/support-and-community/plans-and-billing/credits.mdx @@ -24,7 +24,10 @@ Since there's no exact formula for predicting usage, we recommend building an in In an Agent conversation, a **turn** represents a single exchange (a response from the LLM). To see how many credits a turn consumed, hover over the **credit count chip** at the bottom of the Agent's response: +
![The conversation usage footer shows how many credits a conversation has consumed, and breaks down the usage by credits, tool calls, context window, files changed, diffs applied, and more.](../../../../assets/support-and-community/inline-credit-usage-footer.png) +
Conversation usage footer.
+
:::note You can view your total credit usage, along with other billing details, in **Settings** > **Billing and usage**. diff --git a/src/content/docs/support-and-community/plans-and-billing/overages-legacy.mdx b/src/content/docs/support-and-community/plans-and-billing/overages-legacy.mdx index b3ebc2f..2aacddd 100644 --- a/src/content/docs/support-and-community/plans-and-billing/overages-legacy.mdx +++ b/src/content/docs/support-and-community/plans-and-billing/overages-legacy.mdx @@ -9,7 +9,10 @@ Warp offers usage-based pricing for Subscribers, allowing continued access to pr You can manage usage-based pricing directly in Warp under **Settings** > **Billing and usage**. +
![Billing and usage tab in settings, where admins can manage premium model usage overages](../../../../assets/support-and-community/overages-settings.png) +
Billing and usage settings.
+
### Enabling overages diff --git a/src/content/docs/support-and-community/troubleshooting-and-support/known-issues.mdx b/src/content/docs/support-and-community/troubleshooting-and-support/known-issues.mdx index 0dcd53b..f221d31 100644 --- a/src/content/docs/support-and-community/troubleshooting-and-support/known-issues.mdx +++ b/src/content/docs/support-and-community/troubleshooting-and-support/known-issues.mdx @@ -215,13 +215,19 @@ The following non-exhaustive list of plugins, prompts, or tools can cause potent On macOS, you may be [denied permission to SSH](https://github.com/warpdotdev/Warp/issues/5550) from Warp into other devices in your local network and see an error like: `ssh: connect to host port 22: Undefined error: 0`.\ To resolve this issue, go to  > **System Settings** > **Privacy & Security** > **Local Network** and add Warp. +
![macOS SSH permission error](../../../../assets/support-and-community/mac-ssh-permission.png) +
An SSH permission error on macOS.
+
**Unexpected loss of permission on macOS** On macOS, you may see an `Operation not permitted` error when trying to run commands in directories that have already been granted macOS permissions (Documents, Downloads, Desktop, etc). The best workaround at this time is to [apply any pending updates](/support-and-community/troubleshooting-and-support/updating-warp/) so that the new Warp binary has the correct permissions. We are tracking this issue [here](https://github.com/warpdotdev/Warp/issues/3009). +
![Permission error on macOS](../../../../assets/support-and-community/permission-error-macos.png) +
A file permission error dialog on macOS.
+
**Auto-Update error on macOS** diff --git a/src/content/docs/support-and-community/troubleshooting-and-support/sending-us-feedback.mdx b/src/content/docs/support-and-community/troubleshooting-and-support/sending-us-feedback.mdx index c34186c..6d0e0d9 100644 --- a/src/content/docs/support-and-community/troubleshooting-and-support/sending-us-feedback.mdx +++ b/src/content/docs/support-and-community/troubleshooting-and-support/sending-us-feedback.mdx @@ -224,7 +224,10 @@ Collect a sample using the steps for your platform and attach it to a new [GitHu 1. Reproduce the high CPU usage or unresponsiveness in Warp. 2. While the issue is occurring, open **Activity Monitor**, select the **Warp** process, and click **Sample Process**. +
![Sampling the Warp process in Activity Monitor](../../../../assets/support-and-community/activity-monitor-sample-process.png) +
Sampling a Warp process in Activity Monitor.
+
3. Save the resulting sample and attach it to your GitHub issue. diff --git a/src/content/docs/terminal/appearance/app-icons.mdx b/src/content/docs/terminal/appearance/app-icons.mdx index 6c6b045..2859a32 100644 --- a/src/content/docs/terminal/appearance/app-icons.mdx +++ b/src/content/docs/terminal/appearance/app-icons.mdx @@ -32,7 +32,10 @@ App icons are only available for Warp on macOS. The feature doesn't support cust * Navigate to **Settings** > **Appearance** > **Icon** > **Customize your app icon** * Select the desired dock icon from the drop down menu +
![Icon customization drop-down menu](../../../../assets/terminal/custom-dock-icon-dropdown.png) +
Icon customization drop-down menu.
+
## Dock icons diff --git a/src/content/docs/terminal/appearance/prompt.mdx b/src/content/docs/terminal/appearance/prompt.mdx index 7ca10b1..addcd1b 100644 --- a/src/content/docs/terminal/appearance/prompt.mdx +++ b/src/content/docs/terminal/appearance/prompt.mdx @@ -30,7 +30,10 @@ To customize which context chips your Warp prompt displays: 1. Right-click the prompt area and select **Edit prompt**. +
![Right-click context menu showing the Edit prompt option](../../../../assets/terminal/edit-prompt-modal.png) +
Prompt editing via right-click.
+
2. Select **Warp Prompt**. 3. Drag and drop context chips to configure which pieces of information your prompt displays. @@ -180,7 +183,10 @@ When installing the Powerlevel10k (P10k) prompt, we recommend you use the [Meslo \ P10K may display the arrow dividers as grey instead of color. The color for those chars is rendered grey due to Warp's minimum contrast setting. To [workaround](https://github.com/warpdotdev/Warp/issues/2851#issuecomment-1605005256) this issue, go to **Settings** > **Appearance** > **Text** > **Enforce minimum contrast** and set it to "Never". +
![Example of the grey dividers in p10k](../../../../assets/terminal/p10k-grey-arrow-prompt.png) +
Example of the grey dividers in p10k.
+
Warp does support [p10k](https://github.com/romkatv/powerlevel10k#installation) version 1.19.0 and above. Ensure you have the latest version installed and restart Warp after the installation/update of p10k. Then enable the custom prompt as stated [above](/terminal/appearance/prompt/#choosing-your-prompt-type) and it should work. diff --git a/src/content/docs/terminal/blocks/sticky-command-header.mdx b/src/content/docs/terminal/blocks/sticky-command-header.mdx index ff6e187..001bbbe 100644 --- a/src/content/docs/terminal/blocks/sticky-command-header.mdx +++ b/src/content/docs/terminal/blocks/sticky-command-header.mdx @@ -44,4 +44,7 @@ For long-running commands that take up the full screen, the sticky header only s +
![Toggle active header and Jump to bottom of block demo](/assets/terminal/sticky-header-toggle-active-demo.gif) +
Toggle active header and Jump to bottom of block demo.
+
diff --git a/src/content/docs/terminal/command-palette.mdx b/src/content/docs/terminal/command-palette.mdx index 786bb51..0dbfd50 100644 --- a/src/content/docs/terminal/command-palette.mdx +++ b/src/content/docs/terminal/command-palette.mdx @@ -7,7 +7,10 @@ description: >- import { Tabs, TabItem } from '@astrojs/starlight/components'; import VideoEmbed from '@components/VideoEmbed.astro'; +
![Command Palette Panel](../../../assets/terminal/command-palette-panel.png) +
Command Palette Panel.
+
## How to access it diff --git a/src/content/docs/terminal/editor/index.mdx b/src/content/docs/terminal/editor/index.mdx index 281cb7c..9649b96 100644 --- a/src/content/docs/terminal/editor/index.mdx +++ b/src/content/docs/terminal/editor/index.mdx @@ -45,4 +45,7 @@ Warp can automatically complete quotes, brackets, and parentheses like you're us +
![soft wrapping text in Warp input editor](../../../../assets/terminal/soft-wrapping.png) +
Soft wrapping applied to long lines in the editor.
+
diff --git a/src/content/docs/terminal/entry/command-history.mdx b/src/content/docs/terminal/entry/command-history.mdx index 291bab4..1f9d705 100644 --- a/src/content/docs/terminal/entry/command-history.mdx +++ b/src/content/docs/terminal/entry/command-history.mdx @@ -13,7 +13,10 @@ While running, Warp isolates the history of each shell session e.g. if you have Command History also provides rich information like exit code, directory, thread, time to finish running, last run, etc. +
![Command History rich information](../../../../assets/terminal/command-history-rich.png) +
Command history with rich metadata.
+
## How to access it diff --git a/src/content/docs/terminal/input/classic-input.mdx b/src/content/docs/terminal/input/classic-input.mdx index b47e8e5..3519599 100644 --- a/src/content/docs/terminal/input/classic-input.mdx +++ b/src/content/docs/terminal/input/classic-input.mdx @@ -52,7 +52,10 @@ This opens an agent conversation where you can write questions and tasks in an o When you are in Agent Mode, a ✨ sparkles icon will display in line with your terminal input. +
![The sparkles on the command line indicate Agent Mode is active.](../../../../assets/terminal/undo_my_git_commit.png) +
Agent Mode active indicator in Classic Input.
+
## Auto-detection for natural language and configurable settings @@ -64,7 +67,10 @@ You can also turn autodetection off from **Settings** > **Agents** > **Warp Agen The first time you enter Agent Mode, you will be served a banner with the option to disable auto-detection for natural language on your command line: +
![Warp displays an option to toggle natural language detection on / off](../../../../assets/terminal/banner_for_auto-detection_first_experience.png) +
Natural language detection toggle.
+
## Input hints @@ -110,11 +116,17 @@ You must explicitly agree and press `Enter` to run the requested command. When y If you do not wish to send the command or its output to AI, you can click Cancel or press `Ctrl+C` to exit Agent Mode and return to the traditional command line. +
![Oz asks permission to run a command and read the output.](../../../../assets/terminal/warp-ai-permissions.png) +
Agent command approval prompt.
+
Once a requested command is executed, you can click to expand the output and view command details. +
![Viewing command details](../../../../assets/terminal/warp-ai-viewing-commands.png) +
Viewing command details.
+
If a requested command fails, Oz detects it. Agent Mode is self-correcting. It will request another command until it completes the task for you. diff --git a/src/content/docs/terminal/input/universal-input.mdx b/src/content/docs/terminal/input/universal-input.mdx index 25d7a8d..8619acb 100644 --- a/src/content/docs/terminal/input/universal-input.mdx +++ b/src/content/docs/terminal/input/universal-input.mdx @@ -15,7 +15,10 @@ import VideoEmbed from '@components/VideoEmbed.astro'; The **Universal Input** was the main input interface for using Warp. +
![The Universal Input with an Agent prompt and multiple contextual chips active.](../../../../assets/terminal/universal-input-header.png) +
Universal Input with contextual chips.
+
@@ -40,7 +43,10 @@ Ask Warp's agent to build, debug, or run tasks in natural language. Warp uses le _Indicator:_ Agent icon is highlighted in the switcher. +
![Universal Input locked in Agent Mode.](../../../../assets/terminal/agent-mode-locked-universal-input.png) +
Universal Input locked in Agent Mode.
+
#### 2. Terminal Mode (shell commands) @@ -48,7 +54,10 @@ Enter shell commands just like any terminal, with the benefit of Warp’s modern _Indicator_: Terminal icon highlighted in the switcher +
![Universal Input locked in Terminal Mode.](../../../../assets/terminal/universal-input-terminal-mode.png) +
Universal Input locked in Terminal Mode.
+
#### 3. Auto-detection Mode @@ -56,7 +65,10 @@ Warp automatically detects whether your input is natural language or a shell com _Indicator_: Neither mode highlighted. +
![Universal Input in an empty / zero state.](../../../../assets/terminal/zero-state-universal-input.png) +
Universal Input in an empty / zero state.
+
When Warp detects an input type, the input switcher softly highlights the corresponding mode. @@ -117,11 +129,17 @@ By default, auto-detection is enabled. This means Warp decides whether to treat When you're in Agent Mode, the **Agent icon** will be highlighted in the [Universal Input(/terminal/input/universal-input/) +
![The Agent icon in the Universal input indicates that Agent Mode is active.](../../../../assets/terminal/using-agents-universal-input.png) +
Agent Mode indicator in Universal Input.
+
In Classic Input, you’ll also see a ✨ sparkles indicator inline. +
![The sparkles on the command line indicate Agent Mode is active.](../../../../assets/terminal/undo_my_git_commit.png) +
Agent Mode active indicator in Classic Input.
+
By default, entering Agent Mode starts you in _Pair Mode_, where you can continue an ongoing conversation by asking follow-up questions or assigning tasks. From here, you can ask the agent to build, debug, fix, or even deploy code as needed. @@ -177,13 +195,19 @@ When auto-detection is turned off, you’ll need to explicitly switch between Te The first time you enter Agent Mode, Warp will display a banner with the option to disable natural language detection for your command line: +
![Warp displays an option to toggle natural language detection on / off](../../../../assets/terminal/banner_for_auto-detection_first_experience.png) +
Natural language detection toggle.
+
--- ## Contextual Input Chips +
![Universal Input's contextual input chips, from left to right: conversation management, node version, active directory, Git and code diffs, and 2 attached images.](../../../../assets/terminal/universal-input.png) +
Universal Input contextual chips.
+
The Universal Input includes **contextual chips** that provide inline information about your current environment. These chips surface relevant details such as directory paths, Git status, conversations, or runtime versions, making it easier to navigate, manage context, and take quick actions without leaving the input. @@ -193,7 +217,10 @@ The conversation management chip shows your recent [Agent conversations](/agent- These chips appear in both Agent Mode and Terminal Mode, so you can continue a previous conversation without starting from scratch. For more details, see [Agent Conversations](/agent-platform/local-agents/interacting-with-agents/). +
![The Conversation Management chip displays recent Agent conversations and lets you continue or reopen them directly from the input.](../../../../assets/terminal/conversation-management-chip-universal-input.png) +
The Conversation Management chip.
+
These chips appear in both Agent Mode and Terminal Mode, helping you continue a previous conversation without starting from scratch. For more details, refer to [Agent Conversations](/agent-platform/local-agents/interacting-with-agents/). @@ -201,7 +228,10 @@ These chips appear in both Agent Mode and Terminal Mode, helping you continue a The active directory chip displays your current working directory and enables simple file navigation. Clicking on a folder moves you into that folder, while clicking on a file opens it in [Warp’s native code editor](/code/code-editor/). This makes it possible to move around your workspace seamlessly from within the input. +
![The Active Directory chip lets you browse directories and open files directly from the input.](../../../../assets/terminal/active-directory-chip.png) +
The Active Directory chip.
+
#### Git Status chip @@ -209,19 +239,28 @@ When you're in a Git-tracked repository, the Git Status chip displays file- and The chip updates automatically as files are added, removed, or changed, giving you a real-time view of your repository state. +
![The Git Status chip highlights repository changes and provides quick access to code review.](../../../../assets/terminal/git-branch-chip.png) +
The Git Status chip.
+
#### File attachments chips The file attachments chip lets you attach images and other files directly to a prompt. You can upload up to five [images at a time (as Agent Context)](/agent-platform/local-agents/agent-context/images-as-context/) using the upload button in the toolbelt or by dragging and dropping files into the input. This makes it possible to add screenshots, diagrams, PDFs, or other references directly to your query, giving the Agent richer context. +
![The File Attachments chip allows you to add images or files as context for your queries.](../../../../assets/terminal/images-as-context-chip.png) +
The File Attachments chip.
+
**Node version chip** In repositories that include a `package.json`, a Node Version chip appears to show the detected Node.js version. This gives you visibility into your runtime environment without needing to run additional commands. +
![The Node Version chip displays the Node.js version detected in your repository.](../../../../assets/terminal/node-version-chip.png) +
The Node Version chip.
+
:::note At this time, contextual chips are not configurable, but they update automatically based on your workspace and repository state. @@ -233,7 +272,10 @@ At this time, contextual chips are not configurable, but they update automatical The **Input Toolbelt** provides quick-access controls alongside the Universal Input. These tools allow you to attach context, run shortcuts, and configure Agent behavior without leaving the input field. Depending on the mode you are in, some features are automatically enabled or will place you into Agent Mode. +
![The Input Toolbelt in Warp’s Universal Input, showing quick-access controls for context, slash commands, voice input, attachments, profiles, and model selection.](../../../../assets/terminal/input-toolbar.png) +
The Input Toolbelt in Universal Input.
+
#### @ - Context diff --git a/src/content/docs/terminal/integrations-and-plugins.mdx b/src/content/docs/terminal/integrations-and-plugins.mdx index 341521a..1f77434 100644 --- a/src/content/docs/terminal/integrations-and-plugins.mdx +++ b/src/content/docs/terminal/integrations-and-plugins.mdx @@ -20,7 +20,10 @@ Currently, the Docker extension is only available on macOS. Select a container from the list and specify a shell type. Note, that only `bash|zsh|fish` are supported shells for docker containers. Then, select a user (optional) and finally click “Open in Warp” to run commands within the Docker container. +
![Warp's extension for Docker lists available containers](../../../assets/terminal/docker-extension.png) +
Warp's extension for Docker lists available containers.
+
## Raycast @@ -37,7 +40,10 @@ Warp + Raycast extension helps you open new windows, tabs, or Launch Configurati Within `Raycast Settings > Extensions > Apps` search for Warp and assign the alias "terminal" so that it will show up on a search. ::: +
![Raycast Terminal Tip](../../../assets/terminal/raycast-terminal-tip.png) +
Warp integration with the Raycast launcher.
+
## VSCode diff --git a/src/content/docs/terminal/more-features/full-screen-apps.mdx b/src/content/docs/terminal/more-features/full-screen-apps.mdx index b8479da..2aa78d4 100644 --- a/src/content/docs/terminal/more-features/full-screen-apps.mdx +++ b/src/content/docs/terminal/more-features/full-screen-apps.mdx @@ -49,4 +49,7 @@ Warp allows you to scale your terminal by fractions of a cell width | height. Wh Some full-screen applications don't behave well when resizing. If you are experiencing rendering issues with full screen apps, try turning this setting off. This will ensure that full-screen apps don't need to resize when starting up. ::: +
![alt-screen padding setting](../../../../assets/terminal/padding-settings.png) +
The alt-screen padding setting in appearance preferences.
+
diff --git a/src/content/docs/terminal/more-features/markdown-viewer.mdx b/src/content/docs/terminal/more-features/markdown-viewer.mdx index 60dfea8..58be532 100644 --- a/src/content/docs/terminal/more-features/markdown-viewer.mdx +++ b/src/content/docs/terminal/more-features/markdown-viewer.mdx @@ -24,7 +24,10 @@ Warp can be used for both editing and viewing rendered Markdown files in a [spli +
![Clicking a Markdown file link in the output of ls to open it in Warp](/assets/terminal/open-markdown-viewer.gif) +
Opening a Markdown file via link tooltip.
+
### Markdown-viewing commands @@ -44,7 +47,10 @@ From Finder, you can open a Markdown file in Warp from the “Open With” menu You can toggle between the Markdown editor and viewer via the pane overflow menu. +
![Clicking a Markdown file link in the output of ls to open it in Warp](/assets/terminal/markdown-raw-rendered-toggle.gif) +
Toggling between editor and viewer.
+
## Shell commands in Markdown files diff --git a/src/content/docs/terminal/more-features/settings-sync.mdx b/src/content/docs/terminal/more-features/settings-sync.mdx index 694df17..4adf705 100644 --- a/src/content/docs/terminal/more-features/settings-sync.mdx +++ b/src/content/docs/terminal/more-features/settings-sync.mdx @@ -12,9 +12,15 @@ sidebar: * You can toggle Settings Sync within the **Settings** > **Account** pane * Through the [Command Palette](/terminal/command-palette/) by searching for “Settings Sync” +
![Settings Sync in Account pane](../../../../assets/terminal/settings-sync-account.png) +
Settings Sync in Account pane.
+
+
![Settings Sync in Command Palette](../../../../assets/terminal/settings-sync-palette.png) +
Settings Sync in Command Palette.
+
## How settings sync works @@ -41,4 +47,7 @@ Not all settings are synced, however. Notably, Warp does not sync: You can tell when a setting is not synced because it will have a special cloud strikethrough icon in the settings panel. +
![Settings not synced](../../../../assets/terminal/settings-not-synced.png) +
Indicator showing settings are not synced.
+
diff --git a/src/content/docs/terminal/more-features/text-selection.mdx b/src/content/docs/terminal/more-features/text-selection.mdx index 34672dd..003a0d1 100644 --- a/src/content/docs/terminal/more-features/text-selection.mdx +++ b/src/content/docs/terminal/more-features/text-selection.mdx @@ -9,7 +9,10 @@ description: >- **Smart selection** goes beyond the typical double-click selection, which only highlights a single word. Instead, it uses semantic rules to treat common patterns (like URLs or file paths) as one unit, even when separated by punctuation or whitespace. +
![Using smart selection to select a file path by double clicking.](../../../../assets/terminal/smart-selection.png) +
Using smart selection to select a file path by double clicking.
+
Double-click on text in the input or blocklist. The following patterns are recognized: @@ -25,7 +28,10 @@ You can toggle smart selection on the **Settings** > **Features** > **Terminal** **Rectangular selection** lets you highlight text in a clean vertical block (also called _column_ or _box_ selection). This is especially useful for copying command output, logs, or prefixed text without grabbing unwanted characters. +
![Using rectangular selection to select by columns in the block output.](../../../../assets/terminal/rectangular-selection.png) +
Using rectangular selection to select by columns in the block output.
+
Hold the modifier keys while dragging your mouse: diff --git a/src/content/docs/terminal/windows/tab-configs.mdx b/src/content/docs/terminal/windows/tab-configs.mdx index f44614c..35fc1a3 100644 --- a/src/content/docs/terminal/windows/tab-configs.mdx +++ b/src/content/docs/terminal/windows/tab-configs.mdx @@ -27,7 +27,10 @@ Each Tab Config is a `.toml` file stored in `~/.warp/tab_configs/`. Every file d You can also capture a tab's current state as a reusable Tab Config without writing TOML. Right-click any tab in the [vertical tabs](/terminal/windows/vertical-tabs/) panel or horizontal tab bar to open the context menu, then click **Save as new config**. Warp generates a `.toml` file from the tab's layout, commands, and directory and adds it to the `+` menu. +
![Tab context menu in Warp's vertical tabs panel with Save as new config highlighted](../../../../assets/terminal/save-new-tab-config.png) +
Saving a tab config.
+
## Managing Tab Configs @@ -37,7 +40,10 @@ Saved Tab Configs appear in the `+` menu for quick access. When you hover a Tab * **Remove** — Remove the Tab Config from the `+` menu. * **Make default** — Assign the Tab Config as the default `Cmd T` action for new tabs. +
![Warp's + menu open with a saved screenshots_tab_config entry highlighted, and a sidecar panel showing Make default, Edit config, and Remove action buttons](../../../../assets/terminal/saved-tab-config-menu.png) +
Tab config menu with sidecar options.
+
## Using skills to manage Tab Configs diff --git a/src/content/docs/terminal/windows/vertical-tabs.mdx b/src/content/docs/terminal/windows/vertical-tabs.mdx index 0923dc6..c1f6885 100644 --- a/src/content/docs/terminal/windows/vertical-tabs.mdx +++ b/src/content/docs/terminal/windows/vertical-tabs.mdx @@ -41,7 +41,10 @@ To switch from horizontal tabs to the vertical tabs panel: The vertical tabs panel appears as a resizable sidebar on the left side of the window. The horizontal tab bar is hidden while vertical tabs are active. +
![A Warp window with the vertical tabs sidebar on the left listing a Claude Code tab and a codex tab alongside the main terminal pane](../../../../assets/terminal/multi-agents.png) +
Vertical tab with agent details.
+
:::note You can also toggle vertical tabs from the [Command Palette](/terminal/command-palette/) by searching for "vertical tab layout." @@ -55,19 +58,28 @@ The vertical tabs panel supports two display densities that you can switch betwe Compact mode is the default. Each pane row displays an icon and title on one line, with an optional subtitle below it. The subtitle is configurable via the **Additional metadata** setting in the settings popup. +
![Vertical tabs sidebar in compact mode with each pane row showing an icon, title, and a short subtitle below](../../../../assets/terminal/vertical-tabs-condensed.png) +
Vertical tabs in compact mode.
+
### Expanded mode Expanded mode shows each pane row with a title, description (such as the working directory or file path), and metadata (Git branch, diff stats badge, and PR badge when available). +
![Vertical tab rows in expanded mode showing titles, working directories, Git branches, diff stats, and agent status badges](../../../../assets/terminal/vertical-tabs-multi-agent.png) +
Vertical tabs overview.
+
### Switching view modes Click the settings icon (sliders) in the control bar at the top of the vertical tabs panel. In the popup, use the **Density** segmented control to switch between compact and expanded views. The change takes effect immediately. +
![The vertical tabs settings popup anchored to the sliders icon, showing View as, Density, Pane title as, Additional metadata, and Show details on hover options](../../../../assets/terminal/vertical-tab-settings.png) +
Vertical tabs settings popup.
+
## Customizing vertical tabs @@ -105,7 +117,10 @@ Agent pane icons display a small circular badge overlay in the bottom-right corn | **Cancelled** | Gray stop | The user cancelled the agent's last turn. | | **Blocked** | Yellow stop | The agent is waiting for user approval to proceed. | +
![Vertical tabs sidebar with four tab rows showing different agent status badges: a yellow blocked square, a magenta in-progress moon on the Claude Code brand icon, and green completion checks](../../../../assets/terminal/agent-status-badges.png) +
Agent status badges on vertical tabs.
+
Third-party CLI agents (Claude Code, Codex, Gemini CLI, and others) display their brand icon and color inside the circular pane icon, with the same status badge overlay. @@ -144,7 +159,10 @@ Renaming applies to tabs only. Individual panes can't be renamed at this time. Hover any pane row to open a floating detail card anchored to the right side of the panel. The sidecar shows full, un-clipped metadata (complete directory paths, full branch names, and the full conversation or command title) without changing which pane is focused. +
![The vertical tabs panel with a Claude Code tab hovered, showing a floating detail card with the agent's In progress status, working directory, and session title](../../../../assets/terminal/tab-hover-detail-card.png) +
Hover detail card for a vertical tab.
+
The sidecar stays open as you move the cursor from the row into the card. Move away from both the row and the sidecar to dismiss it. Disable this behavior with the **Show details on hover** toggle in the settings popup. diff --git a/src/styles/custom.css b/src/styles/custom.css index d0dbb61..6d9bfda 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -271,6 +271,31 @@ body { margin-right: auto; } +/* Figures — centered block with image and optional caption. + GitBook rendered `
…
` natively; these styles + restore that treatment in Astro Starlight. + + Caption editorial rules (see AGENTS.md § "Image caption guidelines"): + Orient the reader, don't instruct. Keep under ~20 words. No marketing + language. Don't repeat surrounding prose or list everything visible. */ +.sl-markdown-content figure { + margin: 1.5em 0; + text-align: center; +} + +.sl-markdown-content figure img { + display: block; + margin-left: auto; + margin-right: auto; +} + +.sl-markdown-content figcaption { + margin-top: 0.5rem; + font-size: var(--sl-text-sm); + color: var(--sl-color-gray-3); + line-height: 1.4; +} + /* Center and constrain main content — Scalar uses a tighter column */ .main-pane .sl-container { max-width: 46rem;