From b088c9e70b214c230e4339d23f1113370e37a520 Mon Sep 17 00:00:00 2001
From: evanlowe <62918515+evanlowe@users.noreply.github.com>
Date: Mon, 27 Jul 2026 15:06:02 +0800
Subject: [PATCH] style(studio): refine new chat composer

---
 frontend/src/styles.css                       | 10 +++++++---
 frontend/src/ui/Composer.tsx                  |  2 +-
 frontend/tests/composerPresentation.test.mjs  |  1 +
 frontend/tests/newChatComposerLayout.test.mjs |  8 +++++---
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c22f3c7b..4621a790 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -930,8 +930,8 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 16px clamp(64px, 12vh, 104px);
-  gap: 32px;
+  padding: 0 16px clamp(96px, 18vh, 152px);
+  gap: 40px;
 }
 .welcome-title {
   margin: 0;
@@ -1803,7 +1803,11 @@ body {
   display: block;
   min-height: 136px;
   padding: 10px;
+  border-color: hsl(var(--border) / 0.55);
   border-radius: 16px;
+  box-shadow:
+    0 8px 32px rgb(0 0 0 / 0.028),
+    0 24px 72px 8px rgb(0 0 0 / 0.02);
 }
 .composer-input-stack {
   display: flex;
@@ -1843,7 +1847,7 @@ body {
 }
 .prompt-suggestions {
   position: absolute;
-  top: calc(100% + 12px);
+  top: calc(100% + 18px);
   left: 0;
   z-index: 1;
   display: grid;
diff --git a/frontend/src/ui/Composer.tsx b/frontend/src/ui/Composer.tsx
index 5d60a678..63224f5c 100644
--- a/frontend/src/ui/Composer.tsx
+++ b/frontend/src/ui/Composer.tsx
@@ -395,7 +395,7 @@ export function Composer({
             disabled={disabled}
             placeholder={skillMode
               ? `描述你想创建的 Skill，将使用 ${SKILL_MODELS.join(" 和 ")} 并行创建…`
-              : disabled ? "请选择 Agent" : `向 ${agentName} 发消息…`}
+              : disabled ? "请在页面左上角选择智能体" : `向 ${agentName} 发消息…`}
             aria-expanded={Boolean(trigger)}
             onChange={(e) => {
               onChange(e.target.value);
diff --git a/frontend/tests/composerPresentation.test.mjs b/frontend/tests/composerPresentation.test.mjs
index e49c088d..3a1db3e3 100644
--- a/frontend/tests/composerPresentation.test.mjs
+++ b/frontend/tests/composerPresentation.test.mjs
@@ -155,6 +155,7 @@ test("addresses the selected Agent by its display name in the composer", () => {
     /agentName=\{[\s\S]*?sandboxSession[\s\S]*?"AgentKit 沙箱"[\s\S]*?labelOf\(appName\)/,
   );
   assert.match(composerSource, /`向 \$\{agentName\} 发消息…`/);
+  assert.match(composerSource, /请在页面左上角选择智能体/);
   assert.doesNotMatch(composerSource, /给智能体发消息/);
 });
 
diff --git a/frontend/tests/newChatComposerLayout.test.mjs b/frontend/tests/newChatComposerLayout.test.mjs
index e00dbfc4..12d2a258 100644
--- a/frontend/tests/newChatComposerLayout.test.mjs
+++ b/frontend/tests/newChatComposerLayout.test.mjs
@@ -43,6 +43,8 @@ test("expands only the new-chat composer into a multiline input", () => {
     /newChatLayout=\{!sandboxSession && turns\.length === 0 && skillJob === null\}/,
   );
   assert.match(stylesSource, /\.composer--new-chat \.composer-box[\s\S]*?min-height:/);
+  assert.match(stylesSource, /\.composer--new-chat \.composer-box[\s\S]*?border-color:/);
+  assert.match(stylesSource, /\.composer--new-chat \.composer-box[\s\S]*?box-shadow:/);
   assert.match(stylesSource, /\.composer--new-chat \.comp-input[\s\S]*?min-height:/);
   assert.match(stylesSource, /\.composer--new-chat \.composer-menu-wrap[\s\S]*?bottom: 10px/);
   assert.match(stylesSource, /\.composer--new-chat \.comp-send[\s\S]*?bottom: 10px/);
@@ -83,10 +85,10 @@ test("places the mode selector beside add and moves Agent selection to the navba
   );
   assert.match(agentSelectorSource, /variant\?: "drawer" \| "navbar"/);
   assert.doesNotMatch(sidebarSource, /<AgentSelector|className=\{`agent-row/);
-  assert.match(stylesSource, /\.welcome\s*\{[\s\S]*?gap:\s*32px;/);
+  assert.match(stylesSource, /\.welcome\s*\{[\s\S]*?gap:\s*40px;/);
   assert.match(
     stylesSource,
-    /\.welcome\s*\{[\s\S]*?padding:\s*0 16px clamp\(64px, 12vh, 104px\);/,
+    /\.welcome\s*\{[\s\S]*?padding:\s*0 16px clamp\(96px, 18vh, 152px\);/,
   );
 });
 
@@ -111,7 +113,7 @@ test("shows animated starter prompts below the empty new-chat composer", () => {
   );
   assert.match(
     stylesSource,
-    /\.prompt-suggestions\s*\{[\s\S]*?position:\s*absolute;[\s\S]*?top:\s*calc\(100% \+ 12px\);/,
+    /\.prompt-suggestions\s*\{[\s\S]*?position:\s*absolute;[\s\S]*?top:\s*calc\(100% \+ 18px\);/,
   );
   assert.match(stylesSource, /@keyframes prompt-suggestion-enter/);
   assert.match(