fix(ui): panel toggle in header bar + message spacing

- Move side panel toggle from floating button to chat header right side
  (Trae Solo style) via new PanelToggleButton component
- Add px-6 py-4 padding to message list container
- Add mb-5 gap between messages for readable vertical spacing

desktop/src/components/ai/ResizableChatLayout.tsx

@@ -10,6 +10,9 @@ import { X, PanelRightOpen, PanelRightClose } from 'lucide-react';
  * - Right panel: Artifact/detail viewer (collapsible)
  * - Draggable resize handle between panels
  * - Persisted panel sizes via localStorage
+ *
+ * Side-panel toggle is injected into the chat header via `headerAction`
+ * so it sits cleanly in the top-right corner (Trae Solo style).
  */
 
 interface ResizableChatLayoutProps {
@@ -61,16 +64,10 @@ export function ResizableChatLayout({
   }, [rightPanelOpen, onRightPanelToggle]);
 
   if (!rightPanelOpen || !rightPanel) {
+    // Panel closed: just render chat panel, no floating button
     return (
-      <div className="h-full flex flex-col overflow-hidden relative">
+      <div className="h-full flex flex-col overflow-hidden">
         {chatPanel}
-        <button
-          onClick={handleToggle}
-          className="absolute top-20 right-4 z-10 p-1.5 rounded-md bg-white/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-white dark:hover:bg-gray-800 transition-colors shadow-sm"
-          title="打开侧面板"
-        >
-          <PanelRightOpen className="w-4 h-4" />
-        </button>
       </div>
     );
   }
@@ -87,15 +84,8 @@ export function ResizableChatLayout({
           defaultSize={sizes.left}
           minSize="40%"
         >
-          <div className="h-full flex flex-col relative">
+          <div className="h-full flex flex-col">
             {chatPanel}
-            <button
-              onClick={handleToggle}
-              className="absolute top-20 right-4 z-10 p-1.5 rounded-md bg-white/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-white dark:hover:bg-gray-800 transition-colors shadow-sm"
-              title="关闭侧面板"
-            >
-              <PanelRightClose className="w-4 h-4" />
-            </button>
           </div>
         </Panel>
 
@@ -134,3 +124,28 @@ export function ResizableChatLayout({
     </div>
   );
 }
+
+/**
+ * Toggle button for embedding in chat header.
+ * Renders PanelRightOpen/PanelRightClose icon — Trae Solo style.
+ */
+export function PanelToggleButton({
+  panelOpen,
+  onToggle,
+}: {
+  panelOpen: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      onClick={onToggle}
+      className="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      title={panelOpen ? '关闭侧面板' : '打开侧面板'}
+    >
+      {panelOpen
+        ? <PanelRightClose className="w-4 h-4" />
+        : <PanelRightOpen className="w-4 h-4" />
+      }
+    </button>
+  );
+}