fix(hub): polish AI coach UI with PnL colors and chat roles

Equal-height summary/chat panels, colored closed/float PnL, owner/coach labels, and optimistic thinking state.

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

manual_trading_hub/static/app.css

@@ -3344,15 +3344,20 @@ html[data-theme="light"] button.danger {
 }
 
 /* --- Hub AI 教练 --- */
+#page-ai .page-head {
+  margin-bottom: 12px;
+}
 .ai-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
-  align-items: start;
+  align-items: stretch;
+  min-height: calc(100vh - 168px);
 }
 @media (max-width: 960px) {
   .ai-layout {
     grid-template-columns: 1fr;
+    min-height: 0;
   }
 }
 .ai-panel {
@@ -3360,17 +3365,20 @@ html[data-theme="light"] button.danger {
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
   padding: 14px 16px;
-  min-height: 420px;
+  min-height: 0;
+  height: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: hidden;
 }
 .ai-panel-head {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
+  flex-shrink: 0;
 }
 .ai-panel-head h2 {
   margin: 0;
@@ -3382,7 +3390,22 @@ html[data-theme="light"] button.danger {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
+  max-width: 100%;
+}
+.ai-meta-line {
+  max-width: min(420px, 100%);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.72rem;
+}
+.ai-panel-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
 }
 .ai-stats-row {
   display: flex;
@@ -3390,6 +3413,7 @@ html[data-theme="light"] button.danger {
   gap: 8px 14px;
   font-size: 0.82rem;
   color: var(--muted);
+  flex-shrink: 0;
 }
 .ai-stat-chip {
   padding: 4px 8px;
@@ -3401,10 +3425,22 @@ html[data-theme="light"] button.danger {
   color: var(--text);
   margin-right: 4px;
 }
+.ai-stat-chip.pos,
+.ai-stat-val.pos {
+  color: var(--green);
+  border-color: color-mix(in srgb, var(--green) 35%, transparent);
+}
+.ai-stat-chip.neg,
+.ai-stat-val.neg {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 35%, transparent);
+}
+.ai-stat-chip.pos strong,
+.ai-stat-chip.neg strong {
+  color: inherit;
+  opacity: 0.85;
+}
 .ai-md-body {
-  flex: 1;
-  overflow: auto;
-  max-height: min(62vh, 640px);
   padding: 12px;
   border-radius: 8px;
   background: var(--inset-surface);
@@ -3412,52 +3448,94 @@ html[data-theme="light"] button.danger {
   font-size: 0.86rem;
   line-height: 1.55;
   color: var(--text);
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 .ai-placeholder {
   color: var(--muted);
   margin: 0;
 }
-.ai-chat-panel {
-  min-height: 520px;
-}
 .ai-chat-messages {
-  flex: 1;
-  overflow: auto;
-  max-height: min(52vh, 520px);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
-  padding: 8px 4px;
+  padding: 8px 4px 4px;
+}
+.ai-msg-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 100%;
+}
+.ai-msg-row-user {
+  align-self: flex-end;
+  align-items: flex-end;
+  max-width: 88%;
+}
+.ai-msg-row-coach {
+  align-self: flex-start;
+  align-items: flex-start;
+  max-width: 92%;
+}
+.ai-msg-role {
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  padding: 0 4px;
+}
+.ai-msg-row-user .ai-msg-role {
+  color: var(--accent);
+}
+.ai-msg-row-coach .ai-msg-role {
+  color: var(--accent-2);
 }
 .ai-bubble {
-  max-width: 92%;
+  width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   font-size: 0.88rem;
   line-height: 1.5;
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
   word-break: break-word;
 }
 .ai-bubble-user {
-  align-self: flex-end;
   background: var(--accent-dim);
   border: 1px solid var(--border);
 }
 .ai-bubble-assistant {
-  align-self: flex-start;
   background: var(--inset-surface);
   border: 1px solid var(--border-soft);
 }
+.ai-bubble-thinking {
+  color: var(--muted);
+  font-style: italic;
+  animation: ai-think-pulse 1.2s ease-in-out infinite;
+}
+@keyframes ai-think-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+  }
+  50% {
+    opacity: 1;
+  }
+}
 .ai-chat-form {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 8px;
   align-items: end;
+  flex-shrink: 0;
+  padding-top: 4px;
+  border-top: 1px solid var(--border-soft);
 }
 .ai-chat-form textarea {
   width: 100%;
   resize: vertical;
   min-height: 72px;
+  max-height: 160px;
   padding: 10px 12px;
   border-radius: 8px;
   border: 1px solid var(--border-soft);
@@ -3470,4 +3548,7 @@ html[data-theme="light"] button.danger {
   outline: none;
   border-color: var(--accent);
 }
+.ai-chat-form textarea:disabled {
+  opacity: 0.65;
+}
 

manual_trading_hub/static/app.js

@@ -2941,14 +2941,29 @@
   let aiMeta = null;
   let aiSummaryLoading = false;
   let aiChatLoading = false;
+  let aiChatSessionCache = null;
+
+  function aiPnlClass(v) {
+    const n = Number(v);
+    if (!Number.isFinite(n) || Math.abs(n) < 1e-9) return "";
+    return n > 0 ? "pos" : "neg";
+  }
+
+  function aiPnlSigned(v, digits) {
+    const n = Number(v);
+    if (!Number.isFinite(n)) return "—";
+    const abs = fmt(Math.abs(n), digits);
+    if (Math.abs(n) < 1e-9) return `${abs}U`;
+    return `${n > 0 ? "+" : "-"}${abs}U`;
+  }
 
   function renderAiMarkdown(text) {
-    const esc = (s) =>
+    const escLocal = (s) =>
       String(s || "")
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
-    return esc(text)
+    return escLocal(text)
       .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
       .replace(/\n/g, "<br>");
   }
@@ -2961,17 +2976,33 @@
       return;
     }
     const t = snapshot.totals;
-    const pnl = Number(t.total_pnl_u);
+    const closedPnl = Number(t.total_pnl_u);
-    const pnlCls = pnl > 0 ? "pos" : pnl < 0 ? "neg" : "";
+    const floatPnl = Number(t.float_pnl_u);
+    const closedCls = aiPnlClass(closedPnl);
+    const floatCls = aiPnlClass(floatPnl);
     el.innerHTML = [
       `<span class="ai-stat-chip"><strong>交易日</strong>${esc(t.trading_day || "—")}</span>`,
-      `<span class="ai-stat-chip ${pnlCls}"><strong>平仓盈亏</strong>${fmt(pnl, 2)}U</span>`,
+      `<span class="ai-stat-chip ${closedCls}"><strong>平仓盈亏</strong><span class="ai-stat-val ${closedCls}">${aiPnlSigned(closedPnl, 2)}</span></span>`,
       `<span class="ai-stat-chip"><strong>笔数</strong>${t.closed_count || 0}（胜${t.win_count || 0}/负${t.loss_count || 0}）</span>`,
-      `<span class="ai-stat-chip"><strong>浮盈亏</strong>${fmt(Number(t.float_pnl_u), 2)}U</span>`,
+      `<span class="ai-stat-chip ${floatCls}"><strong>浮盈亏</strong><span class="ai-stat-val ${floatCls}">${aiPnlSigned(floatPnl, 2)}</span></span>`,
     ].join("");
   }
 
