fix(hub): improve mobile AI coach layout

Move new-chat button to top toolbar to prevent overlap, compact chrome, hide chrome when keyboard opens, and soften mobile tab styling.

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -3897,12 +3897,14 @@ body.hub-page-ai #page-ai {
     display: none;
   }
 
-  body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
+  body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs,
-    margin-bottom: 4px;
+  body.hub-page-ai.hub-ai-keyboard-open .ai-chat-topbar,
+  body.hub-page-ai.hub-ai-keyboard-open .ai-chat-session-head {
+    display: none;
   }
 
-  body.hub-page-ai.hub-ai-keyboard-open .ai-panel-head {
+  body.hub-page-ai.hub-ai-keyboard-open .ai-mobile-tabs {
-    padding-bottom: 0;
+    margin-bottom: 4px;
   }
 
   body.hub-page-ai #page-ai {
@@ -3937,7 +3939,11 @@ body.hub-page-ai #page-ai {
     color: var(--text);
     border-color: var(--accent);
     background: var(--accent-dim);
-    box-shadow: var(--glow);
+    box-shadow: none;
+  }
+
+  body.hub-page-ai #page-ai .page-desc {
+    display: none;
   }
 
   body.hub-page-ai .ai-layout {
@@ -3951,6 +3957,7 @@ body.hub-page-ai #page-ai {
     overflow: hidden;
   }
 
+  body.hub-page-ai .ai-layout[data-ai-mobile-tab="chat"] .ai-chat-panel,
   body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-panel {
     display: flex;
     flex: 1 1 auto;
@@ -3964,14 +3971,11 @@ body.hub-page-ai #page-ai {
     display: none !important;
   }
 
-  body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main {
+  body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-main,
+  body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-topbar {
     display: none !important;
   }
 
-  body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-bot-bar {
-    display: none;
-  }
-
   body.hub-page-ai .ai-layout[data-ai-mobile-tab="history"] .ai-chat-history-panel {
     display: flex;
     flex: 1 1 auto;
@@ -3985,6 +3989,8 @@ body.hub-page-ai #page-ai {
     max-width: 100%;
     min-width: 0;
     box-sizing: border-box;
+    padding: 8px 10px;
+    gap: 6px;
   }
 
   body.hub-page-ai .ai-chat-panel {
@@ -3992,12 +3998,62 @@ body.hub-page-ai #page-ai {
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    border: none;
+    background: transparent;
+  }
+
+  body.hub-page-ai .ai-chat-topbar {
+    gap: 6px;
+  }
+
+  body.hub-page-ai .ai-bot-tab {
+    min-height: 34px;
+    padding: 5px 8px;
+    font-size: 0.76rem;
+  }
+
+  body.hub-page-ai .ai-bot-tab.is-active {
+    box-shadow: none;
+  }
+
+  body.hub-page-ai .ai-chat-new-btn {
+    min-height: 34px;
+    padding: 5px 10px;
+    font-size: 0.76rem;
+  }
+
+  body.hub-page-ai .ai-chat-split {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  body.hub-page-ai .ai-chat-main {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  body.hub-page-ai .ai-chat-session-head {
+    margin: 0;
+    padding: 0 2px 4px;
+  }
+
+  body.hub-page-ai .ai-chat-session-head h2 {
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--muted);
+    letter-spacing: 0.02em;
   }
 
   body.hub-page-ai .ai-chat-messages {
     flex: 1 1 auto;
     min-height: 0;
-    padding-bottom: 8px;
+    padding: 4px 2px 8px;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
@@ -4008,43 +4064,76 @@ body.hub-page-ai #page-ai {
     z-index: 3;
     width: 100%;
     margin: 0;
-    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
+    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
     background: var(--panel);
     border-top: 1px solid var(--border-soft);
-    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.18);
+    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12);
+  }
+
+  body.hub-page-ai .ai-chat-compose {
+    gap: 6px;
   }
 
   body.hub-page-ai .ai-chat-form textarea {
-    min-height: 44px;
+    min-height: 40px;
-    max-height: 120px;
+    max-height: 96px;
     font-size: 16px;
     width: 100%;
+    padding: 8px 10px;
   }
 
   body.hub-page-ai .ai-chat-compose-actions {
-    display: grid;
+    display: flex;
-    grid-template-columns: auto 1fr auto;
     gap: 8px;
     align-items: center;
     width: 100%;
   }
 
+  body.hub-page-ai .ai-chat-files-label {
+    flex: 1;
+    min-width: 0;
+    font-size: 0.68rem;
+  }
+
+  body.hub-page-ai .ai-chat-files-label:empty {
+    display: none;
+  }
+
   body.hub-page-ai .ai-chat-upload-btn,
   body.hub-page-ai #btn-ai-chat-send {
