From dba5da7c10db26cb4430123281cbeafe7e4c2f61 Mon Sep 17 00:00:00 2001
From: James Long <longster@gmail.com>
Date: Wed, 22 Jul 2026 11:23:50 -0400
Subject: [PATCH] fix(tui): restore shell mode styling (#38231)

---
 packages/tui/src/component/prompt/index.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/tui/src/component/prompt/index.tsx b/packages/tui/src/component/prompt/index.tsx
index 7f5e081cff9..ff4b516a889 100644
--- a/packages/tui/src/component/prompt/index.tsx
+++ b/packages/tui/src/component/prompt/index.tsx
@@ -1300,11 +1300,16 @@ export function Prompt(props: PromptProps) {
 
   const highlight = createMemo(() => {
     if (leader()) return themeV2.border.default
-    if (store.mode === "shell") return themeV2.background.action.primary.default
+    if (store.mode === "shell") return themeV2.text.action.primary.selected
     const agent = local.agent.current()
     if (!agent) return themeV2.border.default
     return local.agent.color(agent.id)
   })
+  const agentLabel = createMemo(() => {
+    if (store.mode === "shell") return "Shell"
+    const agent = local.agent.current()
+    return agent ? Locale.titlecase(agent.id) : undefined
+  })
 
   const showVariant = createMemo(() => {
     const variants = local.model.variant.list()
@@ -1313,7 +1318,7 @@ export function Prompt(props: PromptProps) {
     return !!current
   })
 
-  const agentMetaAlpha = createFadeIn(() => !!local.agent.current(), animationsEnabled)
+  const agentMetaAlpha = createFadeIn(() => store.mode === "shell" || !!local.agent.current(), animationsEnabled)
   const modelMetaAlpha = createFadeIn(() => !!local.agent.current() && store.mode === "normal", animationsEnabled)
   const variantMetaAlpha = createFadeIn(
     () => !!local.agent.current() && store.mode === "normal" && showVariant(),
@@ -1460,12 +1465,10 @@ export function Prompt(props: PromptProps) {
             />
             <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
               <box flexDirection="row" gap={1}>
-                <Show when={local.agent.current()} fallback={<box height={1} />}>
-                  {(agent) => (
+                <Show when={agentLabel()} fallback={<box height={1} />}>
+                  {(label) => (
                     <>
-                      <text fg={fadeColor(highlight(), agentMetaAlpha())}>
-                        {store.mode === "shell" ? "Shell" : Locale.titlecase(agent().id)}
-                      </text>
+                      <text fg={fadeColor(highlight(), agentMetaAlpha())}>{label()}</text>
                       <Show when={store.mode === "normal" && local.permission.mode === "auto"}>
                         <text fg={fadeColor(themeV2.text.subdued, agentMetaAlpha())}>auto</text>
                       </Show>