acp: Add onboarding modal & title bar banner (#36784)

Release Notes:

- N/A

---------

Co-authored-by: Bennet Bo Fenner <bennetbo@gmx.de>

assets/images/acp_logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="61" fill="none"><g clip-path="url(#a)"><path fill="#000" d="M130.75.385c5.428 0 10.297 2.81 13.011 7.511l14.214 24.618-.013-.005c2.599 4.504 2.707 9.932.28 14.513-2.618 4.944-7.862 8.015-13.679 8.015h-31.811c-.452 0-.873-.242-1.103-.637a1.268 1.268 0 0 1 0-1.274l3.919-6.78c.223-.394.65-.636 1.102-.636h28.288a5.622 5.622 0 0 0 4.925-2.849 5.615 5.615 0 0 0 0-5.69l-14.214-24.617a5.621 5.621 0 0 0-4.925-2.848 5.621 5.621 0 0 0-4.925 2.848l-14.214 24.618a6.267 6.267 0 0 0-.319.643.998.998 0 0 1-.069.14L101.724 54.4l-.823 1.313-2.529 4.39a1.27 1.27 0 0 1-1.103.636h-7.83c-.452 0-.873-.242-1.102-.637-.23-.394-.23-.879 0-1.274l2.188-3.791H66.803c-3.32 0-6.454-1.122-8.818-3.167a17.141 17.141 0 0 1-3.394-3.96 1.261 1.261 0 0 1-.091-.137L34.2 12.573a5.622 5.622 0 0 0-4.925-2.849 5.621 5.621 0 0 0-4.924 2.85L10.137 37.19a5.615 5.615 0 0 0 0 5.69 5.63 5.63 0 0 0 4.925 2.841h29.862a1.276 1.276 0 0 1 1.102 1.912l-3.912 6.778a1.27 1.27 0 0 1-1.102.638H14.495c-3.32 0-6.454-1.128-8.817-3.173-5.906-5.104-7.36-12.883-3.62-19.363L16.267 7.89C18.872 3.385 23.517.583 28.697.39c.184-.006.356-.006.534-.006 5.378 0 10.45 3.007 13.246 7.85l12.986 22.372L68.58 7.891C71.186 3.385 75.83.582 81.01.39c.185-.006.358-.006.536-.006 4.453 0 8.71 2.039 11.672 5.588.337.407.388.98.127 1.446l-3.765 6.6a1.268 1.268 0 0 1-2.205.006l-.847-1.465a5.623 5.623 0 0 0-4.926-2.848 5.622 5.622 0 0 0-4.924 2.848L62.464 37.18a5.614 5.614 0 0 0 0 5.689 5.628 5.628 0 0 0 4.925 2.842H95.91L117.76 7.87c2.714-4.683 7.575-7.486 12.99-7.486Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 .385h160v60.36H0z"/></clipPath></defs></svg>

crates/agent_ui/src/agent_configuration.rs

@@ -1093,7 +1093,7 @@ impl AgentConfiguration {
                             )
                             .child(
                                 Label::new(
-                                    "Use the full power of Zed's UI with your favorite agent, connected via the Agent Client Protocol.",
+                                    "Bring the agent of your choice to Zed via our new Agent Client Protocol.",
                                 )
                                 .color(Color::Muted),
                             ),

crates/agent_ui/src/agent_panel.rs

@@ -14,6 +14,7 @@ use zed_actions::agent::ReauthenticateAgent;
 
 use crate::acp::{AcpThreadHistory, ThreadHistoryEvent};
 use crate::agent_diff::AgentDiffThread;
+use crate::ui::AcpOnboardingModal;
 use crate::{
     AddContextServer, AgentDiffPane, ContinueThread, ContinueWithBurnMode,
     DeleteRecentlyOpenThread, ExpandMessageEditor, Follow, InlineAssistant, NewTextThread,
@@ -77,7 +78,10 @@ use workspace::{
 };
 use zed_actions::{
     DecreaseBufferFontSize, IncreaseBufferFontSize, ResetBufferFontSize,
-    agent::{OpenOnboardingModal, OpenSettings, ResetOnboarding, ToggleModelSelector},
+    agent::{
+        OpenAcpOnboardingModal, OpenOnboardingModal, OpenSettings, ResetOnboarding,
+        ToggleModelSelector,
+    },
     assistant::{OpenRulesLibrary, ToggleFocus},
 };
 
@@ -201,6 +205,9 @@ pub fn init(cx: &mut App) {
                 .register_action(|workspace, _: &OpenOnboardingModal, window, cx| {
                     AgentOnboardingModal::toggle(workspace, window, cx)
                 })
+                .register_action(|workspace, _: &OpenAcpOnboardingModal, window, cx| {
+                    AcpOnboardingModal::toggle(workspace, window, cx)
+                })
                 .register_action(|_workspace, _: &ResetOnboarding, window, cx| {
                     window.dispatch_action(workspace::RestoreBanner.boxed_clone(), cx);
                     window.refresh();
@@ -1841,19 +1848,6 @@ impl AgentPanel {
         menu
     }
 
-    pub fn set_selected_agent(
-        &mut self,
-        agent: AgentType,
-        window: &mut Window,
-        cx: &mut Context<Self>,
-    ) {
-        if self.selected_agent != agent {
-            self.selected_agent = agent.clone();
-            self.serialize(cx);
-        }
-        self.new_agent_thread(agent, window, cx);
-    }
-
     pub fn selected_agent(&self) -> AgentType {
         self.selected_agent.clone()
     }
@@ -1864,6 +1858,11 @@ impl AgentPanel {
         window: &mut Window,
         cx: &mut Context<Self>,
     ) {
+        if self.selected_agent != agent {
+            self.selected_agent = agent.clone();
+            self.serialize(cx);
+        }
+
         match agent {
             AgentType::Zed => {
                 window.dispatch_action(
@@ -2544,7 +2543,7 @@ impl AgentPanel {
                                                         workspace.panel::<AgentPanel>(cx)
                                                     {
                                                         panel.update(cx, |panel, cx| {
-                                                            panel.set_selected_agent(
+                                                            panel.new_agent_thread(
                                                                 AgentType::NativeAgent,
                                                                 window,
                                                                 cx,
@@ -2570,7 +2569,7 @@ impl AgentPanel {
                                                         workspace.panel::<AgentPanel>(cx)
                                                     {
                                                         panel.update(cx, |panel, cx| {
-                                                            panel.set_selected_agent(
+                                                            panel.new_agent_thread(
                                                                 AgentType::TextThread,
                                                                 window,
                                                                 cx,
@@ -2598,7 +2597,7 @@ impl AgentPanel {
                                                             workspace.panel::<AgentPanel>(cx)
                                                         {
                                                             panel.update(cx, |panel, cx| {
-                                                                panel.set_selected_agent(
+                                                                panel.new_agent_thread(
                                                                     AgentType::Gemini,
                                                                     window,
                                                                     cx,
@@ -2625,7 +2624,7 @@ impl AgentPanel {
                                                             workspace.panel::<AgentPanel>(cx)
                                                         {
                                                             panel.update(cx, |panel, cx| {
-                                                                panel.set_selected_agent(
+                                                                panel.new_agent_thread(
                                                                     AgentType::ClaudeCode,
                                                                     window,
                                                                     cx,
@@ -2658,7 +2657,7 @@ impl AgentPanel {
                                                                 workspace.panel::<AgentPanel>(cx)
                                                             {
                                                                 panel.update(cx, |panel, cx| {
-                                                                    panel.set_selected_agent(
+                                                                    panel.new_agent_thread(
                                                                         AgentType::Custom {
                                                                             name: agent_name
                                                                                 .clone(),
@@ -2682,9 +2681,9 @@ impl AgentPanel {
                             })
                             .when(cx.has_flag::<GeminiAndNativeFeatureFlag>(), |menu| {
                                 menu.separator().link(
-                                    "Add Your Own Agent",
+                                    "Add Other Agents",
                                     OpenBrowser {
-                                        url: "https://agentclientprotocol.com/".into(),
+                                        url: zed_urls::external_agents_docs(cx),
                                     }
                                     .boxed_clone(),
                                 )

crates/agent_ui/src/ui.rs

@@ -1,3 +1,4 @@
+mod acp_onboarding_modal;
 mod agent_notification;
 mod burn_mode_tooltip;
 mod context_pill;
@@ -6,6 +7,7 @@ mod onboarding_modal;
 pub mod preview;
 mod unavailable_editing_tooltip;
 
+pub use acp_onboarding_modal::*;
 pub use agent_notification::*;
 pub use burn_mode_tooltip::*;
 pub use context_pill::*;

crates/agent_ui/src/ui/acp_onboarding_modal.rs

@@ -0,0 +1,254 @@
+use client::zed_urls;
+use gpui::{
+    ClickEvent, DismissEvent, Entity, EventEmitter, FocusHandle, Focusable, MouseDownEvent, Render,
+    linear_color_stop, linear_gradient,
+};
+use ui::{TintColor, Vector, VectorName, prelude::*};
+use workspace::{ModalView, Workspace};
+
+use crate::agent_panel::{AgentPanel, AgentType};
+
+macro_rules! acp_onboarding_event {
+    ($name:expr) => {
+        telemetry::event!($name, source = "ACP Onboarding");
+    };
+    ($name:expr, $($key:ident $(= $value:expr)?),+ $(,)?) => {
+        telemetry::event!($name, source = "ACP Onboarding", $($key $(= $value)?),+);
+    };
+}
+
+pub struct AcpOnboardingModal {
+    focus_handle: FocusHandle,
+    workspace: Entity<Workspace>,
+}
+
+impl AcpOnboardingModal {
+    pub fn toggle(workspace: &mut Workspace, window: &mut Window, cx: &mut Context<Workspace>) {
+        let workspace_entity = cx.entity();
+        workspace.toggle_modal(window, cx, |_window, cx| Self {
+            workspace: workspace_entity,
+            focus_handle: cx.focus_handle(),
+        });
+    }
+
+    fn open_panel(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context<Self>) {
+        self.workspace.update(cx, |workspace, cx| {
+            workspace.focus_panel::<AgentPanel>(window, cx);
+
+            if let Some(panel) = workspace.panel::<AgentPanel>(cx) {
+                panel.update(cx, |panel, cx| {
+                    panel.new_agent_thread(AgentType::Gemini, window, cx);
+                });
+            }
+        });
+
+        cx.emit(DismissEvent);
+
+        acp_onboarding_event!("Open Panel Clicked");
+    }
+
+    fn view_docs(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context<Self>) {
+        cx.open_url(&zed_urls::external_agents_docs(cx));
+        cx.notify();
+
+        acp_onboarding_event!("Documentation Link Clicked");
+    }
+
+    fn cancel(&mut self, _: &menu::Cancel, _: &mut Window, cx: &mut Context<Self>) {
+        cx.emit(DismissEvent);
+    }
+}
+
+impl EventEmitter<DismissEvent> for AcpOnboardingModal {}
+
+impl Focusable for AcpOnboardingModal {
+    fn focus_handle(&self, _cx: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl ModalView for AcpOnboardingModal {}
+
+impl Render for AcpOnboardingModal {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let illustration_element = |label: bool, opacity: f32| {
+            h_flex()
+                .px_1()
+                .py_0p5()
+                .gap_1()
+                .rounded_sm()
+                .bg(cx.theme().colors().element_active.opacity(0.05))
+                .border_1()
+                .border_color(cx.theme().colors().border)
+                .border_dashed()
+                .child(
+                    Icon::new(IconName::Stop)
+                        .size(IconSize::Small)
+                        .color(Color::Custom(cx.theme().colors().text_muted.opacity(0.15))),
+                )
+                .map(|this| {
+                    if label {
+                        this.child(
+                            Label::new("Your Agent Here")
+                                .size(LabelSize::Small)
+                                .color(Color::Muted),
+                        )
+                    } else {
+                        this.child(
+                            div().w_16().h_1().rounded_full().bg(cx
+                                .theme()
+                                .colors()
+                                .element_active
+                                .opacity(0.6)),
+                        )
+                    }
+                })
+                .opacity(opacity)
+        };
+
+        let illustration = h_flex()
+            .relative()
+            .h(rems_from_px(126.))
+            .bg(cx.theme().colors().editor_background)
+            .border_b_1()
+            .border_color(cx.theme().colors().border_variant)
+            .justify_center()
+            .gap_8()
+            .rounded_t_md()
+            .overflow_hidden()
+            .child(
+                div().absolute().inset_0().w(px(515.)).h(px(126.)).child(
+                    Vector::new(VectorName::AcpGrid, rems_from_px(515.), rems_from_px(126.))
+                        .color(ui::Color::Custom(cx.theme().colors().text.opacity(0.02))),
+                ),
+            )
+            .child(div().absolute().inset_0().size_full().bg(linear_gradient(
+                0.,
+                linear_color_stop(
+                    cx.theme().colors().elevated_surface_background.opacity(0.1),
+                    0.9,
+                ),
+                linear_color_stop(
+                    cx.theme().colors().elevated_surface_background.opacity(0.),
+                    0.,
+                ),
+            )))
+            .child(
+                div()
+                    .absolute()
+                    .inset_0()
+                    .size_full()
+                    .bg(gpui::black().opacity(0.15)),
+            )
+            .child(
+                h_flex()
+                    .gap_4()
+                    .child(
+                        Vector::new(VectorName::AcpLogo, rems_from_px(106.), rems_from_px(40.))
+                            .color(ui::Color::Custom(cx.theme().colors().text.opacity(0.8))),
+                    )
+                    .child(
+                        Vector::new(
+                            VectorName::AcpLogoSerif,
+                            rems_from_px(111.),
+                            rems_from_px(41.),
+                        )
+                        .color(ui::Color::Custom(cx.theme().colors().text.opacity(0.8))),
+                    ),
+            )
+            .child(
+                v_flex()
+                    .gap_1p5()
+                    .child(illustration_element(false, 0.15))
+                    .child(illustration_element(true, 0.3))
+                    .child(
+                        h_flex()
+                            .pl_1()
+                            .pr_2()
+                            .py_0p5()
+                            .gap_1()
+                            .rounded_sm()
+                            .bg(cx.theme().colors().element_active.opacity(0.2))
+                            .border_1()
+                            .border_color(cx.theme().colors().border)
+                            .child(
+                                Icon::new(IconName::AiGemini)
+                                    .size(IconSize::Small)
+                                    .color(Color::Muted),
+                            )
+                            .child(Label::new("New Gemini CLI Thread").size(LabelSize::Small)),
+                    )
+                    .child(illustration_element(true, 0.3))
+                    .child(illustration_element(false, 0.15)),
+            );
+
+        let heading = v_flex()
+            .w_full()
+            .gap_1()
+            .child(
+                Label::new("Now Available")
+                    .size(LabelSize::Small)
+                    .color(Color::Muted),
+            )
+            .child(Headline::new("Bring Your Own Agent to Zed").size(HeadlineSize::Large));
+
+        let copy = "Bring the agent of your choice to Zed via our new Agent Client Protocol (ACP), starting with Google's Gemini CLI integration.";
+
+        let open_panel_button = Button::new("open-panel", "Start with Gemini CLI")
+            .icon_size(IconSize::Indicator)
+            .style(ButtonStyle::Tinted(TintColor::Accent))
+            .full_width()
+            .on_click(cx.listener(Self::open_panel));
+
+        let docs_button = Button::new("add-other-agents", "Add Other Agents")
+            .icon(IconName::ArrowUpRight)
+            .icon_size(IconSize::Indicator)
+            .icon_color(Color::Muted)
+            .full_width()
+            .on_click(cx.listener(Self::view_docs));
+
+        let close_button = h_flex().absolute().top_2().right_2().child(
+            IconButton::new("cancel", IconName::Close).on_click(cx.listener(
+                |_, _: &ClickEvent, _window, cx| {
+                    acp_onboarding_event!("Canceled", trigger = "X click");
+                    cx.emit(DismissEvent);
+                },
+            )),
+        );
+
+        v_flex()
+            .id("acp-onboarding")
+            .key_context("AcpOnboardingModal")
+            .relative()
+            .w(rems(34.))
+            .h_full()
+            .elevation_3(cx)
+            .track_focus(&self.focus_handle(cx))
+            .overflow_hidden()
+            .on_action(cx.listener(Self::cancel))
+            .on_action(cx.listener(|_, _: &menu::Cancel, _window, cx| {
+                acp_onboarding_event!("Canceled", trigger = "Action");
+                cx.emit(DismissEvent);
+            }))
+            .on_any_mouse_down(cx.listener(|this, _: &MouseDownEvent, window, _cx| {
+                this.focus_handle.focus(window);
+            }))
+            .child(illustration)
+            .child(
+                v_flex()
+                    .p_4()
+                    .gap_2()
+                    .child(heading)
+                    .child(Label::new(copy).color(Color::Muted))
+                    .child(
+                        v_flex()
+                            .w_full()
+                            .mt_2()
+                            .gap_1()
+                            .child(open_panel_button)
+                            .child(docs_button),
+                    ),
+            )
+            .child(close_button)
+    }
+}

crates/client/src/zed_urls.rs

@@ -43,3 +43,11 @@ pub fn ai_privacy_and_security(cx: &App) -> String {
         server_url = server_url(cx)
     )
 }
+
+/// Returns the URL to Zed AI's external agents documentation.
+pub fn external_agents_docs(cx: &App) -> String {
+    format!(
+        "{server_url}/docs/ai/external-agents",
+        server_url = server_url(cx)
+    )
+}

crates/title_bar/src/onboarding_banner.rs

@@ -119,7 +119,7 @@ impl Render for OnboardingBanner {
                         h_flex()
                             .h_full()
                             .gap_1()
-                            .child(Icon::new(self.details.icon_name).size(IconSize::Small))
+                            .child(Icon::new(self.details.icon_name).size(IconSize::XSmall))
                             .child(
                                 h_flex()
                                     .gap_0p5()

crates/title_bar/src/title_bar.rs

@@ -275,11 +275,11 @@ impl TitleBar {
 
         let banner = cx.new(|cx| {
             OnboardingBanner::new(
-                "Debugger Onboarding",
+                "ACP Onboarding",
-                IconName::Debug,
+                IconName::Sparkle,
-                "The Debugger",
+                "Bring Your Own Agent",
-                None,
+                Some("Introducing:".into()),
-                zed_actions::debugger::OpenOnboardingModal.boxed_clone(),
+                zed_actions::agent::OpenAcpOnboardingModal.boxed_clone(),
                 cx,
             )
         });

crates/ui/src/components/image.rs

@@ -13,6 +13,9 @@ use crate::prelude::*;
 )]
 #[strum(serialize_all = "snake_case")]
 pub enum VectorName {
+    AcpGrid,
+    AcpLogo,
+    AcpLogoSerif,
     AiGrid,
     DebuggerGrid,
     Grid,

crates/zed_actions/src/lib.rs

@@ -284,6 +284,8 @@ pub mod agent {
             OpenSettings,
             /// Opens the agent onboarding modal.
             OpenOnboardingModal,
+            /// Opens the ACP onboarding modal.
+            OpenAcpOnboardingModal,
             /// Resets the agent onboarding state.
             ResetOnboarding,
             /// Starts a chat conversation with the agent.