-    min-height: 44px;
+    min-height: 40px;
+    flex-shrink: 0;
   }
 
   body.hub-page-ai #btn-ai-chat-send {
-    min-width: 76px;
+    min-width: 72px;
+    margin-left: auto;
     font-weight: 600;
   }
 
   body.hub-page-ai .ai-msg-row-user {
-    max-width: 92%;
+    max-width: 90%;
   }
 
   body.hub-page-ai .ai-msg-row-coach {
-    max-width: 96%;
+    max-width: 100%;
+  }
+
+  body.hub-page-ai .ai-bubble {
+    font-size: 0.86rem;
+    padding: 9px 11px;
+  }
+
+  body.hub-page-ai .ai-msg-role {
+    font-size: 0.68rem;
+  }
+
+  body.hub-page-ai .ai-chat-history-list {
+    padding: 6px 4px;
+  }
+
+  body.hub-page-ai .ai-chat-history-item {
+    padding: 10px 12px;
   }
 }
 
@@ -4324,11 +4413,34 @@ body.hub-page-ai #page-ai {
 .ai-chat-panel .ai-chat-split {
   flex: 1 1 auto;
 }
+.ai-chat-topbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.ai-chat-topbar .ai-bot-bar {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.ai-chat-new-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.ai-chat-session-head {
+  padding-bottom: 2px;
+}
+.ai-chat-session-head h2 {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .ai-bot-bar {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
-  padding-bottom: 2px;
+  padding-bottom: 0;
 }
 .ai-bot-tab {
   flex: 1;

manual_trading_hub/static/app.js

@@ -3314,8 +3314,16 @@
     const botMode = (session && session.bot_mode) || aiSelectedBotMode || "trading";
     if (title) {
       const modeLabel = botMode === "general" ? "普通聊天" : "交易教练";
-      title.textContent =
+      const sessionTitle = session && session.title ? String(session.title) : "";
-        session && session.title ? `${modeLabel} · ${session.title}` : modeLabel;
+      if (isMobileLayout()) {
+        title.textContent = sessionTitle && sessionTitle !== "新对话"
+          ? sessionTitle
+          : modeLabel;
+      } else {
+        title.textContent = sessionTitle
+          ? `${modeLabel} · ${sessionTitle}`
+          : modeLabel;
+      }
     }
     const showPlaceholder =
       !msgs.length && !options.pendingUser && !options.thinking;

manual_trading_hub/static/index.html

@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-  <link rel="stylesheet" href="/assets/app.css?v=20260609-hub-funds-fold" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260611-hub-ai-mobile" />
   <link rel="stylesheet" href="/assets/dashboard.css?v=20260611-hub-dash-sse" />
 </head>
 <body>
@@ -449,17 +449,17 @@
       </div>
       <div class="ai-layout" data-ai-mobile-tab="chat">
         <section class="ai-panel ai-chat-panel" data-ai-panel="chat">
-          <div class="ai-bot-bar" role="tablist" aria-label="聊天机器人">
+          <div class="ai-chat-topbar">
-            <button type="button" class="ai-bot-tab is-active" data-bot="trading" role="tab" aria-selected="true">交易教练</button>
+            <div class="ai-bot-bar" role="tablist" aria-label="聊天机器人">
-            <button type="button" class="ai-bot-tab" data-bot="general" role="tab" aria-selected="false">普通聊天</button>
+              <button type="button" class="ai-bot-tab is-active" data-bot="trading" role="tab" aria-selected="true">交易教练</button>
+              <button type="button" class="ai-bot-tab" data-bot="general" role="tab" aria-selected="false">普通聊天</button>
+            </div>
+            <button type="button" id="btn-ai-chat-new" class="primary ai-chat-new-btn">新开对话</button>
           </div>
           <div class="ai-chat-split">
             <div class="ai-chat-main">
-              <div class="ai-panel-head">
+              <div class="ai-panel-head ai-chat-session-head">
                 <h2 id="ai-chat-title">聊天</h2>
-                <div class="ai-panel-actions">
-                  <button type="button" id="btn-ai-chat-new" class="primary">新开对话</button>
-                </div>
               </div>
               <div id="ai-chat-messages" class="ai-panel-scroll ai-chat-messages" aria-live="polite"></div>
               <form id="ai-chat-form" class="ai-chat-form">
@@ -555,6 +555,6 @@
   <script src="/assets/funds.js?v=20260609-hub-funds-fold"></script>
   <script src="/assets/dashboard.js?v=20260611-hub-dash-sse"></script>
   <script src="/assets/ai_review_render.js?v=2"></script>
-  <script src="/assets/app.js?v=20260611-hub-nav-prefs"></script>
+  <script src="/assets/app.js?v=20260611-hub-ai-mobile"></script>
 </body>
 </html>