diff --git a/static/ui_manager.js b/static/js/ui_manager.js
similarity index 97%
rename from static/ui_manager.js
rename to static/js/ui_manager.js
index cd7422d..dcd6059 100644
--- a/static/ui_manager.js
+++ b/static/js/ui_manager.js
@@ -1,513 +1,513 @@
-// static/js/ui_manager.js
-
-// --- UI 元素选择器 ---
-let Elements = {}; // 初始化为空对象，稍后填充
-
-/* 初始化所有 UI 元素。
- * 在 DOMContentLoaded 事件之后调用此函数。
- */
-function initializeUIElements() {
-    Elements = {
-        // 导航
-        navItems: document.querySelectorAll('.nav-item'),
-        contentSections: document.querySelectorAll('.content-section'),
-        // 会话信息
-        currentRoleNameSpan: document.getElementById('current-role-name'),
-        currentRoleIdSpan: document.getElementById('current-role-id'),
-        currentMemoryNameSpan: document.getElementById('current-memory-name'),
-        currentMemoryIdSpan: document.getElementById('current-memory-id'),
-        currentTurnCounterSpan: document.getElementById('current-turn-counter'),
-        memoryUpdateStatusContainer: document.getElementById('memory-update-status'), // 新增：记忆更新状态容器
-        memoryUpdateStatusDot: document.querySelector('#memory-update-status .status-dot'),
-        memoryUpdateStatusText: document.querySelector('#memory-update-status .status-text'),
-        // 聊天
-        chatWindow: document.getElementById('chat-window'),
-        userInput: document.getElementById('user-input'),
-        sendBtn: document.getElementById('send-btn'),
-        clearChatHistoryBtn: document.getElementById('clear-chat-history-btn'),
-        toggleWidthBtn: document.getElementById('toggle-width-btn'),
-        // 配置
-        configForm: document.getElementById('config-form'),
-        saveConfigBtn: document.getElementById('save-config-btn'),
-        showApiKeyCheckbox: document.getElementById('show-api-key'),
-        geminiApiKeyInput: document.getElementById('gemini-api-key'),
-        defaultGeminiModelSelect: document.getElementById('default-gemini-model'),
-        memoryUpdateModelSelect: document.getElementById('memory-update-model'),
-        // 特征
-        refreshFeaturesBtn: document.getElementById('refresh-features-btn'),
-        saveFeaturesBtn: document.getElementById('save-features-btn'),
-        roleListDiv: document.getElementById('role-list'),
-        newRoleIdInput: document.getElementById('new-role-id'),
-        newRoleNameInput: document.getElementById('new-role-name'),
-        createRoleBtn: document.getElementById('create-role-btn'),
-        featuresContentTextarea: document.getElementById('features-content'),
-        // 记忆
-        refreshMemoryBtn: document.getElementById('refresh-memory-btn'),
-        saveMemoryBtn: document.getElementById('save-memory-btn'),
-        triggerMemoryUpdateBtn: document.getElementById('trigger-memory-update-btn'),
-        memoryListDiv: document.getElementById('memory-list'),
-        newMemoryIdInput: document.getElementById('new-memory-id'),
-        newMemoryNameInput: document.getElementById('new-memory-name'),
-        createMemoryBtn: document.getElementById('create-memory-btn'),
-        memoryContentTextarea: document.getElementById('memory-content'),
-        // 日志
-        refreshLogBtn: document.getElementById('refresh-log-btn'),
-        logContentPre: document.getElementById('log-content'),
-        // Toast 消息容器
-        toastContainer: document.getElementById('toast-container'),
-        // 模态框
-        modalOverlay: document.getElementById('modal-overlay'),
-        modalTitle: document.getElementById('modal-title'),
-        modalMessage: document.getElementById('modal-message'),
-        modalConfirmBtn: document.getElementById('modal-confirm-btn'),
-        modalCancelBtn: document.getElementById('modal-cancel-btn'),
-    };
-}
-
-// --- 通用 UI 工具函数 ---
-
-/* 切换显示内容区域。
- * @param { string } targetSectionId 要显示的内容区域ID。
- */
-function showSection(targetSectionId) {
-    Elements.contentSections.forEach(section => {
-        section.classList.remove('active');
-    });
-    document.getElementById(targetSectionId).classList.add('active');
-
-    Elements.navItems.forEach(item => {
-        item.classList.remove('active');
-        if (item.dataset.target === targetSectionId) {
-            item.classList.add('active');
-        }
-    });
-}
-
-/* 显示临时的消息提示。
- * @param { string } message 消息内容。
- * @param { string } type 消息类型 ('success', 'error', 'warning', 'info')。
- * @param { number } duration 消息显示时长（毫秒）。
- */
-function showToast(message, type = 'info', duration = 3000) {
-    if (!Elements.toastContainer) {
-        console.error('Toast 容器未找到！');
-        return;
-    }
-
-    const toast = document.createElement('div');
-    toast.classList.add('toast', type);
-
-    // 创建图标元素
-    const iconElement = document.createElement('i');
-    // 根据类型添加 Font Awesome 图标类
-    switch (type) {
-        case 'success':
-            iconElement.classList.add('fas', 'fa-check-circle');
-            break;
-        case 'error':
-            iconElement.classList.add('fas', 'fa-times-circle');
-            break;
-        case 'warning':
-            iconElement.classList.add('fas', 'fa-exclamation-triangle');
-            break;
-        case 'info':
-        default:
-            iconElement.classList.add('fas', 'fa-info-circle');
-            break;
-    }
-    toast.appendChild(iconElement);
-
-    // 创建文本内容元素
-    const textSpan = document.createElement('span');
-    textSpan.textContent = message;
-    toast.appendChild(textSpan);
-
-    Elements.toastContainer.appendChild(toast);
-
-    // 移除 toast，与 CSS 动画时间保持一致
-    setTimeout(() => {
-        toast.remove();
-    }, duration);
-}
-
-/* 显示一个确认模态框。
- * @param {string} title - 模态框标题。
- * @param {string} message - 模态框消息内容。
- * @param {Function} onConfirm - 用户点击确认按钮时的回调函数。
- * @param {Function} [onCancel] - 用户点击取消按钮或关闭模态框时的回调函数。
- */
-function showModal(title, message, onConfirm, onCancel) {
-    Elements.modalTitle.textContent = title;
-    Elements.modalMessage.textContent = message;
-    Elements.modalOverlay.classList.add('active');
-
-    // 清除之前的事件监听器
-    Elements.modalConfirmBtn.onclick = null;
-    Elements.modalCancelBtn.onclick = null;
-    Elements.modalOverlay.onclick = null; // 点击背景关闭
-
-    Elements.modalConfirmBtn.onclick = () => {
-        Elements.modalOverlay.classList.remove('active');
-        onConfirm();
-    };
-
-    Elements.modalCancelBtn.onclick = () => {
-        Elements.modalOverlay.classList.remove('active');
-        if (onCancel) {
-            onCancel();
-        }
-    };
-
-    Elements.modalOverlay.onclick = (e) => {
-        if (e.target === Elements.modalOverlay) {
-            Elements.modalOverlay.classList.remove('active');
-            if (onCancel) {
-                onCancel();
-            }
-        }
-    };
-}
-
-/* 禁用 / 启用按钮或输入框。
- * @param { HTMLElement } element 要操作的DOM元素。
- * @param { boolean } isDisabled 是否禁用。
- */
-function toggleLoadingState(element, isDisabled) {
-    if (element) {
-        element.disabled = isDisabled;
-        element.classList.toggle('loading', isDisabled); // 添加/移除一个loading class用于样式
-    }
-}
-
-/* 更新侧边栏会话信息。
- * @param { Object } sessionInfo 当前会话信息，包含role_id, memory_id, turn_counter等。
- * @param { Object } roles 角色列表，用于查找角色名称。
- * @param { Object } memories 记忆集列表，用于查找记忆名称。
- */
-function updateSessionInfo(sessionInfo, roles = [], memories = []) {
-    Elements.currentRoleIdSpan.textContent = sessionInfo.role_id;
-    Elements.currentMemoryIdSpan.textContent = sessionInfo.memory_id;
-    Elements.currentTurnCounterSpan.textContent = sessionInfo.turn_counter;
-
-    const roleName = roles.find(r => r.id === sessionInfo.role_id)?.name || '未知角色';
-    const memoryName = memories.find(m => m.id === sessionInfo.memory_id)?.name || '未知记忆集';
-    Elements.currentRoleNameSpan.textContent = roleName;
-    Elements.currentMemoryNameSpan.textContent = memoryName;
-
-    // 根据会话状态设置记忆更新状态
-    setMemoryUpdateStatus(sessionInfo.memory_status);
-}
-
-/* 更新记忆更新状态指示器。
- * @param { string } status 记忆更新状态 ('idle', 'updating', 'success', 'error')。
- */
-function setMemoryUpdateStatus(status) {
-    const container = Elements.memoryUpdateStatusContainer;
-    const dot = Elements.memoryUpdateStatusDot;
-    const text = Elements.memoryUpdateStatusText;
-
-    // 移除所有状态类
-    dot.classList.remove('updating', 'success', 'error');
-
-    switch (status) {
-        case 'updating':
-            container.style.display = 'flex';
-            dot.classList.add('updating');
-            text.textContent = '记忆整理中...';
-            break;
-        case 'success':
-            container.style.display = 'flex';
-            dot.classList.add('success');
-            text.textContent = '记忆更新成功';
-            break;
-        case 'error':
-            container.style.display = 'flex';
-            dot.classList.add('error');
-            text.textContent = '记忆更新失败';
-            break;
-        case 'idle':
-        default:
-            container.style.display = 'none'; // 默认隐藏
-            text.textContent = '记忆就绪'; // 保持默认文本，虽然不显示
-            break;
-    }
-}
-
-
-// --- 聊天区 UI 函数 ---
-
-/* 在聊天窗口添加消息。
- * @param { string } sender 'user' 或 'bot'。
- * @param { string } content 消息内容。
- * @param { string } timestamp 消息时间戳。
- * @param { string } [id] 消息的唯一ID，用于后续更新。
- */
-function addChatMessage(sender, content, timestamp, id = null) {
-    const messageElement = document.createElement('div');
-    messageElement.classList.add('chat-message', sender);
-    // 确保 messageElement 始终有一个 ID，即使没有显式传入
-    messageElement.dataset.messageId = id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-    const avatar = document.createElement('div');
-    avatar.classList.add('message-avatar');
-    avatar.textContent = sender === 'user' ? 'U' : 'B'; // 用户头像显示 'U', 机器人头像显示 'B'
-
-    const messageContentWrapper = document.createElement('div');
-    messageContentWrapper.classList.add('message-content-wrapper');
-
-    const messageBubble = document.createElement('div');
-    messageBubble.classList.add('message-bubble');
-    messageBubble.innerHTML = DOMPurify.sanitize(marked.parse(content));
-
-    const messageTimestamp = document.createElement('div');
-    messageTimestamp.classList.add('message-timestamp');
-    messageTimestamp.textContent = new Date(timestamp).toLocaleString(); // 格式化时间戳
-
-    messageContentWrapper.appendChild(messageBubble);
-    messageContentWrapper.appendChild(messageTimestamp);
-
-    // 总是在正确的位置添加头像和内容
-    if (sender === 'user') {
-        messageElement.appendChild(messageContentWrapper);
-        messageElement.appendChild(avatar);
-    } else {
-        messageElement.appendChild(avatar);
-        messageElement.appendChild(messageContentWrapper);
-    }
-
-    Elements.chatWindow.appendChild(messageElement);
-    Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight; // 滚动到底部
-}
-
-/* 渲染聊天历史记录。
- * @param { Array < Object >} messages 聊天消息数组。
- */
-function renderChatHistory(messages) {
-    Elements.chatWindow.innerHTML = ''; // 清空现有内容
-    messages.forEach(msg => {
-        // addChatMessage 函数现在会处理 ID 的生成，所以这里直接传递 msg.id
-        addChatMessage(msg.role, msg.content, msg.timestamp, msg.id);
-    });
-}
-
-/* 更新单条聊天消息的内容。
- * @param { string } messageId 消息的唯一ID。
- * @param { string } newContent 新的消息内容。
- */
-function updateChatMessageContent(messageId, newContent) {
-    console.log(`尝试更新消息ID: ${messageId}`);
-    const messageElement = Elements.chatWindow.querySelector(`.chat-message[data-message-id="${messageId}"]`);
-    if (messageElement) {
-        console.log(`找到消息元素，ID: ${messageId}`);
-        const messageBubble = messageElement.querySelector('.message-bubble');
-        if (messageBubble) {
-            console.log(`找到消息气泡，更新内容 for ID: ${messageId}`);
-            messageBubble.innerHTML = DOMPurify.sanitize(marked.parse(newContent));
-
-            // 强制重绘和重排
-            messageElement.style.opacity = "0.99";
-            setTimeout(() => {
-                messageElement.style.opacity = "1";
-                // 确保滚动到底部
-                Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight;
-            }, 10);
-
-            // 在动画帧中重新计算布局和滚动
-            requestAnimationFrame(() => {
-                Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight;
-            });
-        } else {
-            console.warn(`未找到 messageId 为 "${messageId}" 的消息气泡。`);
-        }
-    } else {
-        console.warn(`未找到 messageId 为 "${messageId}" 的聊天消息元素。`);
-    }
-}
-
-// --- 配置区 UI 函数 ---
-
-/* 渲染配置表单。
- * @param { Object } configData 配置数据。
- */
-function renderConfigForm(configData) {
-    const apiConfig = configData.API || {};
-    const appConfig = configData.Application || {};
-
-    document.getElementById('gemini-api-base-url').value = apiConfig.GEMINI_API_BASE_URL || '';
-    const geminiApiKeyInput = Elements.geminiApiKeyInput;
-    const showApiKeyCheckbox = Elements.showApiKeyCheckbox;
-
-    // 根据用户要求，始终显示完整的API Key
-    geminiApiKeyInput.value = apiConfig.GEMINI_API_KEY || '';
-
-    // 初始时，API Key输入框应为文本类型，且“显示API Key”复选框选中，以始终显示完整的API Key
-    geminiApiKeyInput.type = 'text';
-    showApiKeyCheckbox.checked = true;
-    document.getElementById('context-window-size').value = appConfig.CONTEXT_WINDOW_SIZE || '';
-    document.getElementById('memory-retention-turns').value = appConfig.MEMORY_RETENTION_TURNS || '';
-    document.getElementById('max-short-term-events').value = appConfig.MAX_SHORT_TERM_EVENTS || '';
-}
-
-/* 填充模型选择下拉框。
- * @param { Array < string >} models 模型名称列表。
- * @param { string } selectedDefault 默认选中的对话模型。
- * @param { string } selectedMemory 默认选中的记忆模型。
- */
-function populateModelSelects(models, selectedDefault, selectedMemory) {
-    Elements.defaultGeminiModelSelect.innerHTML = '<option value="">请选择</option>';
-    Elements.memoryUpdateModelSelect.innerHTML = '<option value="">请选择</option>';
-
-    models.forEach(model => {
-        // 只显示模型名称的最后一部分（/之后的部分）
-        const displayName = model.split('/').pop();
-
-        const optionDefault = document.createElement('option');
-        optionDefault.value = model;
-        optionDefault.textContent = displayName;
-        Elements.defaultGeminiModelSelect.appendChild(optionDefault);
-
-        const optionMemory = document.createElement('option');
-        optionMemory.value = model;
-        optionMemory.textContent = displayName;
-        Elements.memoryUpdateModelSelect.appendChild(optionMemory);
-    });
-
-    // 确保正确选中默认模型
-    if (selectedDefault) {
-        const defaultOption = Elements.defaultGeminiModelSelect.querySelector(`option[value="${selectedDefault}"]`);
-        if (defaultOption) {
-            defaultOption.selected = true;
-        }
-    }
-
-    // 确保正确选中记忆更新模型
-    if (selectedMemory) {
-        const memoryOption = Elements.memoryUpdateModelSelect.querySelector(`option[value="${selectedMemory}"]`);
-        if (memoryOption) {
-            memoryOption.selected = true;
-        }
-    }
-}
-
-
-// --- 特征区 UI 函数 ---
-
-/* 渲染角色列表。
- * @param { Array < Object >} roles 角色对象数组。
- * @param { string } currentActiveRoleId 当前活跃角色ID。
- * @param { Function } onSwitchRole 点击切换角色的回调函数。
- * @param { Function } onDeleteRole 点击删除角色的回调函数。
- */
-function renderRoleList(roles, currentActiveRoleId, onSwitchRole, onDeleteRole) {
-    Elements.roleListDiv.innerHTML = '';
-    roles.forEach(role => {
-        const roleItem = document.createElement('div');
-        roleItem.classList.add('role-item');
-        if (role.id === currentActiveRoleId) {
-            roleItem.classList.add('active-item');
-        }
-        roleItem.innerHTML = `
-            <span>${role.name} (${role.id})</span>
-            <button class="delete-btn" data-role-id="${role.id}" title="删除角色">
-                <i class="fas fa-times"></i>
-            </button>
-        `;
-        roleItem.querySelector('span').addEventListener('click', () => onSwitchRole(role.id));
-        roleItem.querySelector('.delete-btn').addEventListener('click', (e) => {
-            e.stopPropagation(); // 阻止事件冒泡到父级的点击事件
-            onDeleteRole(role.id);
-        });
-        Elements.roleListDiv.appendChild(roleItem);
-    });
-}
-
-/* 渲染特征内容。
- * @param { Object } featuresContent 特征JSON对象。
- */
-function renderFeaturesContent(featuresContent) {
-    Elements.featuresContentTextarea.value = JSON.stringify(featuresContent, null, 2);
-}
-
-// --- 记忆区 UI 函数 ---
-
-/* 渲染记忆集列表。
- * @param { Array < Object >} memories 记忆集对象数组。
- * @param { string } currentActiveMemoryId 当前活跃记忆集ID。
- * @param { Function } onSwitchMemory 点击切换记忆集的回调函数。
- * @param { Function } onDeleteMemory 点击删除记忆集的回调函数。
- */
-function renderMemoryList(memories, currentActiveMemoryId, onSwitchMemory, onDeleteMemory) {
-    Elements.memoryListDiv.innerHTML = '';
-    memories.forEach(memory => {
-        const memoryItem = document.createElement('div');
-        memoryItem.classList.add('memory-item');
-        if (memory.id === currentActiveMemoryId) {
-            memoryItem.classList.add('active-item');
-        }
-        memoryItem.innerHTML = `
-            <span>${memory.name} (${memory.id})</span>
-            <button class="delete-btn" data-memory-id="${memory.id}" title="删除记忆集">
-                <i class="fas fa-times"></i>
-            </button>
-        `;
-        memoryItem.querySelector('span').addEventListener('click', () => onSwitchMemory(memory.id));
-        memoryItem.querySelector('.delete-btn').addEventListener('click', (e) => {
-            e.stopPropagation(); // 阻止事件冒泡到父级的点击事件
-            onDeleteMemory(memory.id);
-        });
-        Elements.memoryListDiv.appendChild(memoryItem);
-    });
-}
-
-/* 渲染记忆内容。
- * @param { Object } memoryContent 记忆JSON对象。
- */
-function renderMemoryContent(memoryContent) {
-    Elements.memoryContentTextarea.value = JSON.stringify(memoryContent, null, 2);
-}
-
-
-// --- 日志区 UI 函数 ---
-
-/* 渲染日志内容。
- * @param { string } logContent 日志文本。
- */
-function renderLogContent(logContent) {
-    Elements.logContentPre.textContent = logContent;
-    Elements.logContentPre.scrollTop = Elements.logContentPre.scrollHeight; // 滚动到底部
-}
-
-/* 从聊天窗口移除单条消息。
- * @param { string } messageId 消息的唯一ID。
- */
-function removeChatMessage(messageId) {
-    const messageElement = Elements.chatWindow.querySelector(`.chat-message[data-message-id="${messageId}"]`);
-    if (messageElement) {
-        messageElement.remove();
-    } else {
-        console.warn(`未找到 messageId 为 "${messageId}" 的聊天消息元素，无法移除。`);
-    }
-}
-
-// 导出所有需要被 app.js 调用的函数和 Elements
-export {
-    Elements,
-    initializeUIElements, // 导出初始化函数
-    showSection,
-    showToast,
-    showModal,
-    toggleLoadingState,
-    updateSessionInfo,
-    setMemoryUpdateStatus,
-    addChatMessage,
-    renderChatHistory,
-    updateChatMessageContent, // 确保这个函数也被导出
-    removeChatMessage, // 新增：导出移除消息函数
-    renderConfigForm,
-    populateModelSelects,
-    renderRoleList,
-    renderFeaturesContent,
-    renderMemoryList,
-    renderMemoryContent,
-    renderLogContent,
-};
+// static/js/ui_manager.js
+
+// --- UI 元素选择器 ---
+let Elements = {}; // 初始化为空对象，稍后填充
+
+/* 初始化所有 UI 元素。
+ * 在 DOMContentLoaded 事件之后调用此函数。
+ */
+function initializeUIElements() {
+    Elements = {
+        // 导航
+        navItems: document.querySelectorAll('.nav-item'),
+        contentSections: document.querySelectorAll('.content-section'),
+        // 会话信息
+        currentRoleNameSpan: document.getElementById('current-role-name'),
+        currentRoleIdSpan: document.getElementById('current-role-id'),
+        currentMemoryNameSpan: document.getElementById('current-memory-name'),
+        currentMemoryIdSpan: document.getElementById('current-memory-id'),
+        currentTurnCounterSpan: document.getElementById('current-turn-counter'),
+        memoryUpdateStatusContainer: document.getElementById('memory-update-status'), // 新增：记忆更新状态容器
+        memoryUpdateStatusDot: document.querySelector('#memory-update-status .status-dot'),
+        memoryUpdateStatusText: document.querySelector('#memory-update-status .status-text'),
+        // 聊天
+        chatWindow: document.getElementById('chat-window'),
+        userInput: document.getElementById('user-input'),
+        sendBtn: document.getElementById('send-btn'),
+        clearChatHistoryBtn: document.getElementById('clear-chat-history-btn'),
+        toggleWidthBtn: document.getElementById('toggle-width-btn'),
+        // 配置
+        configForm: document.getElementById('config-form'),
+        saveConfigBtn: document.getElementById('save-config-btn'),
+        showApiKeyCheckbox: document.getElementById('show-api-key'),
+        geminiApiKeyInput: document.getElementById('gemini-api-key'),
+        defaultGeminiModelSelect: document.getElementById('default-gemini-model'),
+        memoryUpdateModelSelect: document.getElementById('memory-update-model'),
+        // 特征
+        refreshFeaturesBtn: document.getElementById('refresh-features-btn'),
+        saveFeaturesBtn: document.getElementById('save-features-btn'),
+        roleListDiv: document.getElementById('role-list'),
+        newRoleIdInput: document.getElementById('new-role-id'),
+        newRoleNameInput: document.getElementById('new-role-name'),
+        createRoleBtn: document.getElementById('create-role-btn'),
+        featuresContentTextarea: document.getElementById('features-content'),
+        // 记忆
+        refreshMemoryBtn: document.getElementById('refresh-memory-btn'),
+        saveMemoryBtn: document.getElementById('save-memory-btn'),
+        triggerMemoryUpdateBtn: document.getElementById('trigger-memory-update-btn'),
+        memoryListDiv: document.getElementById('memory-list'),
+        newMemoryIdInput: document.getElementById('new-memory-id'),
+        newMemoryNameInput: document.getElementById('new-memory-name'),
+        createMemoryBtn: document.getElementById('create-memory-btn'),
+        memoryContentTextarea: document.getElementById('memory-content'),
+        // 日志
+        refreshLogBtn: document.getElementById('refresh-log-btn'),
+        logContentPre: document.getElementById('log-content'),
+        // Toast 消息容器
+        toastContainer: document.getElementById('toast-container'),
+        // 模态框
+        modalOverlay: document.getElementById('modal-overlay'),
+        modalTitle: document.getElementById('modal-title'),
+        modalMessage: document.getElementById('modal-message'),
+        modalConfirmBtn: document.getElementById('modal-confirm-btn'),
+        modalCancelBtn: document.getElementById('modal-cancel-btn'),
+    };
+}
+
+// --- 通用 UI 工具函数 ---
+
+/* 切换显示内容区域。
+ * @param { string } targetSectionId 要显示的内容区域ID。
+ */
+function showSection(targetSectionId) {
+    Elements.contentSections.forEach(section => {
+        section.classList.remove('active');
+    });
+    document.getElementById(targetSectionId).classList.add('active');
+
+    Elements.navItems.forEach(item => {
+        item.classList.remove('active');
+        if (item.dataset.target === targetSectionId) {
+            item.classList.add('active');
+        }
+    });
+}
+
+/* 显示临时的消息提示。
+ * @param { string } message 消息内容。
+ * @param { string } type 消息类型 ('success', 'error', 'warning', 'info')。
+ * @param { number } duration 消息显示时长（毫秒）。
+ */
+function showToast(message, type = 'info', duration = 3000) {
+    if (!Elements.toastContainer) {
+        console.error('Toast 容器未找到！');
+        return;
+    }
+
+    const toast = document.createElement('div');
+    toast.classList.add('toast', type);
+
+    // 创建图标元素
+    const iconElement = document.createElement('i');
+    // 根据类型添加 Font Awesome 图标类
+    switch (type) {
+        case 'success':
+            iconElement.classList.add('fas', 'fa-check-circle');
+            break;
+        case 'error':
+            iconElement.classList.add('fas', 'fa-times-circle');
+            break;
+        case 'warning':
+            iconElement.classList.add('fas', 'fa-exclamation-triangle');
+            break;
+        case 'info':
+        default:
+            iconElement.classList.add('fas', 'fa-info-circle');
+            break;
+    }
+    toast.appendChild(iconElement);
+
+    // 创建文本内容元素
+    const textSpan = document.createElement('span');
+    textSpan.textContent = message;
+    toast.appendChild(textSpan);
+
+    Elements.toastContainer.appendChild(toast);
+
+    // 移除 toast，与 CSS 动画时间保持一致
+    setTimeout(() => {
+        toast.remove();
+    }, duration);
+}
+
+/* 显示一个确认模态框。
+ * @param {string} title - 模态框标题。
+ * @param {string} message - 模态框消息内容。
+ * @param {Function} onConfirm - 用户点击确认按钮时的回调函数。
+ * @param {Function} [onCancel] - 用户点击取消按钮或关闭模态框时的回调函数。
+ */
+function showModal(title, message, onConfirm, onCancel) {
+    Elements.modalTitle.textContent = title;
+    Elements.modalMessage.textContent = message;
+    Elements.modalOverlay.classList.add('active');
+
+    // 清除之前的事件监听器
+    Elements.modalConfirmBtn.onclick = null;
+    Elements.modalCancelBtn.onclick = null;
+    Elements.modalOverlay.onclick = null; // 点击背景关闭
+
+    Elements.modalConfirmBtn.onclick = () => {
+        Elements.modalOverlay.classList.remove('active');
+        onConfirm();
+    };
+
+    Elements.modalCancelBtn.onclick = () => {
+        Elements.modalOverlay.classList.remove('active');
+        if (onCancel) {
+            onCancel();
+        }
+    };
+
+    Elements.modalOverlay.onclick = (e) => {
+        if (e.target === Elements.modalOverlay) {
+            Elements.modalOverlay.classList.remove('active');
+            if (onCancel) {
+                onCancel();
+            }
+        }
+    };
+}
+
+/* 禁用 / 启用按钮或输入框。
+ * @param { HTMLElement } element 要操作的DOM元素。
+ * @param { boolean } isDisabled 是否禁用。
+ */
+function toggleLoadingState(element, isDisabled) {
+    if (element) {
+        element.disabled = isDisabled;
+        element.classList.toggle('loading', isDisabled); // 添加/移除一个loading class用于样式
+    }
+}
+
+/* 更新侧边栏会话信息。
+ * @param { Object } sessionInfo 当前会话信息，包含role_id, memory_id, turn_counter等。
+ * @param { Object } roles 角色列表，用于查找角色名称。
+ * @param { Object } memories 记忆集列表，用于查找记忆名称。
+ */
+function updateSessionInfo(sessionInfo, roles = [], memories = []) {
+    Elements.currentRoleIdSpan.textContent = sessionInfo.role_id;
+    Elements.currentMemoryIdSpan.textContent = sessionInfo.memory_id;
+    Elements.currentTurnCounterSpan.textContent = sessionInfo.turn_counter;
+
+    const roleName = roles.find(r => r.id === sessionInfo.role_id)?.name || '未知角色';
+    const memoryName = memories.find(m => m.id === sessionInfo.memory_id)?.name || '未知记忆集';
+    Elements.currentRoleNameSpan.textContent = roleName;
+    Elements.currentMemoryNameSpan.textContent = memoryName;
+
+    // 根据会话状态设置记忆更新状态
+    setMemoryUpdateStatus(sessionInfo.memory_status);
+}
+
+/* 更新记忆更新状态指示器。
+ * @param { string } status 记忆更新状态 ('idle', 'updating', 'success', 'error')。
+ */
+function setMemoryUpdateStatus(status) {
+    const container = Elements.memoryUpdateStatusContainer;
+    const dot = Elements.memoryUpdateStatusDot;
+    const text = Elements.memoryUpdateStatusText;
+
+    // 移除所有状态类
+    dot.classList.remove('updating', 'success', 'error');
+
+    switch (status) {
+        case 'updating':
+            container.style.display = 'flex';
+            dot.classList.add('updating');
+            text.textContent = '记忆整理中...';
+            break;
+        case 'success':
+            container.style.display = 'flex';
+            dot.classList.add('success');
+            text.textContent = '记忆更新成功';
+            break;
+        case 'error':
+            container.style.display = 'flex';
+            dot.classList.add('error');
+            text.textContent = '记忆更新失败';
+            break;
+        case 'idle':
+        default:
+            container.style.display = 'none'; // 默认隐藏
+            text.textContent = '记忆就绪'; // 保持默认文本，虽然不显示
+            break;
+    }
+}
+
+
+// --- 聊天区 UI 函数 ---
+
+/* 在聊天窗口添加消息。
+ * @param { string } sender 'user' 或 'bot'。
+ * @param { string } content 消息内容。
+ * @param { string } timestamp 消息时间戳。
+ * @param { string } [id] 消息的唯一ID，用于后续更新。
+ */
+function addChatMessage(sender, content, timestamp, id = null) {
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('chat-message', sender);
+    // 确保 messageElement 始终有一个 ID，即使没有显式传入
+    messageElement.dataset.messageId = id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+    const avatar = document.createElement('div');
+    avatar.classList.add('message-avatar');
+    avatar.textContent = sender === 'user' ? 'U' : 'B'; // 用户头像显示 'U', 机器人头像显示 'B'
+
+    const messageContentWrapper = document.createElement('div');
+    messageContentWrapper.classList.add('message-content-wrapper');
+
+    const messageBubble = document.createElement('div');
+    messageBubble.classList.add('message-bubble');
+    messageBubble.innerHTML = DOMPurify.sanitize(marked.parse(content));
+
+    const messageTimestamp = document.createElement('div');
+    messageTimestamp.classList.add('message-timestamp');
+    messageTimestamp.textContent = new Date(timestamp).toLocaleString(); // 格式化时间戳
+
+    messageContentWrapper.appendChild(messageBubble);
+    messageContentWrapper.appendChild(messageTimestamp);
+
+    // 总是在正确的位置添加头像和内容
+    if (sender === 'user') {
+        messageElement.appendChild(messageContentWrapper);
+        messageElement.appendChild(avatar);
+    } else {
+        messageElement.appendChild(avatar);
+        messageElement.appendChild(messageContentWrapper);
+    }
+
+    Elements.chatWindow.appendChild(messageElement);
+    Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight; // 滚动到底部
+}
+
+/* 渲染聊天历史记录。
+ * @param { Array < Object >} messages 聊天消息数组。
+ */
+function renderChatHistory(messages) {
+    Elements.chatWindow.innerHTML = ''; // 清空现有内容
+    messages.forEach(msg => {
+        // addChatMessage 函数现在会处理 ID 的生成，所以这里直接传递 msg.id
+        addChatMessage(msg.role, msg.content, msg.timestamp, msg.id);
+    });
+}
+
+/* 更新单条聊天消息的内容。
+ * @param { string } messageId 消息的唯一ID。
+ * @param { string } newContent 新的消息内容。
+ */
+function updateChatMessageContent(messageId, newContent) {
+    console.log(`尝试更新消息ID: ${messageId}`);
+    const messageElement = Elements.chatWindow.querySelector(`.chat-message[data-message-id="${messageId}"]`);
+    if (messageElement) {
+        console.log(`找到消息元素，ID: ${messageId}`);
+        const messageBubble = messageElement.querySelector('.message-bubble');
+        if (messageBubble) {
+            console.log(`找到消息气泡，更新内容 for ID: ${messageId}`);
+            messageBubble.innerHTML = DOMPurify.sanitize(marked.parse(newContent));
+
+            // 强制重绘和重排
+            messageElement.style.opacity = "0.99";
+            setTimeout(() => {
+                messageElement.style.opacity = "1";
+                // 确保滚动到底部
+                Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight;
+            }, 10);
+
+            // 在动画帧中重新计算布局和滚动
+            requestAnimationFrame(() => {
+                Elements.chatWindow.scrollTop = Elements.chatWindow.scrollHeight;
+            });
+        } else {
+            console.warn(`未找到 messageId 为 "${messageId}" 的消息气泡。`);
+        }
+    } else {
+        console.warn(`未找到 messageId 为 "${messageId}" 的聊天消息元素。`);
+    }
+}
+
+// --- 配置区 UI 函数 ---
+
+/* 渲染配置表单。
+ * @param { Object } configData 配置数据。
+ */
+function renderConfigForm(configData) {
+    const apiConfig = configData.API || {};
+    const appConfig = configData.Application || {};
+
+    document.getElementById('gemini-api-base-url').value = apiConfig.GEMINI_API_BASE_URL || '';
+    const geminiApiKeyInput = Elements.geminiApiKeyInput;
+    const showApiKeyCheckbox = Elements.showApiKeyCheckbox;
+
+    // 根据用户要求，始终显示完整的API Key
+    geminiApiKeyInput.value = apiConfig.GEMINI_API_KEY || '';
+
+    // 初始时，API Key输入框应为文本类型，且“显示API Key”复选框选中，以始终显示完整的API Key
+    geminiApiKeyInput.type = 'text';
+    showApiKeyCheckbox.checked = true;
+    document.getElementById('context-window-size').value = appConfig.CONTEXT_WINDOW_SIZE || '';
+    document.getElementById('memory-retention-turns').value = appConfig.MEMORY_RETENTION_TURNS || '';
+    document.getElementById('max-short-term-events').value = appConfig.MAX_SHORT_TERM_EVENTS || '';
+}
+
+/* 填充模型选择下拉框。
+ * @param { Array < string >} models 模型名称列表。
+ * @param { string } selectedDefault 默认选中的对话模型。
+ * @param { string } selectedMemory 默认选中的记忆模型。
+ */
+function populateModelSelects(models, selectedDefault, selectedMemory) {
+    Elements.defaultGeminiModelSelect.innerHTML = '<option value="">请选择</option>';
+    Elements.memoryUpdateModelSelect.innerHTML = '<option value="">请选择</option>';
+
+    models.forEach(model => {
+        // 只显示模型名称的最后一部分（/之后的部分）
+        const displayName = model.split('/').pop();
+
+        const optionDefault = document.createElement('option');
+        optionDefault.value = model;
+        optionDefault.textContent = displayName;
+        Elements.defaultGeminiModelSelect.appendChild(optionDefault);
+
+        const optionMemory = document.createElement('option');
+        optionMemory.value = model;
+        optionMemory.textContent = displayName;
+        Elements.memoryUpdateModelSelect.appendChild(optionMemory);
+    });
+
+    // 确保正确选中默认模型
+    if (selectedDefault) {
+        const defaultOption = Elements.defaultGeminiModelSelect.querySelector(`option[value="${selectedDefault}"]`);
+        if (defaultOption) {
+            defaultOption.selected = true;
+        }
+    }
+
+    // 确保正确选中记忆更新模型
+    if (selectedMemory) {
+        const memoryOption = Elements.memoryUpdateModelSelect.querySelector(`option[value="${selectedMemory}"]`);
+        if (memoryOption) {
+            memoryOption.selected = true;
+        }
+    }
+}
+
+
+// --- 特征区 UI 函数 ---
+
+/* 渲染角色列表。
+ * @param { Array < Object >} roles 角色对象数组。
+ * @param { string } currentActiveRoleId 当前活跃角色ID。
+ * @param { Function } onSwitchRole 点击切换角色的回调函数。
+ * @param { Function } onDeleteRole 点击删除角色的回调函数。
+ */
+function renderRoleList(roles, currentActiveRoleId, onSwitchRole, onDeleteRole) {
+    Elements.roleListDiv.innerHTML = '';
+    roles.forEach(role => {
+        const roleItem = document.createElement('div');
+        roleItem.classList.add('role-item');
+        if (role.id === currentActiveRoleId) {
+            roleItem.classList.add('active-item');
+        }
+        roleItem.innerHTML = `
+            <span>${role.name} (${role.id})</span>
+            <button class="delete-btn" data-role-id="${role.id}" title="删除角色">
+                <i class="fas fa-times"></i>
+            </button>
+        `;
+        roleItem.querySelector('span').addEventListener('click', () => onSwitchRole(role.id));
+        roleItem.querySelector('.delete-btn').addEventListener('click', (e) => {
+            e.stopPropagation(); // 阻止事件冒泡到父级的点击事件
+            onDeleteRole(role.id);
+        });
+        Elements.roleListDiv.appendChild(roleItem);
+    });
+}
+
+/* 渲染特征内容。
+ * @param { Object } featuresContent 特征JSON对象。
+ */
+function renderFeaturesContent(featuresContent) {
+    Elements.featuresContentTextarea.value = JSON.stringify(featuresContent, null, 2);
+}
+
+// --- 记忆区 UI 函数 ---
+
+/* 渲染记忆集列表。
+ * @param { Array < Object >} memories 记忆集对象数组。
+ * @param { string } currentActiveMemoryId 当前活跃记忆集ID。
+ * @param { Function } onSwitchMemory 点击切换记忆集的回调函数。
+ * @param { Function } onDeleteMemory 点击删除记忆集的回调函数。
+ */
+function renderMemoryList(memories, currentActiveMemoryId, onSwitchMemory, onDeleteMemory) {
+    Elements.memoryListDiv.innerHTML = '';
+    memories.forEach(memory => {
+        const memoryItem = document.createElement('div');
+        memoryItem.classList.add('memory-item');
+        if (memory.id === currentActiveMemoryId) {
+            memoryItem.classList.add('active-item');
+        }
+        memoryItem.innerHTML = `
+            <span>${memory.name} (${memory.id})</span>
+            <button class="delete-btn" data-memory-id="${memory.id}" title="删除记忆集">
+                <i class="fas fa-times"></i>
+            </button>
+        `;
+        memoryItem.querySelector('span').addEventListener('click', () => onSwitchMemory(memory.id));
+        memoryItem.querySelector('.delete-btn').addEventListener('click', (e) => {
+            e.stopPropagation(); // 阻止事件冒泡到父级的点击事件
+            onDeleteMemory(memory.id);
+        });
+        Elements.memoryListDiv.appendChild(memoryItem);
+    });
+}
+
+/* 渲染记忆内容。
+ * @param { Object } memoryContent 记忆JSON对象。
+ */
+function renderMemoryContent(memoryContent) {
+    Elements.memoryContentTextarea.value = JSON.stringify(memoryContent, null, 2);
+}
+
+
+// --- 日志区 UI 函数 ---
+
+/* 渲染日志内容。
+ * @param { string } logContent 日志文本。
+ */
+function renderLogContent(logContent) {
+    Elements.logContentPre.textContent = logContent;
+    Elements.logContentPre.scrollTop = Elements.logContentPre.scrollHeight; // 滚动到底部
+}
+
+/* 从聊天窗口移除单条消息。
+ * @param { string } messageId 消息的唯一ID。
+ */
+function removeChatMessage(messageId) {
+    const messageElement = Elements.chatWindow.querySelector(`.chat-message[data-message-id="${messageId}"]`);
+    if (messageElement) {
+        messageElement.remove();
+    } else {
+        console.warn(`未找到 messageId 为 "${messageId}" 的聊天消息元素，无法移除。`);
+    }
+}
+
+// 导出所有需要被 app.js 调用的函数和 Elements
+export {
+    Elements,
+    initializeUIElements, // 导出初始化函数
+    showSection,
+    showToast,
+    showModal,
+    toggleLoadingState,
+    updateSessionInfo,
+    setMemoryUpdateStatus,
+    addChatMessage,
+    renderChatHistory,
+    updateChatMessageContent, // 确保这个函数也被导出
+    removeChatMessage, // 新增：导出移除消息函数
+    renderConfigForm,
+    populateModelSelects,
+    renderRoleList,
+    renderFeaturesContent,
+    renderMemoryList,
+    renderMemoryContent,
+    renderLogContent,
+};