agent_ui: Add some UI tweaks to the subagents thread (#49030)

Danilo Leal created 2 months ago

Just some relatively small UI adjustments, like adding the forward arrow
to make it clearer there's a hierarchy between the parent thread and the
subagent thread, and a check icon to comunicate the subagent thread is
done.

<img width="500" height="612" alt="Screenshot 2026-02-12 at 11  47@2x"
src="https://github.com/user-attachments/assets/d49319b5-9c19-435a-b5c7-424060fa0629"
/>

- [x] Code Reviewed
- [x] Manual QA

Release Notes:

- N/A

Change summary

assets/icons/forward_arrow_up.svg                    |  4 ++
crates/agent_ui/src/acp/thread_view/active_thread.rs | 23 +++++++++++--
crates/icons/src/icons.rs                            |  1 
3 files changed, 24 insertions(+), 4 deletions(-)

Detailed changes

assets/icons/forward_arrow_up.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 6.66669L13.3334 10L10.0001 13.3334" stroke="#C6CAD0" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.66675 5V7.33335C2.66675 8.0406 2.94765 8.71888 3.44775 9.21897C3.94785 9.71907 4.62615 10 5.33345 10H13.3334" stroke="#C6CAD0" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

crates/agent_ui/src/acp/thread_view/active_thread.rs

@@ -2306,6 +2306,8 @@ impl AcpThreadView {
         let title = self.thread.read(cx).title();
         let server_view = self.server_view.clone();
 
+        let is_done = self.thread.read(cx).status() == ThreadStatus::Idle;
+
         Some(
             h_flex()
                 .h(Tab::container_height(cx))
@@ -2314,9 +2316,20 @@ impl AcpThreadView {
                 .w_full()
                 .justify_between()
                 .border_b_1()
-                .border_color(cx.theme().colors().border_variant)
+                .border_color(cx.theme().colors().border)
                 .bg(cx.theme().colors().editor_background.opacity(0.2))
-                .child(Label::new(title).color(Color::Muted))
+                .child(
+                    h_flex()
+                        .child(
+                            Icon::new(IconName::ForwardArrowUp)
+                                .size(IconSize::Small)
+                                .color(Color::Muted),
+                        )
+                        .child(Label::new(title).color(Color::Muted).ml_2().mr_1())
+                        .when(is_done, |this| {
+                            this.child(Icon::new(IconName::Check).color(Color::Success))
+                        }),
+                )
                 .child(
                     IconButton::new("minimize_subagent", IconName::Minimize)
                         .icon_size(IconSize::Small)
@@ -3616,6 +3629,8 @@ impl AcpThreadView {
         if let Some(editing_index) = self.editing_message
             && editing_index < entry_ix
         {
+            let is_subagent = self.is_subagent();
+
             let backdrop = div()
                 .id(("backdrop", entry_ix))
                 .size_full()
@@ -3629,7 +3644,7 @@ impl AcpThreadView {
             div()
                 .relative()
                 .child(primary)
-                .child(backdrop)
+                .when(!is_subagent, |this| this.child(backdrop))
                 .into_any_element()
         } else {
             primary
@@ -5876,7 +5891,7 @@ impl AcpThreadView {
                 if is_canceled_or_failed {
                     "Subagent Canceled"
                 } else {
-                    "Spawning Subagent…"
+                    "Creating Subagent…"
                 }
                 .into()
             });

crates/icons/src/icons.rs

@@ -134,6 +134,7 @@ pub enum IconName {
     FontSize,
     FontWeight,
     ForwardArrow,
+    ForwardArrowUp,
     GenericClose,
     GenericMaximize,
     GenericMinimize,