-  function renderAiChatMessages(session) {
+  function renderAiChatRow(role, content, extraClass) {
+    const isUser = role === "user";
+    const label = isUser ? "主人" : "AI教练";
+    const rowCls = isUser ? "ai-msg-row-user" : "ai-msg-row-coach";
+    const bubbleCls = isUser ? "ai-bubble-user" : "ai-bubble-assistant";
+    return (
+      `<div class="ai-msg-row ${rowCls}">` +
+      `<span class="ai-msg-role">${label}</span>` +
+      `<div class="ai-bubble ${bubbleCls}${extraClass ? " " + extraClass : ""}">${esc(content || "")}</div>` +
+      `</div>`
+    );
+  }
+
+  function renderAiChatMessages(session, opts) {
+    const options = opts || {};
     const box = document.getElementById("ai-chat-messages");
     const title = document.getElementById("ai-chat-title");
     if (!box) return;
@@ -2979,20 +3010,34 @@
     if (title) {
       title.textContent = session && session.title ? `聊天 · ${session.title}` : "聊天";
     }
-    if (!msgs.length) {
+    const showPlaceholder =
+      !msgs.length && !options.pendingUser && !options.thinking;
+    if (showPlaceholder) {
       box.innerHTML =
-        '<p class="ai-placeholder">随便聊：行情、心态、纪律、执行都行。我会先看四户监控数据，用搭档口吻回你。</p>';
+        '<p class="ai-placeholder">主人发消息会立刻出现在右侧；AI教练 会先显示「正在思考…」再回复。</p>';
       return;
     }
-    box.innerHTML = msgs
+    let html = msgs
-      .map((m) => {
+      .map((m) => renderAiChatRow(m.role === "user" ? "user" : "assistant", m.content || ""))
-        const role = m.role === "user" ? "user" : "assistant";
-        return `<div class="ai-bubble ai-bubble-${role}">${esc(m.content || "")}</div>`;
-      })
       .join("");
+    if (options.pendingUser) {
+      html += renderAiChatRow("user", options.pendingUser);
+    }
+    if (options.thinking) {
+      html += renderAiChatRow("assistant", "正在思考…", "ai-bubble-thinking");
+    }
+    box.innerHTML = html;
     box.scrollTop = box.scrollHeight;
   }
 
+  function setAiChatBusy(busy) {
+    aiChatLoading = !!busy;
+    const btn = document.getElementById("btn-ai-chat-send");
+    const input = document.getElementById("ai-chat-input");
+    if (btn) btn.disabled = busy;
+    if (input) input.disabled = busy;
+  }
+
   async function loadAiMeta() {
     const r = await apiFetch("/api/ai/meta");
     aiMeta = await r.json();
@@ -3026,7 +3071,8 @@
   async function loadAiChatSession() {
     const r = await apiFetch("/api/ai/chat/session");
     const j = await r.json();
-    renderAiChatMessages(j.session);
+    aiChatSessionCache = j.session || null;
+    renderAiChatMessages(aiChatSessionCache);
   }
 
   async function loadAiPage() {
@@ -3074,7 +3120,8 @@
         body: JSON.stringify({}),
       });
       const j = await r.json();
-      renderAiChatMessages(j.session);
+      aiChatSessionCache = j.session || null;
+      renderAiChatMessages(aiChatSessionCache);
       showToast("已开始新对话");
     } catch (e) {
       showToast(String(e), true);
@@ -3087,9 +3134,9 @@
     const input = document.getElementById("ai-chat-input");
     const text = (input && input.value || "").trim();
     if (!text) return;
-    aiChatLoading = true;
+    if (input) input.value = "";
-    const btn = document.getElementById("btn-ai-chat-send");
+    setAiChatBusy(true);
-    if (btn) btn.disabled = true;
+    renderAiChatMessages(aiChatSessionCache, { pendingUser: text, thinking: true });
     try {
       const r = await apiFetch("/api/ai/chat/send", {
         method: "POST",
@@ -3098,14 +3145,13 @@
       });
       const j = await r.json();
       if (!r.ok) throw new Error(j.detail || j.msg || "发送失败");
-      if (j.detail) throw new Error(j.detail);
+      aiChatSessionCache = j.session || null;
-      if (input) input.value = "";
+      renderAiChatMessages(aiChatSessionCache);
-      renderAiChatMessages(j.session);
     } catch (e) {
       showToast(String(e), true);
+      renderAiChatMessages(aiChatSessionCache);
     } finally {
-      aiChatLoading = false;
+      setAiChatBusy(false);
-      if (btn) btn.disabled = false;
     }
   }
 

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=20260606-hub-ai" />
+  <link rel="stylesheet" href="/assets/app.css?v=20260606-hub-ai2" />
 </head>
 <body>
   <div class="app-bg" aria-hidden="true"></div>
@@ -214,12 +214,12 @@
           <div class="ai-panel-head">
             <h2>今日总结</h2>
             <div class="ai-panel-actions">
-              <span id="ai-summary-meta" class="toolbar-meta"></span>
+              <span id="ai-summary-meta" class="toolbar-meta ai-meta-line"></span>
               <button type="button" id="btn-ai-summary" class="primary">生成今日总结</button>
             </div>
           </div>
           <div id="ai-summary-stats" class="ai-stats-row" aria-live="polite"></div>
-          <div id="ai-summary-body" class="ai-md-body">
+          <div id="ai-summary-body" class="ai-panel-scroll ai-md-body">
             <p class="ai-placeholder">点击「生成今日总结」聚合四户平仓与持仓数据（未启用账户显示「未监控」）。</p>
           </div>
         </section>
@@ -227,11 +227,11 @@
           <div class="ai-panel-head">
             <h2 id="ai-chat-title">聊天</h2>
             <div class="ai-panel-actions">
-              <span id="ai-chat-meta" class="toolbar-meta"></span>
+              <span id="ai-chat-meta" class="toolbar-meta ai-meta-line"></span>
               <button type="button" id="btn-ai-chat-new" class="ghost">新开对话</button>
             </div>
           </div>
-          <div id="ai-chat-messages" class="ai-chat-messages" aria-live="polite"></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">
             <textarea id="ai-chat-input" rows="3" placeholder="聊聊行情、心态、纪律、执行…" autocomplete="off"></textarea>
             <button type="submit" id="btn-ai-chat-send" class="primary">发送</button>
@@ -287,6 +287,6 @@
   <div id="toast"></div>
   <script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
   <script src="/assets/chart.js?v=20260604-upnl-contracts"></script>
-  <script src="/assets/app.js?v=20260606-hub-ai"></script>
+  <script src="/assets/app.js?v=20260606-hub-ai2"></script>
 </body>
 </html>