From 03e1915316689fc9e87a3103dfd8be23123b4e0d Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 8 Mar 2026 14:17:16 +0700
Subject: [PATCH] Improve agent input placeholder

---
 packages/app/src/components/agent-input-area.tsx | 2 +-
 packages/app/src/components/message-input.tsx    | 2 +-
 packages/app/src/styles/theme.ts                 | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/agent-input-area.tsx b/packages/app/src/components/agent-input-area.tsx
index ccf6e80d3..7be46513d 100644
--- a/packages/app/src/components/agent-input-area.tsx
+++ b/packages/app/src/components/agent-input-area.tsx
@@ -808,7 +808,7 @@ export function AgentInputArea({
               onRemoveImage={handleRemoveImage}
               client={client}
               isReadyForDictation={isDictationReady}
-              placeholder="Message agent..."
+              placeholder="Message the agent, tag @files, or use /commands and /skills"
               autoFocus={autoFocus && isDesktopWebBreakpoint}
               autoFocusKey={`${serverId}:${agentId}`}
               disabled={isSubmitLoading}
diff --git a/packages/app/src/components/message-input.tsx b/packages/app/src/components/message-input.tsx
index 8881d2b53..130287c31 100644
--- a/packages/app/src/components/message-input.tsx
+++ b/packages/app/src/components/message-input.tsx
@@ -718,7 +718,7 @@ export const MessageInput = forwardRef<MessageInputRef, MessageInputProps>(funct
           value={value}
           onChangeText={handleInputChange}
           placeholder={placeholder}
-          placeholderTextColor={theme.colors.mutedForeground}
+          placeholderTextColor={theme.colors.surface4}
           onFocus={() => {
             isInputFocusedRef.current = true
             onFocusChange?.(true)
diff --git a/packages/app/src/styles/theme.ts b/packages/app/src/styles/theme.ts
index c6888e9be..7f47f824a 100644
--- a/packages/app/src/styles/theme.ts
+++ b/packages/app/src/styles/theme.ts
@@ -110,6 +110,7 @@ const lightSemanticColors = {
   surface1: "#fafafa",       // Subtle hover (was zinc-100, now zinc-50)
   surface2: "#f4f4f5",       // Elevated: badges, inputs, sheets (was zinc-200, now zinc-100)
   surface3: "#e4e4e7",       // Highest elevation (was zinc-300, now zinc-200)
+  surface4: "#d4d4d8",       // Extra emphasis (was zinc-400, now zinc-300)
   surfaceSidebar: "#f4f4f5", // Sidebar background (darker than main)
 
   // Text
@@ -180,6 +181,7 @@ const darkSemanticColors = {
   surface1: "#1f1f23",       // Subtle hover
   surface2: "#27272a",       // Elevated: badges, inputs, sheets
   surface3: "#3f3f46",       // Highest elevation
+  surface4: "#52525b",       // Extra emphasis
   surfaceSidebar: "#121216", // Sidebar background (darker than main)
 
   // Text