Add docs link for agent API keys (#12024)

## Description
Adds a `Learn more` link to the agent API key helper text in the create
API key modal. The link points to the docs page anchor that will explain
personal vs. agent API keys after warpdotdev/docs#143 lands.

## Linked Issue
No linked issue; requested from Slack.
- [ ] The linked issue is labeled `ready-to-spec` or
`ready-to-implement`.
- [ ] Where appropriate, screenshots or a short video of the
implementation are included below (especially for user-visible or UI
changes).

## Testing
- `cargo fmt --manifest-path /workspace/warp/app/Cargo.toml --
/workspace/warp/app/src/settings_view/platform/create_api_key_modal.rs`
- `cargo check --manifest-path /workspace/warp/Cargo.toml -p warp --lib`

- [ ] I have manually tested my changes locally with `./script/run`

### Screenshots / Videos
Not included; this is a text/link-only modal change and was validated
with a targeted compile check in the sandbox.

## Agent Mode
- [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode

CHANGELOG-NONE

_Conversation:
https://staging.warp.dev/conversation/51bd7b68-6b31-4e28-ac1a-c9876a736b8b_
_Run:
https://oz.staging.warp.dev/runs/019e84f7-7104-7aa2-94e5-f832e226eb54_
_This PR was generated with [Oz](https://warp.dev/oz)._

Co-authored-by: Oz <oz-agent@warp.dev>

Author: jasonkeung

app/src/settings_view/platform/create_api_key_modal.rs

@@ -1,12 +1,13 @@
 use chrono::Utc;
+use markdown_parser::{FormattedText, FormattedTextFragment, FormattedTextLine};
 use pathfinder_geometry::vector::vec2f;
 use warp_core::features::FeatureFlag;
 use warp_server_client::auth::AgentIdentity;
 use warpui::elements::{
     Border, ChildAnchor, ChildView, ConstrainedBox, Container, CornerRadius, CrossAxisAlignment,
-    Empty, Expanded, Fill, Flex, MainAxisAlignment, MainAxisSize, MouseStateHandle,
-    OffsetPositioning, Padding, ParentElement, PositionedElementAnchor,
-    PositionedElementOffsetBounds, Radius, SavePosition, Stack, Text,
+    Empty, Expanded, Fill, Flex, FormattedTextElement, HighlightedHyperlink, MainAxisAlignment,
+    MainAxisSize, MouseStateHandle, OffsetPositioning, Padding, ParentElement,
+    PositionedElementAnchor, PositionedElementOffsetBounds, Radius, SavePosition, Stack, Text,
 };
 use warpui::ui_components::button::ButtonVariant;
 use warpui::ui_components::components::{Coords, UiComponent, UiComponentStyles};
@@ -29,6 +30,8 @@ use crate::view_components::{Dropdown as DropdownView, DropdownItem};
 use crate::workspaces::user_workspaces::UserWorkspaces;
 
 const OZ_AGENTS_URL: &str = "https://oz.warp.dev/agents?new=true";
+const API_KEY_DOCS_URL: &str =
+    "https://docs.warp.dev/reference/cli/api-keys/#personal-vs-agent-keys";
 
 const LABEL_FONT_SIZE: f32 = 14.;
 const INPUT_WIDTH: f32 = 428.; // 460px - (2 * 16px) padding
@@ -603,14 +606,33 @@ impl View for CreateApiKeyModal {
             RequestState::Succeeded => self.render_success_content(app),
             _ => {
                 let selected_key_type = self.api_key_type_control.as_ref(app).selected_option();
-
-                let description_text = Text::new(
-                    selected_key_type.description(),
-                    appearance.ui_font_family(),
-                    LABEL_FONT_SIZE,
-                )
-                .with_color(theme.nonactive_ui_text_color().into())
-                .finish();
+                let description_text = if selected_key_type == ApiKeyType::Agent {
+                    FormattedTextElement::new(
+                        FormattedText::new([FormattedTextLine::Line(vec![
+                            FormattedTextFragment::plain_text(selected_key_type.description()),
+                            FormattedTextFragment::plain_text(" "),
+                            FormattedTextFragment::hyperlink("Learn more", API_KEY_DOCS_URL),
+                        ])]),
+                        LABEL_FONT_SIZE,
+                        appearance.ui_font_family(),
+                        appearance.ui_font_family(),
+                        theme.nonactive_ui_text_color().into(),
+                        HighlightedHyperlink::default(),
+                    )
+                    .with_hyperlink_font_color(theme.accent().into_solid())
+                    .register_default_click_handlers(|url, _, ctx| {
+                        ctx.open_url(&url.url);
+                    })
+                    .finish()
+                } else {
+                    Text::new(
+                        selected_key_type.description(),
+                        appearance.ui_font_family(),
+                        LABEL_FONT_SIZE,
+                    )
+                    .with_color(theme.nonactive_ui_text_color().into())
+                    .finish()
+                };
 
                 let name_label = Text::new("Name", appearance.ui_font_family(), LABEL_FONT_SIZE)
                     .with_color(theme.active_ui_text_color().into())