feat: simplify page ai drawer ui

rust/crates/mnote-web/src/ssr/pages/layout.rs

@@ -3634,15 +3634,18 @@ const SIDEBAR_TREE_JS: &str = r##"
       button.classList.toggle('is-active', active);
       button.setAttribute('aria-pressed', active ? 'true' : 'false');
     });
-    var subtitle = drawer.querySelector('.wolai-page-ai-subtitle');
-    if (subtitle instanceof HTMLElement) {
-      subtitle.textContent = '当前页面上下文优先 · ' + pageAiProviderLabel(pageUiState.pageAiProvider);
+    var providerNode = drawer.querySelector('.wolai-page-ai-subtitle span:first-child');
+    if (providerNode instanceof HTMLElement) {
+      providerNode.textContent = pageAiProviderLabel(pageUiState.pageAiProvider);
     }
   }
 
   function renderPageAiControls() {
     var drawer = ensurePageAiDrawer();
     var activeProfile = pageAiCurrentProfile();
+    drawer.setAttribute('data-page-ai-page', pageUiState.pageAiPage || 'chat');
+    var profileSummary = drawer.querySelector('[data-page-ai-profile-summary]');
+    if (profileSummary instanceof HTMLElement) profileSummary.textContent = activeProfile;
     var profileSelect = drawer.querySelector('[data-page-ai-profile-select]');
     if (profileSelect instanceof HTMLSelectElement) {
       var profiles = pageUiState.pageAiProfiles.length ? pageUiState.pageAiProfiles : [{ name: activeProfile, active: true }];
@@ -3696,8 +3699,10 @@ const SIDEBAR_TREE_JS: &str = r##"
     }
     var memoryError = drawer.querySelector('[data-page-ai-memory-error]');
     if (memoryError instanceof HTMLElement) {
-      memoryError.textContent = pageUiState.pageAiProfileMemoryError || '';
-      memoryError.hidden = !pageUiState.pageAiProfileMemoryError;
+      var memoryErrorText = pageUiState.pageAiProfileMemoryError || '';
+      if (memoryErrorText && memoryErrorText === pageUiState.pageAiProfileError) memoryErrorText = '';
+      memoryError.textContent = memoryErrorText;
+      memoryError.hidden = !memoryErrorText;
     }
     var agentPanel = drawer.querySelector('[data-page-ai-agent-panel]');
     if (agentPanel instanceof HTMLElement) {
@@ -3814,53 +3819,27 @@ const SIDEBAR_TREE_JS: &str = r##"
         '<div class="wolai-page-ai-header">' +
           '<div class="wolai-page-ai-header-copy">' +
             '<h2 class="wolai-page-ai-title" data-title="page-ai-title">页面 AI</h2>' +
-            '<div class="wolai-page-ai-subtitle">当前页面上下文优先 · Hermes</div>' +
+            '<div class="wolai-page-ai-subtitle">' +
+              '<span>Hermes</span>' +
+              '<span data-page-ai-profile-summary>default</span>' +
+              '<span data-page-ai-model-status>由 Hermes 决定</span>' +
+            '</div>' +
+          '</div>' +
+          '<div class="wolai-page-ai-header-actions">' +
+            '<button type="button" class="wolai-page-ai-icon" data-page-ai-tab="agent" aria-label="打开页面 AI 设置">⚙</button>' +
+            '<button type="button" class="wolai-page-ai-icon" data-page-ai-action="close" aria-label="关闭页面 AI">×</button>' +
           '</div>' +
-          '<button type="button" class="wolai-surface-close" data-page-ai-action="close" aria-label="关闭页面 AI">×</button>' +
         '</div>' +
-        '<div class="wolai-page-ai-statusbar">' +
-          '<div class="wolai-page-ai-statusitem">' +
-            '<span class="wolai-page-ai-statuslabel">会话</span>' +
-            '<span class="wolai-page-ai-statusvalue" data-page-ai-session-status>等待 Hermes session</span>' +
-          '</div>' +
-          '<div class="wolai-page-ai-statusitem">' +
-            '<span class="wolai-page-ai-statuslabel">状态</span>' +
-            '<span class="wolai-page-ai-statusvalue" data-page-ai-run-status>空闲</span>' +
-          '</div>' +
-          '<div class="wolai-page-ai-statusitem">' +
-            '<span class="wolai-page-ai-statuslabel">模型</span>' +
-            '<span class="wolai-page-ai-statusvalue" data-page-ai-model-status>由 Hermes 决定</span>' +
-          '</div>' +
-          '<div class="wolai-page-ai-statusitem">' +
-            '<span class="wolai-page-ai-statuslabel">上下文</span>' +
-            '<span class="wolai-page-ai-statusvalue" data-page-ai-context-scope-label>当前页</span>' +
-          '</div>' +
-          '<button type="button" class="wolai-page-ai-settings-link" data-page-ai-action="open-hermes-settings">Hermes 设置</button>' +
-        '</div>' +
-        '<div class="wolai-page-ai-topbar">' +
-          '<label class="wolai-page-ai-profile-select">' +
-            '<span>agent / profile</span>' +
-            '<select data-page-ai-profile-select></select>' +
-          '</label>' +
-          '<label class="wolai-page-ai-context-select">' +
-            '<span>上下文</span>' +
-            '<select data-page-ai-context-scope>' +
-              '<option value="page">当前页</option>' +
-              '<option value="selection">当前选区</option>' +
-              '<option value="block">当前块</option>' +
-              '<option value="options">页面设置</option>' +
-            '</select>' +
-          '</label>' +
-        '</div>' +
-        '<div class="wolai-page-ai-inline-error" data-page-ai-profile-error hidden></div>' +
         '<div class="wolai-page-ai-body">' +
-          '<div class="wolai-page-ai-tabs" role="tablist" aria-label="页面 AI 面板">' +
-            '<button type="button" class="wolai-page-ai-tab is-active" data-page-ai-tab="chat" role="tab" aria-selected="true">chat</button>' +
-            '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="agent" role="tab" aria-selected="false">agent</button>' +
-            '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="skills" role="tab" aria-selected="false">skills</button>' +
-            '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="history" role="tab" aria-selected="false">history</button>' +
-          '</div>' +
           '<section class="wolai-page-ai-panel-section" data-page-ai-panel="chat">' +
+            '<div class="wolai-page-ai-chat-meta">' +
+              '<button type="button" class="wolai-page-ai-session-button" data-page-ai-action="history">' +
+                '<span data-page-ai-session-status>等待 Hermes session</span>' +
+              '</button>' +
+              '<span data-page-ai-context-scope-label>当前页</span>' +
+              '<span data-page-ai-run-status>空闲</span>' +
+            '</div>' +
+            '<div class="wolai-page-ai-conversation" data-page-ai-conversation></div>' +
             '<div class="wolai-page-ai-suggestions">' +
               '<div class="wolai-page-ai-suggestions-header">' +
                 '<span>推荐问题</span>' +
@@ -3872,21 +3851,44 @@ const SIDEBAR_TREE_JS: &str = r##"
               '</div>' +
               '<div class="wolai-page-ai-suggestion-list" data-page-ai-suggestion-list></div>' +
             '</div>' +
-            '<div class="wolai-page-ai-tools-panel">' +
-              '<div class="wolai-page-ai-tools-head">' +
-                '<span>mnote tools</span>' +
-                '<span data-page-ai-last-tool>暂无 tool call</span>' +
-              '</div>' +
-              '<div class="wolai-page-ai-inline-error" data-page-ai-tool-error hidden></div>' +
-              '<div class="wolai-page-ai-tool-list" data-page-ai-tool-list></div>' +
-            '</div>' +
-            '<div class="wolai-page-ai-conversation" data-page-ai-conversation></div>' +
           '</section>' +
           '<section class="wolai-page-ai-panel-section" data-page-ai-panel="agent" hidden>' +
+            '<div class="wolai-page-ai-settings-head">' +
+              '<button type="button" class="wolai-page-ai-back" data-page-ai-tab="chat">← 聊天</button>' +
+              '<div class="wolai-page-ai-settings-tabs" role="tablist" aria-label="页面 AI 设置">' +
+                '<button type="button" class="wolai-page-ai-tab is-active" data-page-ai-tab="agent" role="tab" aria-selected="true">Agent</button>' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="skills" role="tab" aria-selected="false">Skills</button>' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="runtime" role="tab" aria-selected="false">Runtime</button>' +
+              '</div>' +
+            '</div>' +
+            '<div class="wolai-page-ai-settings-grid">' +
+              '<label class="wolai-page-ai-profile-select">' +
+                '<span>agent / profile</span>' +
+                '<select data-page-ai-profile-select></select>' +
+              '</label>' +
+              '<label class="wolai-page-ai-context-select">' +
+                '<span>上下文</span>' +
+                '<select data-page-ai-context-scope>' +
+                  '<option value="page">当前页</option>' +
+                  '<option value="selection">当前选区</option>' +
+                  '<option value="block">当前块</option>' +
+                  '<option value="options">页面设置</option>' +
+                '</select>' +
+              '</label>' +
+            '</div>' +
+            '<div class="wolai-page-ai-inline-error" data-page-ai-profile-error hidden></div>' +
             '<div class="wolai-page-ai-inline-error" data-page-ai-memory-error hidden></div>' +
             '<div class="wolai-page-ai-memory-grid" data-page-ai-agent-panel></div>' +
           '</section>' +
           '<section class="wolai-page-ai-panel-section" data-page-ai-panel="skills" hidden>' +
+            '<div class="wolai-page-ai-settings-head">' +
+              '<button type="button" class="wolai-page-ai-back" data-page-ai-tab="chat">← 聊天</button>' +
+              '<div class="wolai-page-ai-settings-tabs" role="tablist" aria-label="页面 AI 设置">' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="agent" role="tab" aria-selected="false">Agent</button>' +
+                '<button type="button" class="wolai-page-ai-tab is-active" data-page-ai-tab="skills" role="tab" aria-selected="true">Skills</button>' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="runtime" role="tab" aria-selected="false">Runtime</button>' +
+              '</div>' +
+            '</div>' +
             '<div class="wolai-page-ai-skills-toolbar">' +
               '<label class="wolai-page-ai-skill-search">' +
                 '<span>搜索技能</span>' +
@@ -3896,19 +3898,42 @@ const SIDEBAR_TREE_JS: &str = r##"
             '<div class="wolai-page-ai-inline-error" data-page-ai-skill-error hidden></div>' +
             '<div class="wolai-page-ai-skill-list" data-page-ai-skill-list></div>' +
           '</section>' +
+          '<section class="wolai-page-ai-panel-section" data-page-ai-panel="runtime" hidden>' +
+            '<div class="wolai-page-ai-settings-head">' +
+              '<button type="button" class="wolai-page-ai-back" data-page-ai-tab="chat">← 聊天</button>' +
+              '<div class="wolai-page-ai-settings-tabs" role="tablist" aria-label="页面 AI 设置">' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="agent" role="tab" aria-selected="false">Agent</button>' +
+                '<button type="button" class="wolai-page-ai-tab" data-page-ai-tab="skills" role="tab" aria-selected="false">Skills</button>' +
+                '<button type="button" class="wolai-page-ai-tab is-active" data-page-ai-tab="runtime" role="tab" aria-selected="true">Runtime</button>' +
+              '</div>' +
+            '</div>' +
+            '<button type="button" class="wolai-page-ai-settings-link" data-page-ai-action="open-hermes-settings">打开 Hermes 设置</button>' +
+            '<div class="wolai-page-ai-tools-panel">' +
+              '<div class="wolai-page-ai-tools-head">' +
+                '<span>mnote tools</span>' +
+                '<span data-page-ai-last-tool>暂无 tool call</span>' +
+              '</div>' +
+              '<div class="wolai-page-ai-inline-error" data-page-ai-tool-error hidden></div>' +
+              '<div class="wolai-page-ai-tool-list" data-page-ai-tool-list></div>' +
+            '</div>' +
+          '</section>' +
           '<section class="wolai-page-ai-panel-section" data-page-ai-panel="history" hidden>' +
+            '<div class="wolai-page-ai-settings-head">' +
+              '<button type="button" class="wolai-page-ai-back" data-page-ai-tab="chat">← 聊天</button>' +
+            '</div>' +
             '<div class="wolai-page-ai-conversation" data-page-ai-conversation></div>' +
           '</section>' +
         '</div>' +
         '<div class="wolai-page-ai-footer">' +
-          '<div class="wolai-page-ai-toolbar">' +
-            '<button type="button" class="wolai-page-ai-tab is-active" data-page-ai-action="new-session" aria-label="当前已是新会话">新会话</button>' +
-            '<button type="button" class="wolai-page-ai-tab" data-page-ai-action="history">历史会话</button>' +
-            '<button type="button" class="wolai-page-ai-tab" data-page-ai-action="stop-run" disabled>停止</button>' +
-          '</div>' +
-          '<div class="wolai-page-ai-input-row">' +
-            '<textarea class="wolai-page-ai-input" data-page-ai-input rows="3" placeholder="问我你想知道的"></textarea>' +
-            '<button type="button" class="wolai-page-ai-send" data-page-ai-action="send" aria-label="发送">↑</button>' +
+          '<div class="wolai-page-ai-composer">' +
+            '<textarea class="wolai-page-ai-input" data-page-ai-input rows="3" placeholder="问 Hermes…"></textarea>' +
+            '<div class="wolai-page-ai-composer-bar">' +
+              '<button type="button" class="wolai-page-ai-tool-button" data-page-ai-action="new-session" title="新会话">＋</button>' +
+              '<button type="button" class="wolai-page-ai-tool-button" data-page-ai-action="history" title="历史会话">⌕</button>' +
+              '<span class="wolai-page-ai-composer-spacer"></span>' +
+              '<button type="button" class="wolai-page-ai-stop" data-page-ai-action="stop-run" disabled>停止</button>' +
+              '<button type="button" class="wolai-page-ai-send" data-page-ai-action="send" aria-label="发送">发送</button>' +
+            '</div>' +
           '</div>' +
         '</div>' +
       '</div>';
@@ -3920,6 +3945,10 @@ const SIDEBAR_TREE_JS: &str = r##"
     var drawer = ensurePageAiDrawer();
     var list = drawer.querySelector('[data-page-ai-panel="chat"] [data-page-ai-suggestion-list]');
     if (!(list instanceof HTMLElement)) return;
+    var container = list.closest('.wolai-page-ai-suggestions');
+    if (container instanceof HTMLElement) {
+      container.hidden = pageUiState.pageAiPage !== 'chat' || pageUiState.pageAiMessages.length > 0;
+    }
     var suggestions = pageAiSuggestions();
     var offset = pageUiState.pageAiSuggestionIndex % suggestions.length;
     var ordered = suggestions.slice(offset).concat(suggestions.slice(0, offset)).slice(0, 3);
@@ -3930,6 +3959,7 @@ const SIDEBAR_TREE_JS: &str = r##"
 
   function renderPageAiConversation() {
     var drawer = ensurePageAiDrawer();
+    renderPageAiSuggestions();
     var conversation = drawer.querySelector('[data-page-ai-panel="' + cssEscape(pageUiState.pageAiPage || 'chat') + '"] [data-page-ai-conversation]');
     if (!(conversation instanceof HTMLElement)) return;
     if (pageUiState.pageAiPage === 'history') {