From e955ef73e0a806cd0c069cb7bc5ebbd256c8c331 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Wed, 27 May 2026 16:15:21 +0800
Subject: [PATCH] feat(ui): redesign personal space settings

---
 .../personalization/PersonalizationDrawer.vue | 3743 +++++++++--------
 static/src/utils/icons.ts                     |    2 +
 2 files changed, 1992 insertions(+), 1753 deletions(-)

diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index ca4cf93..f05e875 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -3,6 +3,7 @@
     <div
       class="personal-page-overlay"
       v-if="visible"
+      @click="closeDropdown"
       @mousedown.self="personalization.handleOverlayPressStart($event)"
       @mouseup.self="personalization.handleOverlayPressEnd"
       @mouseleave.self="personalization.handleOverlayPressCancel"
@@ -10,360 +11,457 @@
       @touchend.self.prevent="personalization.handleOverlayPressEnd"
       @touchcancel.self="personalization.handleOverlayPressCancel"
     >
-      <div class="personal-page-card" data-tutorial="personal-card">
-        <div class="personal-page-header">
-          <div>
-            <h2>个人空间</h2>
-            <p>配置 AI 智能体的个性化偏好</p>
-          </div>
-          <div class="personal-page-actions">
-            <button type="button" class="personal-page-logout" @click="personalization.logout()">
-              退出登录
-            </button>
-            <button
-              type="button"
-              class="personal-page-close"
-              data-tutorial="personal-close"
-              @click="personalization.closeDrawer()"
-            >
-              返回工作区
-            </button>
-          </div>
-        </div>
-        <div class="personalization-body" v-if="!loading">
-          <form class="personal-form" @submit.prevent="personalization.save()">
-            <div class="personalization-layout">
-              <nav class="personal-page-tabs" aria-label="个人空间分组切换">
+      <div class="personal-page-card settings-redesign-card" data-tutorial="personal-card">
+        <button
+          type="button"
+          class="settings-close-button"
+          data-tutorial="personal-close"
+          aria-label="关闭个人空间"
+          @click="personalization.closeDrawer()"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round">
+            <path d="M6 6l12 12M18 6 6 18" />
+          </svg>
+        </button>
+
+        <div class="personalization-body settings-redesign-body" v-if="!loading">
+          <form
+            class="personal-form settings-redesign-form"
+            @submit.prevent="personalization.save()"
+          >
+            <div class="settings-redesign-layout">
+              <nav class="settings-redesign-tabs" aria-label="个人空间分组切换">
                 <button
                   v-for="tab in personalTabs"
                   :key="tab.id"
                   type="button"
-                  class="personal-tab-button"
+                  class="settings-redesign-tab"
                   :data-tutorial="`personal-tab-${tab.id}`"
                   :class="{ active: activeTab === tab.id }"
                   :aria-pressed="activeTab === tab.id"
                   @click.prevent="setActiveTab(tab.id)"
                 >
+                  <span
+                    v-if="tab.id === 'context'"
+                    class="settings-tab-icon settings-tab-icon--chat"
+                    aria-hidden="true"
+                  >
+                    <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M5 6.5c0-1.38 1.12-2.5 2.5-2.5h13c1.38 0 2.5 1.12 2.5 2.5v8.5c0 1.38-1.12 2.5-2.5 2.5h-5.6l-3.4 3.2.6-3.2H7.5c-1.38 0-2.5-1.12-2.5-2.5V6.5z"
+                        stroke="currentColor"
+                        stroke-width="1.7"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M9 9.5h10"
+                        stroke="currentColor"
+                        stroke-width="1.7"
+                        stroke-linecap="round"
+                      />
+                      <path
+                        d="M9 13h6"
+                        stroke="currentColor"
+                        stroke-width="1.7"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    v-else
+                    class="icon settings-tab-icon"
+                    :style="settingsTabIconStyle(tab.icon)"
+                    aria-hidden="true"
+                  ></span>
                   <span>{{ tab.label }}</span>
-                  <small v-if="tab.description" class="personal-tab-desc">{{
-                    tab.description
-                  }}</small>
                 </button>
               </nav>
-              <div class="personalization-content-shell" data-tutorial="personal-content-shell">
-                <div class="personalization-content">
+
+              <section class="settings-redesign-content" data-tutorial="personal-content-shell">
+                <header class="settings-redesign-content-header">
+                  <h2>{{ activeTabLabel }}</h2>
+                </header>
+                <div class="settings-redesign-title-line" aria-hidden="true"></div>
+
+                <div class="settings-redesign-scroll">
                   <transition name="personal-page-vertical" mode="out-in">
-                    <section
-                      v-if="activeTab === 'preferences'"
-                      key="preferences"
-                      class="personal-page personal-page-pref"
-                      data-tutorial="personal-page-preferences"
-                    >
-                      <div class="personal-toggle-row">
-                        <label class="personal-toggle">
-                          <span class="toggle-text">
-                            <span class="toggle-title">启用个性化提示</span>
-                            <span class="toggle-desc">开启后才会注入您的偏好</span>
-                          </span>
-                          <span class="toggle-switch">
-                            <input
-                              type="checkbox"
-                              :checked="form.enabled"
-                              :disabled="toggleUpdating"
-                              @change="personalization.toggleEnabled()"
-                            />
-                            <span class="switch-slider"></span>
-                          </span>
-                        </label>
+                    <section v-if="activeTab === 'general'" key="general" class="settings-page">
+                      <label class="settings-toggle-row">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">自动生成对话标题</span>
+                          <span class="settings-row-desc"
+                            >默认开启；关闭后标题将沿用首条消息。</span
+                          >
+                        </span>
+                        <input
+                          type="checkbox"
+                          :checked="form.auto_generate_title"
+                          @change="
+                            personalization.updateField({
+                              key: 'auto_generate_title',
+                              value: $event.target.checked
+                            })
+                          "
+                        />
+                        <span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg
+                        ></span>
+                      </label>
+                      <div class="settings-action-row">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">新手教程</span>
+                          <span class="settings-row-desc"
+                            >通过高亮与说明窗了解主要功能入口和常用设置。</span
+                          >
+                        </span>
+                        <button
+                          type="button"
+                          class="settings-secondary-button"
+                          @click="startTutorial"
+                        >
+                          开始教程
+                        </button>
                       </div>
-                      <p class="section-note">仅作用于当前工作区，可随时在左下角开关。</p>
-                      <div class="personalization-sections">
-                        <div class="personal-left-column">
-                          <div class="personal-section personal-info">
-                            <label class="personal-field">
-                              <span>您希望AI智能体怎么自称？</span>
-                              <input
-                                type="text"
-                                placeholder="如：小秘、助理小A"
-                                :value="form.self_identify"
-                                maxlength="20"
-                                @input="
-                                  personalization.updateField({
-                                    key: 'self_identify',
-                                    value: $event.target.value
-                                  })
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="personal-field">
-                              <span>您希望AI智能体怎么称呼您？</span>
-                              <input
-                                type="text"
-                                placeholder="如：Jojo、老师"
-                                :value="form.user_name"
-                                maxlength="20"
-                                @input="
-                                  personalization.updateField({
-                                    key: 'user_name',
-                                    value: $event.target.value
-                                  })
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="personal-field">
-                              <span>您的职业是？</span>
-                              <input
-                                type="text"
-                                placeholder="如：产品经理、设计师"
-                                :value="form.profession"
-                                maxlength="20"
-                                @input="
-                                  personalization.updateField({
-                                    key: 'profession',
-                                    value: $event.target.value
-                                  })
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <div class="personal-field">
-                              <label>
-                                <span>您希望AI智能体用何种语气与您交流？</span>
-                                <input
-                                  type="text"
-                                  placeholder="请选择或输入语气"
-                                  :value="form.tone"
-                                  maxlength="20"
-                                  @input="
-                                    personalization.updateField({
-                                      key: 'tone',
-                                      value: $event.target.value
-                                    })
-                                  "
-                                  @focus="personalization.clearFeedback()"
-                                />
-                              </label>
-                              <div class="tone-preset-row">
-                                <span>快速填入：</span>
-                                <div class="tone-preset-buttons">
-                                  <button
-                                    type="button"
-                                    v-for="preset in tonePresets"
-                                    :key="preset"
-                                    @click.prevent="personalization.applyTonePreset(preset)"
-                                  >
-                                    {{ preset }}
-                                  </button>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div class="personal-right-column">
-                          <div class="personal-section personal-considerations">
-                            <div class="personal-field">
-                              <span>您希望AI智能体在回答问题时必须考虑的信息是？</span>
-                              <div class="consideration-input">
-                                <input
-                                  type="text"
-                                  :value="newConsideration"
-                                  maxlength="50"
-                                  placeholder="输入后点击 + 号添加"
-                                  @input="
-                                    personalization.updateNewConsideration($event.target.value)
-                                  "
-                                  @focus="personalization.clearFeedback()"
-                                />
-                                <button
-                                  type="button"
-                                  class="consideration-add"
-                                  :disabled="
-                                    !newConsideration ||
-                                    form.considerations.length >= maxConsiderations
-                                  "
-                                  @click="personalization.addConsideration()"
-                                >
-                                  +
-                                </button>
-                              </div>
-                              <ul class="consideration-list" v-if="form.considerations.length">
-                                <li
-                                  v-for="(item, idx) in form.considerations"
-                                  :key="`consideration-${idx}`"
-                                  class="consideration-item"
-                                  draggable="true"
-                                  @dragstart="personalization.considerationDragStart(idx, $event)"
-                                  @dragover.prevent="
-                                    personalization.considerationDragOver(idx, $event)
-                                  "
-                                  @drop.prevent="personalization.considerationDrop(idx, $event)"
-                                  @dragend="personalization.considerationDragEnd()"
-                                >
-                                  <span class="drag-handle" aria-hidden="true">≡</span>
-                                  <span class="consideration-text">{{ item }}</span>
-                                  <button
-                                    type="button"
-                                    class="consideration-remove"
-                                    @click="personalization.removeConsideration(idx)"
-                                  >
-                                    −
-                                  </button>
-                                </li>
-                              </ul>
-                              <p class="consideration-hint" v-else>尚未添加任何必备信息</p>
-                              <p class="consideration-limit">
-                                最多 {{ maxConsiderations }} 条，可拖动排序
-                              </p>
-                            </div>
-                          </div>
-                          <div class="personal-form-actions card-aligned">
-                            <div class="personal-status-group">
-                              <transition name="personal-status-fade">
-                                <span class="status success" v-if="status">{{ status }}</span>
-                              </transition>
-                              <transition name="personal-status-fade">
-                                <span class="status error" v-if="error">{{ error }}</span>
-                              </transition>
-                            </div>
-                            <button type="submit" class="primary" :disabled="saving">
-                              {{ saving ? '保存中...' : '保存设置' }}
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'image'"
-                      key="image"
-                      class="personal-page behavior-page"
-                      data-tutorial="personal-page-image"
-                    >
-                      <div class="behavior-section">
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">图片压缩</span>
-                            <p class="behavior-desc">
-                              发送图片或调用 view_image 时自动等比缩放，防止大图占用过多 tokens。
-                            </p>
-                          </div>
-                          <div class="run-mode-options">
-                            <button
-                              v-for="option in imageCompressionOptions"
-                              :key="option.id"
-                              type="button"
-                              class="run-mode-card"
-                              :class="{ active: form.image_compression === option.id }"
-                              :aria-pressed="form.image_compression === option.id"
-                              @click.prevent="personalization.setImageCompression(option.id)"
-                            >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">{{ option.label }}</span>
-                              </div>
-                              <p class="run-mode-desc">{{ option.desc }}</p>
-                            </button>
-                          </div>
-                          <p class="behavior-hint">
-                            缩放保持原始比例；若原图已低于目标分辨率，将直接使用原图。
-                          </p>
-                        </div>
-                      </div>
-                      <div class="personal-actions-row">
-                        <div class="personal-form-actions card-aligned">
-                          <div class="personal-status-group">
-                            <transition name="personal-status-fade">
-                              <span class="status success" v-if="status">{{ status }}</span>
-                            </transition>
-                            <transition name="personal-status-fade">
-                              <span class="status error" v-if="error">{{ error }}</span>
-                            </transition>
-                          </div>
-                          <button type="submit" class="primary" :disabled="saving">
-                            {{ saving ? '保存中...' : '保存设置' }}
+                      <div class="settings-action-row" v-if="isAppShell">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">软件更新</span>
+                          <span class="settings-row-desc"
+                            >当前版本：{{ appCurrentVersionText }} ·
+                            {{ appUpdateCheckedText }}</span
+                          >
+                        </span>
+                        <div class="settings-inline-actions">
+                          <span class="settings-mini-status" :class="{ warning: appHasUpdate }">{{
+                            appUpdateStateText
+                          }}</span>
+                          <button
+                            type="button"
+                            class="settings-secondary-button"
+                            :disabled="appUpdateChecking"
+                            @click="checkAppUpdate"
+                          >
+                            {{ appUpdateChecking ? '检查中...' : '检查更新' }}
+                          </button>
+                          <button
+                            v-if="appHasUpdate"
+                            type="button"
+                            class="settings-primary-button"
+                            @click="downloadLatestApp"
+                          >
+                            下载
                           </button>
                         </div>
                       </div>
+                      <div class="settings-action-row danger-zone">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">退出登录</span>
+                          <span class="settings-row-desc">结束当前账号会话。</span>
+                        </span>
+                        <button
+                          type="button"
+                          class="settings-secondary-button danger"
+                          @click="personalization.logout()"
+                        >
+                          退出登录
+                        </button>
+                      </div>
                     </section>
+
+                    <section
+                      v-else-if="activeTab === 'preferences'"
+                      key="preferences"
+                      class="settings-page"
+                      data-tutorial="personal-page-preferences"
+                    >
+                      <label class="settings-toggle-row">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">启用个性化提示</span>
+                          <span class="settings-row-desc">开启后才会注入您的偏好。</span>
+                        </span>
+                        <input
+                          type="checkbox"
+                          :checked="form.enabled"
+                          :disabled="toggleUpdating"
+                          @change="personalization.toggleEnabled()"
+                        />
+                        <span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg
+                        ></span>
+                      </label>
+                      <label class="settings-input-row">
+                        <span class="settings-row-title">AI 智能体自称</span>
+                        <input
+                          type="text"
+                          :value="form.self_identify"
+                          maxlength="20"
+                          placeholder="如：小秘、助理小A"
+                          @input="
+                            personalization.updateField({
+                              key: 'self_identify',
+                              value: $event.target.value
+                            })
+                          "
+                          @focus="personalization.clearFeedback()"
+                        />
+                      </label>
+                      <label class="settings-input-row">
+                        <span class="settings-row-title">用户称呼</span>
+                        <input
+                          type="text"
+                          :value="form.user_name"
+                          maxlength="20"
+                          placeholder="如：Jojo、老师"
+                          @input="
+                            personalization.updateField({
+                              key: 'user_name',
+                              value: $event.target.value
+                            })
+                          "
+                          @focus="personalization.clearFeedback()"
+                        />
+                      </label>
+                      <label class="settings-input-row">
+                        <span class="settings-row-title">职业</span>
+                        <input
+                          type="text"
+                          :value="form.profession"
+                          maxlength="20"
+                          placeholder="如：产品经理、设计师"
+                          @input="
+                            personalization.updateField({
+                              key: 'profession',
+                              value: $event.target.value
+                            })
+                          "
+                          @focus="personalization.clearFeedback()"
+                        />
+                      </label>
+                      <div class="settings-input-row stackable">
+                        <span class="settings-row-title">交流语气</span>
+                        <div class="settings-input-stack">
+                          <input
+                            type="text"
+                            :value="form.tone"
+                            maxlength="20"
+                            placeholder="请选择或输入语气"
+                            @input="
+                              personalization.updateField({
+                                key: 'tone',
+                                value: $event.target.value
+                              })
+                            "
+                            @focus="personalization.clearFeedback()"
+                          />
+                          <div class="settings-chip-row">
+                            <button
+                              v-for="preset in tonePresets"
+                              :key="preset"
+                              type="button"
+                              @click.prevent="personalization.applyTonePreset(preset)"
+                            >
+                              {{ preset }}
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="settings-list-row tall">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">回答时必须考虑的信息</span>
+                          <span class="settings-row-desc"
+                            >最多 {{ maxConsiderations }} 条，可拖动排序。</span
+                          >
+                        </span>
+                        <div class="settings-input-stack wide">
+                          <div class="settings-add-row">
+                            <input
+                              type="text"
+                              :value="newConsideration"
+                              maxlength="50"
+                              placeholder="输入后点击 + 添加"
+                              @input="personalization.updateNewConsideration($event.target.value)"
+                              @focus="personalization.clearFeedback()"
+                            />
+                            <button
+                              type="button"
+                              :disabled="
+                                !newConsideration || form.considerations.length >= maxConsiderations
+                              "
+                              @click="personalization.addConsideration()"
+                            >
+                              +
+                            </button>
+                          </div>
+                          <ul class="settings-consideration-list" v-if="form.considerations.length">
+                            <li
+                              v-for="(item, idx) in form.considerations"
+                              :key="`consideration-${idx}`"
+                              draggable="true"
+                              @dragstart="personalization.considerationDragStart(idx, $event)"
+                              @dragover.prevent="personalization.considerationDragOver(idx, $event)"
+                              @drop.prevent="personalization.considerationDrop(idx, $event)"
+                              @dragend="personalization.considerationDragEnd()"
+                            >
+                              <span class="drag-handle" aria-hidden="true">≡</span>
+                              <span>{{ item }}</span>
+                              <button
+                                type="button"
+                                @click="personalization.removeConsideration(idx)"
+                              >
+                                −
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">智能体交流风格</span>
+                          <span class="settings-row-desc">智能体和您交流时使用何种形式。</span>
+                        </span>
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'communication' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('communication')"
+                          >
+                            {{ communicationStyleLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
+                            <button
+                              type="button"
+                              class="settings-menu-option"
+                              :class="{ selected: form.communication_style === 'default' }"
+                              @click="selectCommunicationStyle('default')"
+                            >
+                              <strong>默认</strong><span>标准 AI 风格。</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
+                            </button>
+                            <button
+                              type="button"
+                              class="settings-menu-option"
+                              :class="{ selected: form.communication_style === 'human_like' }"
+                              @click="selectCommunicationStyle('human_like')"
+                            >
+                              <strong>拟人</strong><span>像聊天一样模仿人类语言风格。</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </section>
+
                     <section
                       v-else-if="activeTab === 'model'"
                       key="model"
-                      class="personal-page behavior-page"
+                      class="settings-page"
                       data-tutorial="personal-page-model"
                     >
-                      <div class="behavior-section">
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">默认模型</span>
-                            <p class="field-desc">
-                              为新对话/登录后首次请求选择首选模型，会与默认思考模式一起生效。
-                            </p>
-                          </div>
-                          <div class="run-mode-options model-options">
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">默认模型</span
+                          ><span class="settings-row-desc"
+                            >为新对话/登录后首次请求选择首选模型。</span
+                          ></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'model' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('model')"
+                          >
+                            {{ defaultModelLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
                             <button
                               v-for="option in filteredModelOptions"
                               :key="option.id"
                               type="button"
-                              class="run-mode-card"
-                              :class="[
-                                { active: form.default_model === option.value },
-                                { disabled: option.disabled }
-                              ]"
-                              :aria-pressed="form.default_model === option.value"
+                              class="settings-menu-option"
+                              :class="{
+                                selected: form.default_model === option.value,
+                                disabled: option.disabled
+                              }"
                               :disabled="option.disabled"
-                              @click.prevent="!option.disabled && setDefaultModel(option.value)"
+                              @click="selectDefaultModel(option.value)"
                             >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">{{ option.label }}</span>
-                                <span v-if="option.badge" class="run-mode-badge">{{
-                                  option.badge
-                                }}</span>
-                                <span v-if="option.disabled" class="run-mode-badge danger"
-                                  >已禁用</span
-                                >
-                              </div>
-                              <p class="run-mode-desc">{{ option.desc }}</p>
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.disabled ? '已被管理员禁用' : option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
                             </button>
                           </div>
-                          <p class="behavior-hint">
-                            MiniMax-M2.5 仅支持深度思考模式，选择时会给出提示。
-                          </p>
                         </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">默认思考模型</span>
-                            <p class="field-desc">
-                              设定登录或新建任务时的初始运行模式，仍可通过主界面随时切换。
-                            </p>
-                          </div>
-                          <div class="run-mode-options">
+                      </div>
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">默认运行模式</span
+                          ><span class="settings-row-desc"
+                            >登录或新建任务时的初始运行模式。</span
+                          ></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'run-mode' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('run-mode')"
+                          >
+                            {{ runModeLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
                             <button
                               v-for="option in runModeOptions"
                               :key="option.id"
                               type="button"
-                              class="run-mode-card"
-                              :class="{ active: isRunModeActive(option.value) }"
-                              :aria-pressed="isRunModeActive(option.value)"
-                              @click.prevent="setDefaultRunMode(option.value)"
+                              class="settings-menu-option"
+                              :class="{ selected: isRunModeActive(option.value) }"
+                              @click="selectDefaultRunMode(option.value)"
                             >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">{{ option.label }}</span>
-                                <span v-if="option.badge" class="run-mode-badge">{{
-                                  option.badge
-                                }}</span>
-                              </div>
-                              <p class="run-mode-desc">{{ option.desc }}</p>
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
                             </button>
                           </div>
                         </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">思考频率</span>
-                            <p class="field-desc">
-                              控制连续快速模式运行多少轮后，系统会强制切换到思考模型。
-                            </p>
-                          </div>
-                          <div class="thinking-presets">
+                      </div>
+                      <div class="settings-list-row tall">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">思考频率</span
+                          ><span class="settings-row-desc"
+                            >连续快速模式运行多少轮后，系统强制切换到思考模型。</span
+                          ></span
+                        >
+                        <div class="settings-input-stack wide">
+                          <div class="settings-chip-row right">
                             <button
                               v-for="preset in thinkingPresets"
                               :key="preset.id"
@@ -371,128 +469,668 @@
                               :class="{ active: isPresetActive(preset.value) }"
                               @click.prevent="applyThinkingPreset(preset.value)"
                             >
-                              {{ preset.label }}
-                              <small>{{ preset.value }} 轮</small>
+                              {{ preset.label }} · {{ preset.value }}轮
                             </button>
                           </div>
-                          <div class="thinking-input-row">
-                            <label>
-                              <span>自定义轮数</span>
-                              <input
-                                type="number"
-                                :min="thinkingIntervalRange.min"
-                                :max="thinkingIntervalRange.max"
-                                :placeholder="`默认 ${thinkingIntervalDefault} 轮`"
-                                :value="form.thinking_interval ?? ''"
-                                @input="handleThinkingInput"
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <span class="thinking-hint"
-                              >范围 {{ thinkingIntervalRange.min }}~{{
-                                thinkingIntervalRange.max
-                              }}
-                              轮。</span
-                            >
-                            <button
-                              type="button"
-                              class="link-button"
-                              @click.prevent="restoreThinkingInterval"
-                            >
+                          <div class="settings-number-row">
+                            <input
+                              type="number"
+                              :min="thinkingIntervalRange.min"
+                              :max="thinkingIntervalRange.max"
+                              :placeholder="`默认 ${thinkingIntervalDefault} 轮`"
+                              :value="form.thinking_interval ?? ''"
+                              @input="handleThinkingInput"
+                              @focus="personalization.clearFeedback()"
+                            />
+                            <button type="button" @click.prevent="restoreThinkingInterval">
                               恢复默认
                             </button>
                           </div>
                         </div>
                       </div>
-                      <div class="personal-actions-row">
-                        <div class="personal-form-actions card-aligned">
-                          <div class="personal-status-group">
-                            <transition name="personal-status-fade">
-                              <span class="status success" v-if="status">{{ status }}</span>
-                            </transition>
-                            <transition name="personal-status-fade">
-                              <span class="status error" v-if="error">{{ error }}</span>
-                            </transition>
-                          </div>
-                          <button type="submit" class="primary" :disabled="saving">
-                            {{ saving ? '保存中...' : '保存设置' }}
+                    </section>
+
+                    <section
+                      v-else-if="activeTab === 'appearance'"
+                      key="appearance"
+                      class="settings-page"
+                    >
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">主题切换</span
+                          ><span class="settings-row-desc">在经典、明亮和夜间之间切换。</span></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'theme' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('theme')"
+                          >
+                            {{ themeLabel }} <span class="select-chevron" aria-hidden="true"></span>
                           </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
+                            <button
+                              v-for="option in themeOptions"
+                              :key="option.id"
+                              type="button"
+                              class="settings-menu-option"
+                              :class="{ selected: activeTheme === option.id }"
+                              @click="selectThemeOption(option.id)"
+                            >
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">使用自定义称呼</span
+                          ><span class="settings-row-desc"
+                            >对话区域使用个性化设置中的自称和称呼。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.use_custom_names"
+                          @change="
+                            personalization.updateField({
+                              key: 'use_custom_names',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">增强工具显示</span
+                          ><span class="settings-row-desc"
+                            >工具块显示格式化内容，关闭则显示原始 JSON。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.enhanced_tool_display"
+                          @change="
+                            personalization.updateField({
+                              key: 'enhanced_tool_display',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">堆叠块显示模式</span
+                          ><span class="settings-row-desc">选择思考/工具块的显示方式。</span></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'block-display' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('block-display')"
+                          >
+                            {{ blockDisplayLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
+                            <button
+                              v-for="option in blockDisplayOptions"
+                              :key="option.id"
+                              type="button"
+                              class="settings-menu-option"
+                              :class="{ selected: form.block_display_mode === option.value }"
+                              @click="selectBlockDisplayMode(option.value)"
+                            >
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
+                            </button>
+                          </div>
                         </div>
                       </div>
                     </section>
+
                     <section
                       v-else-if="activeTab === 'workspace'"
                       key="workspace"
-                      class="personal-page behavior-page"
+                      class="settings-page"
                       data-tutorial="personal-page-workspace"
                     >
-                      <div class="behavior-section">
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">默认权限</span>
-                            <p class="field-desc">
-                              新建对话时的默认权限模式。权限会与对话绑定，切换对话会自动切换对应权限。
-                            </p>
-                          </div>
-                          <div class="run-mode-options">
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">默认权限</span
+                          ><span class="settings-row-desc">新建对话时的默认权限模式。</span></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'permission' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('permission')"
+                          >
+                            {{ permissionModeLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
                             <button
                               v-for="option in permissionModeOptions"
                               :key="option.id"
                               type="button"
-                              class="run-mode-card"
-                              :class="{ active: form.default_permission_mode === option.id }"
-                              :aria-pressed="form.default_permission_mode === option.id"
-                              @click.prevent="setDefaultPermissionMode(option.id)"
+                              class="settings-menu-option"
+                              :class="{ selected: form.default_permission_mode === option.id }"
+                              @click="selectDefaultPermissionMode(option.id)"
                             >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">{{ option.label }}</span>
-                              </div>
-                              <p class="run-mode-desc">{{ option.desc }}</p>
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
                             </button>
                           </div>
                         </div>
+                      </div>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">允许根目录创建文件</span
+                          ><span class="settings-row-desc"
+                            >关闭则禁止在工作区根目录创建文件。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.allow_root_file_creation"
+                          @change="
+                            personalization.updateField({
+                              key: 'allow_root_file_creation',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">AGENTS.md 自动注入</span
+                          ><span class="settings-row-desc"
+                            >工作区根目录存在 AGENTS.md 时自动注入系统提示词。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.agents_md_auto_inject"
+                          @change="
+                            personalization.updateField({
+                              key: 'agents_md_auto_inject',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                    </section>
 
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">版本回溯默认模式</span>
-                            <p class="field-desc">
-                              版本管理已固定为覆盖当前对话。
-                            </p>
-                          </div>
-                          <div class="run-mode-options">
-                            <button type="button" class="run-mode-card active" aria-pressed="true" disabled>
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">覆盖当前</span>
-                              </div>
-                              <p class="run-mode-desc">直接回溯并覆盖当前对话。</p>
-                            </button>
-                          </div>
+                    <section
+                      v-else-if="activeTab === 'context'"
+                      key="context"
+                      class="settings-page"
+                    >
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">最近对话提示</span
+                          ><span class="settings-row-desc"
+                            >把当前工作区最近若干个非空对话注入系统提示词。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.recent_conversations_prompt_enabled"
+                          @change="
+                            personalization.updateField({
+                              key: 'recent_conversations_prompt_enabled',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <div
+                        class="settings-input-row"
+                        v-if="form.recent_conversations_prompt_enabled"
+                      >
+                        <span class="settings-row-title">最近对话注入数量</span>
+                        <div class="settings-number-row">
+                          <input
+                            type="number"
+                            :min="recentConversationsPromptLimitRange.min"
+                            :max="recentConversationsPromptLimitRange.max"
+                            :value="form.recent_conversations_prompt_limit"
+                            @input="handleRecentConversationsPromptLimitInput"
+                            @blur="commitRecentConversationsPromptLimitInput"
+                          /><button type="button" @click="restoreRecentConversationsPromptLimit">
+                            恢复默认
+                          </button>
                         </div>
+                      </div>
+                      <div class="settings-group-block">
+                        <div class="settings-group-title">
+                          <span class="settings-row-title">上下文压缩策略</span
+                          ><span class="settings-row-desc"
+                            >可分别控制自动浅层压缩与自动深层压缩。</span
+                          >
+                        </div>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-copy"
+                            ><span class="settings-row-title">自动浅层压缩</span></span
+                          ><input
+                            type="checkbox"
+                            :checked="form.auto_shallow_compress_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'auto_shallow_compress_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-copy"
+                            ><span class="settings-row-title">自动深层压缩</span></span
+                          ><input
+                            type="checkbox"
+                            :checked="form.auto_deep_compress_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'auto_deep_compress_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                        <div class="settings-compression-grid">
+                          <label
+                            ><span>浅压缩触发上下文</span
+                            ><input
+                              type="number"
+                              :value="form.shallow_compress_trigger_tokens ?? ''"
+                              @input="
+                                handleCompressionNumberInput(
+                                  'shallow_compress_trigger_tokens',
+                                  $event
+                                )
+                              "
+                          /></label>
+                          <label
+                            ><span>浅压缩保留最近工具数</span
+                            ><input
+                              type="number"
+                              :value="form.shallow_compress_keep_recent_tools ?? ''"
+                              @input="
+                                handleCompressionNumberInput(
+                                  'shallow_compress_keep_recent_tools',
+                                  $event
+                                )
+                              "
+                          /></label>
+                          <label
+                            ><span>浅压缩保留当前轮工具数</span
+                            ><input
+                              type="number"
+                              :value="form.shallow_compress_keep_user_turn_tools ?? ''"
+                              @input="
+                                handleCompressionNumberInput(
+                                  'shallow_compress_keep_user_turn_tools',
+                                  $event
+                                )
+                              "
+                          /></label>
+                          <label
+                            ><span>每轮最大替换数量</span
+                            ><input
+                              type="number"
+                              :value="form.shallow_compress_max_replace_per_round ?? ''"
+                              @input="
+                                handleCompressionNumberInput(
+                                  'shallow_compress_max_replace_per_round',
+                                  $event
+                                )
+                              "
+                          /></label>
+                          <label
+                            ><span>工具调用间隔触发</span
+                            ><input
+                              type="number"
+                              :value="form.shallow_compress_trigger_tool_calls_interval ?? ''"
+                              @input="
+                                handleCompressionNumberInput(
+                                  'shallow_compress_trigger_tool_calls_interval',
+                                  $event
+                                )
+                              "
+                          /></label>
+                          <label
+                            ><span>深压缩触发上下文</span
+                            ><input
+                              type="number"
+                              :value="form.deep_compress_trigger_tokens ?? ''"
+                              @input="
+                                handleCompressionNumberInput('deep_compress_trigger_tokens', $event)
+                              "
+                          /></label>
+                        </div>
+                        <div class="settings-inline-actions right">
+                          <button
+                            type="button"
+                            class="settings-secondary-button"
+                            @click="restoreCompressionDefaults"
+                          >
+                            恢复压缩默认值
+                          </button>
+                        </div>
+                      </div>
+                    </section>
 
-                        <div class="personal-actions-row">
-                          <div class="personal-form-actions card-aligned">
-                            <div class="personal-status-group">
-                              <transition name="personal-status-fade">
-                                <span class="status success" v-if="status">{{ status }}</span>
-                              </transition>
-                              <transition name="personal-status-fade">
-                                <span class="status error" v-if="error">{{ error }}</span>
-                              </transition>
-                            </div>
-                            <button type="submit" class="primary" :disabled="saving">
-                              {{ saving ? '保存中...' : '保存设置' }}
+                    <section v-else-if="activeTab === 'tools'" key="tools" class="settings-page">
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">静默禁用工具</span
+                          ><span class="settings-row-desc"
+                            >禁用工具时不再注入提示消息，模型不会感知被禁用项。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.silent_tool_disable"
+                          @change="
+                            personalization.updateField({
+                              key: 'silent_tool_disable',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">工具意图提示</span
+                          ><span class="settings-row-desc"
+                            >调用工具时先用简短文字告诉你要做什么。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.tool_intent_enabled"
+                          @change="
+                            personalization.updateField({
+                              key: 'tool_intent_enabled',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <label class="settings-toggle-row"
+                        ><span class="settings-row-copy"
+                          ><span class="settings-row-title">Skill 提示系统</span
+                          ><span class="settings-row-desc"
+                            >检测到特定关键词时自动提示模型阅读相关 skill。</span
+                          ></span
+                        ><input
+                          type="checkbox"
+                          :checked="form.skill_hints_enabled"
+                          @change="
+                            personalization.updateField({
+                              key: 'skill_hints_enabled',
+                              value: $event.target.checked
+                            })
+                          " /><span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg></span
+                      ></label>
+                      <div class="settings-group-block">
+                        <div class="settings-group-title">
+                          <span class="settings-row-title">强约束系统</span
+                          ><span class="settings-row-desc"
+                            >仅对个人空间中已启用的 skill 生效。</span
+                          >
+                        </div>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-title">Terminal 系列工具</span
+                          ><input
+                            type="checkbox"
+                            :checked="form.skill_strict_terminal_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'skill_strict_terminal_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-title">子智能体系列工具</span
+                          ><input
+                            type="checkbox"
+                            :checked="form.skill_strict_sub_agent_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'skill_strict_sub_agent_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-title">run_command 前台模式</span
+                          ><input
+                            type="checkbox"
+                            :checked="form.skill_strict_run_command_foreground_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'skill_strict_run_command_foreground_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                        <label class="settings-toggle-row inner"
+                          ><span class="settings-row-title">run_command 后台模式</span
+                          ><input
+                            type="checkbox"
+                            :checked="form.skill_strict_run_command_background_enabled"
+                            @change="
+                              personalization.updateField({
+                                key: 'skill_strict_run_command_background_enabled',
+                                value: $event.target.checked
+                              })
+                            " /><span class="fancy-check" aria-hidden="true"
+                            ><svg viewBox="0 0 64 64">
+                              <path
+                                d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                pathLength="575.0541381835938"
+                                class="fancy-path"
+                              ></path></svg></span
+                        ></label>
+                      </div>
+                      <div class="settings-group-block" v-if="skillsCatalog.length">
+                        <div class="settings-group-title">
+                          <span class="settings-row-title">可用 Skills</span
+                          ><span class="settings-row-desc"
+                            >勾选后会注入 system prompt，并同步到工作区的 skills/ 目录。</span
+                          >
+                        </div>
+                        <div class="settings-check-grid">
+                          <label
+                            v-for="skill in skillsCatalog"
+                            :key="skill.id"
+                            class="settings-toggle-row inner"
+                            ><span class="settings-row-title">{{ skill.label }}</span
+                            ><input
+                              type="checkbox"
+                              :checked="form.enabled_skills.includes(skill.id)"
+                              @change="personalization.toggleSkill(skill.id)" /><span
+                              class="fancy-check"
+                              aria-hidden="true"
+                              ><svg viewBox="0 0 64 64">
+                                <path
+                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                  pathLength="575.0541381835938"
+                                  class="fancy-path"
+                                ></path></svg></span
+                          ></label>
+                        </div>
+                      </div>
+                      <div class="settings-group-block" v-if="toolCategories.length">
+                        <div class="settings-group-title">
+                          <span class="settings-row-title">默认禁用工具类别</span
+                          ><span class="settings-row-desc"
+                            >选择后，这些类别在新任务中保持关闭。</span
+                          >
+                        </div>
+                        <div class="settings-check-grid">
+                          <label
+                            v-for="category in toolCategories"
+                            :key="category.id"
+                            class="settings-toggle-row inner"
+                            ><span class="settings-row-title">{{ category.label }}</span
+                            ><input
+                              type="checkbox"
+                              :checked="form.disabled_tool_categories.includes(category.id)"
+                              @change="toggleCategory(category.id)" /><span
+                              class="fancy-check"
+                              aria-hidden="true"
+                              ><svg viewBox="0 0 64 64">
+                                <path
+                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                                  pathLength="575.0541381835938"
+                                  class="fancy-path"
+                                ></path></svg></span
+                          ></label>
+                        </div>
+                      </div>
+                    </section>
+
+                    <section
+                      v-else-if="activeTab === 'files'"
+                      key="files"
+                      class="settings-page"
+                      data-tutorial="personal-page-image"
+                    >
+                      <div class="settings-select-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">图片压缩</span
+                          ><span class="settings-row-desc"
+                            >发送图片或调用 view_image 时自动等比缩放。</span
+                          ></span
+                        >
+                        <div
+                          class="settings-select-wrap"
+                          :class="{ open: activeDropdown === 'image' }"
+                          @click.stop
+                        >
+                          <button
+                            type="button"
+                            class="settings-select-button"
+                            @click="toggleDropdown('image')"
+                          >
+                            {{ imageCompressionLabel }}
+                            <span class="select-chevron" aria-hidden="true"></span>
+                          </button>
+                          <div
+                            :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                          >
+                            <button
+                              v-for="option in imageCompressionOptions"
+                              :key="option.id"
+                              type="button"
+                              class="settings-menu-option"
+                              :class="{ selected: form.image_compression === option.id }"
+                              @click="selectImageCompression(option.id)"
+                            >
+                              <strong>{{ option.label }}</strong
+                              ><span>{{ option.desc }}</span
+                              ><svg viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" /></svg>
                             </button>
                           </div>
                         </div>
                       </div>
                     </section>
+
                     <section
-                      v-else-if="activeTab === 'usage'"
-                      key="usage"
-                      class="personal-page usage-summary-page"
+                      v-else-if="activeTab === 'data'"
+                      key="data"
+                      class="settings-page usage-summary-page"
                       data-tutorial="personal-page-usage"
                     >
-                      <div class="usage-summary-card">
+                      <div class="usage-summary-card settings-stats-card">
                         <div class="usage-summary-header">
                           <div>
                             <p class="usage-summary-eyebrow">对话用量</p>
@@ -500,9 +1138,6 @@
                             <p class="usage-summary-desc">
                               累计统计所有对话的输入/输出 Token、对话数量、用户消息与工具调用。
                             </p>
-                            <p class="usage-summary-note">
-                              宿主机模式同样统计 data/conversations 内的记录。
-                            </p>
                           </div>
                         </div>
                         <div class="usage-summary-grid usage-summary-grid--tokens">
@@ -540,12 +1175,10 @@
                           </div>
                         </div>
                         <div class="usage-summary-meta">
-                          <span v-if="usageError" class="usage-summary-error">{{
-                            usageError
-                          }}</span>
-                          <span v-else-if="usageLoading">正在同步最新统计...</span>
-                          <span v-else>最近更新：{{ usageUpdatedText }}</span>
-                          <button
+                          <span v-if="usageError" class="usage-summary-error">{{ usageError }}</span
+                          ><span v-else-if="usageLoading">正在同步最新统计...</span
+                          ><span v-else>最近更新：{{ usageUpdatedText }}</span
+                          ><button
                             type="button"
                             class="usage-summary-refresh"
                             @click="fetchUsageSummary"
@@ -556,1003 +1189,83 @@
                         </div>
                       </div>
                     </section>
-                    <section
-                      v-else-if="activeTab === 'app-update'"
-                      key="app-update"
-                      class="personal-page app-update-page"
-                      data-tutorial="personal-page-app-update"
-                    >
-                      <div class="usage-summary-card">
-                        <div class="usage-summary-header">
-                          <div>
-                            <p class="usage-summary-eyebrow">App 更新</p>
-                            <h3>软件更新</h3>
-                            <p class="usage-summary-desc">
-                              仅移动 App 可见。自动检查新版本，也可手动检查。
-                            </p>
-                            <p class="usage-summary-note">当前版本：{{ appCurrentVersionText }}</p>
-                          </div>
-                        </div>
 
-                        <div class="usage-summary-grid usage-summary-grid--counts">
-                          <div class="usage-summary-item">
-                            <div class="label">最新版本</div>
-                            <div class="value">{{ appLatestVersionText }}</div>
-                          </div>
-                          <div class="usage-summary-item">
-                            <div class="label">安装包大小</div>
-                            <div class="value">{{ appLatestFileSizeText }}</div>
-                          </div>
-                          <div class="usage-summary-item">
-                            <div class="label">更新状态</div>
-                            <div class="value" :class="{ 'value--warning': appHasUpdate }">
-                              {{ appUpdateStateText }}
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="app-update-changelog" v-if="appUpdateChangelogText">
-                          <div class="app-update-changelog-title">更新说明</div>
-                          <pre class="app-update-changelog-content">{{
-                            appUpdateChangelogText
-                          }}</pre>
-                        </div>
-
-                        <div class="usage-summary-meta">
-                          <span v-if="appUpdateError" class="usage-summary-error">{{
-                            appUpdateError
-                          }}</span>
-                          <span v-else-if="appUpdateChecking">正在检查版本...</span>
-                          <span v-else>{{ appUpdateCheckedText }}</span>
-                          <div class="app-update-actions">
-                            <button
-                              type="button"
-                              class="usage-summary-refresh"
-                              @click="checkAppUpdate"
-                              :disabled="appUpdateChecking"
-                            >
-                              {{ appUpdateChecking ? '检查中...' : '手动检查' }}
-                            </button>
-                            <button
-                              type="button"
-                              class="usage-summary-refresh"
-                              :disabled="!appHasUpdate || !appDownloadUrl"
-                              @click="downloadLatestApp"
-                            >
-                              下载更新
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                    </section>
                     <section
-                      v-else-if="activeTab === 'behavior'"
-                      key="behavior"
-                      class="personal-page behavior-page"
-                      data-tutorial="personal-page-behavior"
+                      v-else-if="activeTab === 'admin'"
+                      key="admin"
+                      class="settings-page admin-monitor-page"
                     >
-                      <div class="behavior-section">
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">使用自定义称呼</span>
-                            <p class="field-desc">
-                              开启后，对话区域将使用您在"个性化设置"中配置的自称和称呼。关闭则显示默认的"AI
-                              Assistant"和"用户"。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.use_custom_names"
-                              @change="
-                                personalization.updateField({
-                                  key: 'use_custom_names',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>在对话中显示自定义称呼</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">增强工具显示</span>
-                            <p class="field-desc">
-                              开启后工具块将显示格式化的内容，关闭则显示原始 JSON 数据。默认开启。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.enhanced_tool_display"
-                              @change="
-                                personalization.updateField({
-                                  key: 'enhanced_tool_display',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>显示格式化的工具结果（更清晰易读）</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">AGENTS.md 自动注入</span>
-                            <p class="field-desc">
-                              开启后，如果工作区根目录存在 AGENTS.md 文件，系统会自动将其内容注入到系统提示词中。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.agents_md_auto_inject"
-                              @change="
-                                personalization.updateField({
-                                  key: 'agents_md_auto_inject',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>自动注入 AGENTS.md 到系统提示词</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">最近对话提示</span>
-                            <p class="field-desc">
-                              开启后，系统会把当前工作区最近若干个非空对话的标题和首条用户消息注入到系统提示词中，帮助智能体主动判断是否需要回顾历史。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.recent_conversations_prompt_enabled"
-                              @change="
-                                personalization.updateField({
-                                  key: 'recent_conversations_prompt_enabled',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>在提示词中加入最近对话</span>
-                          </label>
-                          <div
-                            v-if="form.recent_conversations_prompt_enabled"
-                            class="compression-custom-grid"
-                          >
-                            <label class="compression-input-row">
-                              <span>注入数量</span>
-                              <input
-                                type="number"
-                                :min="recentConversationsPromptLimitRange.min"
-                                :max="recentConversationsPromptLimitRange.max"
-                                step="1"
-                                placeholder="默认 10"
-                                :value="form.recent_conversations_prompt_limit"
-                                @input="handleRecentConversationsPromptLimitInput"
-                                @change="commitRecentConversationsPromptLimitInput"
-                                @blur="commitRecentConversationsPromptLimitInput"
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <p class="field-desc compression-custom-hint">
-                              范围 {{ recentConversationsPromptLimitRange.min }}~{{
-                                recentConversationsPromptLimitRange.max
-                              }}
-                              个；空对话不会注入。
-                            </p>
-                          </div>
-                          <div
-                            v-if="form.recent_conversations_prompt_enabled"
-                            class="compression-actions-row"
-                          >
-                            <button
-                              type="button"
-                              class="compression-reset-btn"
-                              @click.prevent="restoreRecentConversationsPromptLimit"
-                            >
-                              恢复默认
-                            </button>
-                          </div>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">允许根目录创建文件</span>
-                            <p class="field-desc">
-                              开启后，允许在工作区根目录创建文件。关闭则禁止在根目录创建文件（需要先创建子目录）。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.allow_root_file_creation"
-                              @change="
-                                personalization.updateField({
-                                  key: 'allow_root_file_creation',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>允许在根目录创建文件</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">上下文压缩策略</span>
-                            <p class="field-desc">可分别控制自动浅层压缩与自动深层压缩。</p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.auto_shallow_compress_enabled"
-                              @change="
-                                personalization.updateField({
-                                  key: 'auto_shallow_compress_enabled',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>自动浅层压缩</span>
-                          </label>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.auto_deep_compress_enabled"
-                              @change="
-                                personalization.updateField({
-                                  key: 'auto_deep_compress_enabled',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>自动深层压缩</span>
-                          </label>
-                          <div class="compression-custom-grid">
-                            <label class="compression-input-row">
-                              <span>浅压缩触发上下文</span>
-                              <input
-                                type="number"
-                                min="1000"
-                                step="1"
-                                placeholder="默认 80000"
-                                :value="form.shallow_compress_trigger_tokens ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'shallow_compress_trigger_tokens',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="compression-input-row">
-                              <span>浅压缩保留最近 Tool 条数</span>
-                              <input
-                                type="number"
-                                min="0"
-                                step="1"
-                                placeholder="默认 15"
-                                :value="form.shallow_compress_keep_recent_tools ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'shallow_compress_keep_recent_tools',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="compression-input-row">
-                              <span>浅压缩保留用户输入后 Tool 条数</span>
-                              <input
-                                type="number"
-                                min="0"
-                                max="50"
-                                step="1"
-                                placeholder="默认 3"
-                                :value="form.shallow_compress_keep_user_turn_tools ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'shallow_compress_keep_user_turn_tools',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="compression-input-row">
-                              <span>浅压缩每轮最多替换条数</span>
-                              <input
-                                type="number"
-                                min="1"
-                                step="1"
-                                placeholder="默认 10"
-                                :value="form.shallow_compress_max_replace_per_round ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'shallow_compress_max_replace_per_round',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="compression-input-row">
-                              <span>浅压缩触发间隔（Tool 调用次数）</span>
-                              <input
-                                type="number"
-                                min="1"
-                                step="1"
-                                placeholder="默认 10"
-                                :value="form.shallow_compress_trigger_tool_calls_interval ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'shallow_compress_trigger_tool_calls_interval',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                            <label class="compression-input-row">
-                              <span>深压缩触发上下文</span>
-                              <input
-                                type="number"
-                                min="1000"
-                                step="1"
-                                placeholder="默认 150000"
-                                :value="form.deep_compress_trigger_tokens ?? ''"
-                                @input="
-                                  handleCompressionNumberInput(
-                                    'deep_compress_trigger_tokens',
-                                    $event
-                                  )
-                                "
-                                @focus="personalization.clearFeedback()"
-                              />
-                            </label>
-                          </div>
-                          <div class="compression-actions-row">
-                            <button
-                              type="button"
-                              class="compression-reset-btn"
-                              @click.prevent="restoreCompressionDefaults"
-                            >
-                              恢复默认
-                            </button>
-                          </div>
-                          <p class="field-desc compression-custom-hint">
-                            自定义项留空则使用默认值；深压缩触发上下文必须大于浅压缩触发上下文。
-                          </p>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">堆叠块显示模式</span>
-                            <p class="field-desc">选择思考/工具块的显示方式。默认为堆叠动画。</p>
-                          </div>
-                          <div class="run-mode-options">
-                            <button
-                              v-for="option in blockDisplayOptions"
-                              :key="option.id"
-                              type="button"
-                              class="run-mode-card"
-                              :class="{ active: experiments.blockDisplayMode === option.value }"
-                              :aria-pressed="experiments.blockDisplayMode === option.value"
-                              @click.prevent="handleBlockDisplayModeChange(option.value)"
-                            >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">{{ option.label }}</span>
-                                <span v-if="option.badge" class="run-mode-badge">{{
-                                  option.badge
-                                }}</span>
-                              </div>
-                              <p class="run-mode-desc">{{ option.desc }}</p>
-                            </button>
-                          </div>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">静默禁用</span>
-                            <p class="field-desc">
-                              禁用工具时不再注入提示消息，模型不会感知被禁用项。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.silent_tool_disable"
-                              @change="
-                                personalization.updateField({
-                                  key: 'silent_tool_disable',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>静默禁用工具（不向模型提示）</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">自动生成对话标题</span>
-                            <p class="field-desc">默认开启；关闭后标题将沿用首条消息。</p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.auto_generate_title"
-                              @change="
-                                personalization.updateField({
-                                  key: 'auto_generate_title',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>使用快速模型为新对话生成含 emoji 的简短标题</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">工具意图提示</span>
-                            <p class="field-desc">
-                              开启后，调用工具时会先用约15字告诉你要做什么，替代“正在/完成”文案。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.tool_intent_enabled"
-                              @change="
-                                personalization.updateField({
-                                  key: 'tool_intent_enabled',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>在工具块显示"我要做什么"的简短提示</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">Skill 提示系统</span>
-                            <p class="field-desc">
-                              开启后，检测到特定关键词时会自动提示模型阅读相关 skill（如
-                              terminal-guide、sub-agent-guide 等）。
-                            </p>
-                          </div>
-                          <label class="toggle-row">
-                            <input
-                              type="checkbox"
-                              :checked="form.skill_hints_enabled"
-                              @change="
-                                personalization.updateField({
-                                  key: 'skill_hints_enabled',
-                                  value: $event.target.checked
-                                })
-                              "
-                            />
-                            <span class="fancy-check" aria-hidden="true">
-                              <svg viewBox="0 0 64 64">
-                                <path
-                                  d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                  pathLength="575.0541381835938"
-                                  class="fancy-path"
-                                ></path>
-                              </svg>
-                            </span>
-                            <span>根据关键词自动提示阅读相关 skill</span>
-                          </label>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">强约束系统</span>
-                            <p class="field-desc">
-                              开启后，若未在当前对话先阅读对应
-                              SKILL.md，直接调用工具会返回“必须先阅读”。仅对个人空间中已启用的 skill
-                              生效。
-                            </p>
-                          </div>
-                          <div class="strict-skill-grid">
-                            <label class="toggle-row">
-                              <input
-                                type="checkbox"
-                                :checked="form.skill_strict_terminal_enabled"
-                                @change="
-                                  personalization.updateField({
-                                    key: 'skill_strict_terminal_enabled',
-                                    value: $event.target.checked
-                                  })
-                                "
-                              />
-                              <span class="fancy-check" aria-hidden="true">
-                                <svg viewBox="0 0 64 64">
-                                  <path
-                                    d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                    pathLength="575.0541381835938"
-                                    class="fancy-path"
-                                  ></path>
-                                </svg>
-                              </span>
-                              <span>Terminal 系列工具</span>
-                            </label>
-                            <label class="toggle-row">
-                              <input
-                                type="checkbox"
-                                :checked="form.skill_strict_sub_agent_enabled"
-                                @change="
-                                  personalization.updateField({
-                                    key: 'skill_strict_sub_agent_enabled',
-                                    value: $event.target.checked
-                                  })
-                                "
-                              />
-                              <span class="fancy-check" aria-hidden="true">
-                                <svg viewBox="0 0 64 64">
-                                  <path
-                                    d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                    pathLength="575.0541381835938"
-                                    class="fancy-path"
-                                  ></path>
-                                </svg>
-                              </span>
-                              <span>子智能体系列工具</span>
-                            </label>
-                            <label class="toggle-row">
-                              <input
-                                type="checkbox"
-                                :checked="form.skill_strict_run_command_foreground_enabled"
-                                @change="
-                                  personalization.updateField({
-                                    key: 'skill_strict_run_command_foreground_enabled',
-                                    value: $event.target.checked
-                                  })
-                                "
-                              />
-                              <span class="fancy-check" aria-hidden="true">
-                                <svg viewBox="0 0 64 64">
-                                  <path
-                                    d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                    pathLength="575.0541381835938"
-                                    class="fancy-path"
-                                  ></path>
-                                </svg>
-                              </span>
-                              <span>run_command 前台模式</span>
-                            </label>
-                            <label class="toggle-row">
-                              <input
-                                type="checkbox"
-                                :checked="form.skill_strict_run_command_background_enabled"
-                                @change="
-                                  personalization.updateField({
-                                    key: 'skill_strict_run_command_background_enabled',
-                                    value: $event.target.checked
-                                  })
-                                "
-                              />
-                              <span class="fancy-check" aria-hidden="true">
-                                <svg viewBox="0 0 64 64">
-                                  <path
-                                    d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
-                                    pathLength="575.0541381835938"
-                                    class="fancy-path"
-                                  ></path>
-                                </svg>
-                              </span>
-                              <span>run_command 后台模式</span>
-                            </label>
-                          </div>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">默认禁用工具类别</span>
-                            <p class="field-desc">
-                              选择后，这些类别在新任务中会保持关闭，也可随时通过快捷菜单临时开启。
-                            </p>
-                          </div>
-                          <div class="tool-category-grid" v-if="toolCategories.length">
-                            <label
-                              v-for="category in toolCategories"
-                              :key="category.id"
-                              class="tool-category-chip"
-                            >
-                              <input
-                                type="checkbox"
-                                :checked="form.disabled_tool_categories.includes(category.id)"
-                                @change="toggleCategory(category.id)"
-                              />
-                              <span>{{ category.label }}</span>
-                            </label>
-                          </div>
-                          <p class="behavior-hint" v-else>暂无可配置的工具类别。</p>
-                        </div>
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">智能体交流风格</span>
-                            <p class="field-desc">智能体和您交流时使用何种形式</p>
-                          </div>
-                          <div class="run-mode-options">
-                            <button
-                              type="button"
-                              class="run-mode-card"
-                              :class="{ active: form.communication_style === 'default' }"
-                              :aria-pressed="form.communication_style === 'default'"
-                              @click.prevent="setCommunicationStyle('default')"
-                            >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">默认</span>
-                              </div>
-                              <p class="run-mode-desc">智能体会使用标准的AI风格的语言和您交流</p>
-                            </button>
-                            <button
-                              type="button"
-                              class="run-mode-card"
-                              :class="{ active: form.communication_style === 'human_like' }"
-                              :aria-pressed="form.communication_style === 'human_like'"
-                              @click.prevent="setCommunicationStyle('human_like')"
-                            >
-                              <div class="run-mode-card-header">
-                                <span class="run-mode-title">拟人</span>
-                              </div>
-                              <p class="run-mode-desc">智能体会像聊天一样模仿人类的语言风格和您交流</p>
-                            </button>
-                          </div>
-                        </div>
+                      <div class="settings-action-row" v-if="showMcpConfigEntry">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">MCP 服务器管理</span
+                          ><span class="settings-row-desc"
+                            >统一配置 MCP Server，集中管理工具扩展能力。</span
+                          ></span
+                        ><button
+                          type="button"
+                          class="settings-secondary-button"
+                          @click="openMcpConfig"
+                        >
+                          打开
+                        </button>
                       </div>
-                      <div class="personal-actions-row">
-                        <div class="personal-form-actions card-aligned">
-                          <div class="personal-status-group">
-                            <transition name="personal-status-fade">
-                              <span class="status success" v-if="status">{{ status }}</span>
-                            </transition>
-                            <transition name="personal-status-fade">
-                              <span class="status error" v-if="error">{{ error }}</span>
-                            </transition>
-                          </div>
-                          <button type="submit" class="primary" :disabled="saving">
-                            {{ saving ? '保存中...' : '保存设置' }}
-                          </button>
-                        </div>
+                      <div class="settings-action-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">管理员监控入口</span
+                          ><span class="settings-row-desc"
+                            >展示配额趋势、容器运行、项目存储与上传安全。</span
+                          ></span
+                        ><button
+                          type="button"
+                          class="settings-secondary-button"
+                          @click="openAdminPanel"
+                        >
+                          打开
+                        </button>
                       </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'skills'"
-                      key="skills"
-                      class="personal-page behavior-page"
-                      data-tutorial="personal-page-skills"
-                    >
-                      <div class="behavior-section">
-                        <div class="behavior-field">
-                          <div class="behavior-field-header">
-                            <span class="field-title">可用 Skills</span>
-                            <p class="field-desc">
-                              勾选后会注入 system prompt，并同步到工作区的 skills/ 目录。
-                            </p>
-                          </div>
-                          <div class="tool-category-grid" v-if="skillsCatalog.length">
-                            <label
-                              v-for="skill in skillsCatalog"
-                              :key="skill.id"
-                              class="tool-category-chip"
-                            >
-                              <input
-                                type="checkbox"
-                                :checked="form.enabled_skills.includes(skill.id)"
-                                @change="personalization.toggleSkill(skill.id)"
-                              />
-                              <span>{{ skill.label }}</span>
-                            </label>
-                          </div>
-                          <p class="behavior-hint" v-else>暂无可用的 skills。</p>
-                        </div>
+                      <div class="settings-action-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">API 管理</span
+                          ><span class="settings-row-desc">管理 API 调用与账户。</span></span
+                        ><button
+                          type="button"
+                          class="settings-secondary-button"
+                          @click="openApiAdmin"
+                        >
+                          打开
+                        </button>
                       </div>
-                      <div class="personal-actions-row">
-                        <div class="personal-form-actions card-aligned">
-                          <div class="personal-status-group">
-                            <transition name="personal-status-fade">
-                              <span class="status success" v-if="status">{{ status }}</span>
-                            </transition>
-                            <transition name="personal-status-fade">
-                              <span class="status error" v-if="error">{{ error }}</span>
-                            </transition>
-                          </div>
-                          <button type="submit" class="primary" :disabled="saving">
-                            {{ saving ? '保存中...' : '保存设置' }}
-                          </button>
-                        </div>
-                      </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'theme'"
-                      key="theme"
-                      class="personal-page theme-page"
-                      data-tutorial="personal-page-theme"
-                    >
-                      <div class="theme-section">
-                        <div class="theme-header">
-                          <div>
-                            <h3>界面主题</h3>
-                            <p>在经典、明亮和夜间之间一键切换。会立即应用并保存在本地。</p>
-                          </div>
-                          <div class="theme-badge">Beta</div>
-                        </div>
-                        <div class="theme-grid">
-                          <button
-                            v-for="option in themeOptions"
-                            :key="option.id"
-                            type="button"
-                            class="theme-card"
-                            :class="{ active: activeTheme === option.id }"
-                            @click.prevent="applyThemeOption(option.id)"
-                          >
-                            <div class="theme-card-head">
-                              <div class="theme-dot-row">
-                                <span
-                                  v-for="(color, idx) in option.swatches"
-                                  :key="`${option.id}-${idx}`"
-                                  class="theme-dot"
-                                  :style="{ background: color }"
-                                  aria-hidden="true"
-                                ></span>
-                              </div>
-                              <span class="theme-check" v-if="activeTheme === option.id">✓</span>
-                            </div>
-                            <div class="theme-card-body">
-                              <h4>{{ option.label }}</h4>
-                              <p>{{ option.desc }}</p>
-                            </div>
-                          </button>
-                        </div>
-                        <p class="theme-note">
-                          虚拟显示器保持原样；仅主界面、侧边栏与个人空间配色随主题改变。
-                        </p>
-                      </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'tutorial'"
-                      key="tutorial"
-                      class="personal-page tutorial-page"
-                    >
-                      <div class="tutorial-intro-content">
-                        <div class="tutorial-intro-header">
-                          <p class="tutorial-intro-eyebrow">功能引导</p>
-                          <h3>新手教程</h3>
-                          <p class="tutorial-intro-desc">
-                            通过高亮 + 悬浮说明窗，快速了解主要功能入口和常用设置。
-                          </p>
-                        </div>
-
-                        <div class="tutorial-intro-features">
-                          <div class="tutorial-feature-item">
-                            <div>
-                              <h4>主界面导览</h4>
-                              <p>认识侧边栏、工作区、模型与模式选择。</p>
-                            </div>
-                          </div>
-                          <div class="tutorial-feature-item">
-                            <div>
-                              <h4>快捷菜单</h4>
-                              <p>学习上传文件、对话回顾、用量统计等高频功能。</p>
-                            </div>
-                          </div>
-                          <div class="tutorial-feature-item">
-                            <div>
-                              <h4>个人空间</h4>
-                              <p>了解模型偏好、主题、Skills、图片压缩等配置。</p>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="tutorial-intro-actions">
-                          <button
-                            type="button"
-                            class="tutorial-start-button"
-                            @click="startTutorial"
-                          >
-                            开始新手教程
-                          </button>
-                          <p class="tutorial-intro-hint">
-                            教程开始后会自动关闭个人空间，您可随时退出或跳过当前步骤。
-                          </p>
-                        </div>
-                      </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'mcp-config'"
-                      key="mcp-config"
-                      class="personal-page admin-monitor-page"
-                    >
-                      <div class="admin-monitor-panel secondary">
-                        <div class="admin-monitor-heading">
-                          <p class="admin-monitor-eyebrow">MCP 配置</p>
-                          <div class="admin-monitor-title-row">
-                            <h3>MCP 服务器管理</h3>
-                            <span class="admin-monitor-chip alt">宿主机模式 · 管理员</span>
-                          </div>
-                          <p class="admin-monitor-desc">
-                            统一配置 MCP Server，支持新增、修改、同步与重载，集中管理工具扩展能力。
-                          </p>
-                        </div>
-                        <div class="admin-monitor-highlights">
-                          <span class="admin-monitor-tag">统一配置</span>
-                          <span class="admin-monitor-tag">工具同步</span>
-                          <span class="admin-monitor-tag">即时生效</span>
-                          <span class="admin-monitor-tag">仅宿主机管理员</span>
-                        </div>
-                        <div class="admin-monitor-actions">
-                          <button
-                            type="button"
-                            class="admin-monitor-button"
-                            @click="openMcpConfig"
-                          >
-                            打开 MCP 配置页
-                          </button>
-                          <p class="admin-monitor-hint">新窗口打开 /admin/policy 页面。</p>
-                        </div>
-                      </div>
-                    </section>
-                    <section
-                      v-else-if="activeTab === 'admin-monitor'"
-                      key="admin-monitor"
-                      class="personal-page admin-monitor-page"
-                    >
-                      <div class="admin-monitor-panel">
-                        <div class="admin-monitor-heading">
-                          <p class="admin-monitor-eyebrow">系统资源</p>
-                          <div class="admin-monitor-title-row">
-                            <h3>管理员监控入口</h3>
-                            <span class="admin-monitor-chip">自动刷新</span>
-                          </div>
-                          <p class="admin-monitor-desc">
-                            独立面板集中展示配额趋势、容器运行、项目存储与上传安全。
-                          </p>
-                        </div>
-                        <div class="admin-monitor-highlights">
-                          <span class="admin-monitor-tag">用量统计</span>
-                          <span class="admin-monitor-tag">容器健康</span>
-                          <span class="admin-monitor-tag">上传审计</span>
-                          <span class="admin-monitor-tag">邀请码管理</span>
-                        </div>
-                        <div class="admin-monitor-actions">
-                          <button
-                            type="button"
-                            class="admin-monitor-button"
-                            @click="openAdminPanel"
-                          >
-                            打开监控面板
-                          </button>
-                          <button
-                            type="button"
-                            class="admin-monitor-button ghost"
-                            @click="openApiAdmin"
-                          >
-                            API 管理
-                          </button>
-                          <p class="admin-monitor-hint">新窗口开启，不打断当前对话与配置。</p>
-                        </div>
-                      </div>
-                      <div class="admin-monitor-panel secondary">
-                        <div class="admin-monitor-heading">
-                          <p class="admin-monitor-eyebrow">自定义工具</p>
-                          <div class="admin-monitor-title-row">
-                            <h3>自定义工具管理</h3>
-                            <span class="admin-monitor-chip alt">低代码 · Python</span>
-                          </div>
-                          <p class="admin-monitor-desc">
-                            在线创建/编辑
-                            definition.json、execution.py、return.json、meta.json，保存后自动生效。
-                          </p>
-                        </div>
-                        <div class="admin-monitor-highlights">
-                          <span class="admin-monitor-tag">仅管理员可见</span>
-                          <span class="admin-monitor-tag">容器内执行</span>
-                          <span class="admin-monitor-tag">无需重启</span>
-                          <span class="admin-monitor-tag">三层拆分</span>
-                        </div>
-                        <div class="admin-monitor-actions">
-                          <button
-                            type="button"
-                            class="admin-monitor-button"
-                            @click="openCustomTools"
-                          >
-                            打开自定义工具
-                          </button>
-                          <p class="admin-monitor-hint">新窗口打开 /admin/custom-tools 页面。</p>
-                        </div>
+                      <div class="settings-action-row">
+                        <span class="settings-row-copy"
+                          ><span class="settings-row-title">自定义工具管理</span
+                          ><span class="settings-row-desc"
+                            >在线创建/编辑自定义工具文件。</span
+                          ></span
+                        ><button
+                          type="button"
+                          class="settings-secondary-button"
+                          @click="openCustomTools"
+                        >
+                          打开
+                        </button>
                       </div>
                     </section>
                   </transition>
                 </div>
-              </div>
+
+                <div class="settings-save-bar">
+                  <div class="personal-status-group">
+                    <transition name="personal-status-fade"
+                      ><span class="status success" v-if="status">{{ status }}</span></transition
+                    ><transition name="personal-status-fade"
+                      ><span class="status error" v-if="error">{{ error }}</span></transition
+                    >
+                  </div>
+                  <button type="submit" class="settings-primary-button" :disabled="saving">
+                    {{ saving ? '保存中...' : '保存设置' }}
+                  </button>
+                </div>
+              </section>
             </div>
           </form>
         </div>
@@ -1572,6 +1285,7 @@ import { usePolicyStore } from '@/stores/policy';
 import { useTutorialStore } from '@/stores/tutorial';
 import { useModelStore } from '@/stores/model';
 import { formatTokenCount } from '@/utils/formatters';
+import { ICONS } from '@/utils/icons';
 import { useTheme } from '@/utils/theme';
 import type { ThemeKey } from '@/utils/theme';
 
@@ -1596,36 +1310,34 @@ const {
   skillsCatalog,
   thinkingIntervalDefault,
   thinkingIntervalRange,
-  recentConversationsPromptLimitRange,
-  experiments
+  recentConversationsPromptLimitRange
 } = storeToRefs(personalization);
 
-const baseTabs = [
-  { id: 'preferences', label: '个性化设置', description: '称呼、语气与注意事项' },
-  { id: 'model', label: '模型偏好', description: '默认模型选择' },
-  { id: 'workspace', label: '工作区设置', description: '默认权限模式' },
-  { id: 'usage', label: '用量统计', description: '对话累计数据' },
-  { id: 'app-update', label: '软件更新', description: '检查并下载新版 APK' },
-  { id: 'behavior', label: '智能体行为', description: '交流风格与界面表现' },
-  { id: 'skills', label: 'Skills', description: '可用技能开关' },
-  { id: 'image', label: '图片压缩', description: '发送图片的尺寸策略' },
-  { id: 'theme', label: '主题切换', description: '经典 / 明亮 / 夜间' },
-  { id: 'tutorial', label: '新手教程', description: '功能引导与使用说明' }
-] as const;
+type IconKey = keyof typeof ICONS;
 
 type PersonalTab =
+  | 'general'
   | 'preferences'
   | 'model'
+  | 'appearance'
   | 'workspace'
-  | 'usage'
-  | 'app-update'
-  | 'behavior'
-  | 'skills'
-  | 'image'
-  | 'theme'
-  | 'tutorial'
-  | 'mcp-config'
-  | 'admin-monitor';
+  | 'context'
+  | 'tools'
+  | 'files'
+  | 'data'
+  | 'admin';
+
+const baseTabs = [
+  { id: 'general', label: '常规', icon: 'settings' },
+  { id: 'preferences', label: '个性化', icon: 'userPen' },
+  { id: 'model', label: '模型与思考', icon: 'brainCog' },
+  { id: 'appearance', label: '外观与显示', icon: 'monitor' },
+  { id: 'workspace', label: '工作区与权限', icon: 'folder' },
+  { id: 'context', label: '上下文', icon: 'chatBubble' },
+  { id: 'tools', label: '工具与 Skills', icon: 'wrench' },
+  { id: 'files', label: '文件与图片', icon: 'file' },
+  { id: 'data', label: '数据管理', icon: 'layers' }
+] as const satisfies ReadonlyArray<{ id: PersonalTab; label: string; icon: IconKey }>;
 
 const sessionRole = ref('');
 const sessionHostMode = ref(false);
@@ -1651,17 +1363,31 @@ const isAppShell = computed(() => {
 });
 
 const personalTabs = computed(() => {
-  const tabs = baseTabs.filter((tab) => (tab.id === 'app-update' ? isAppShell.value : true));
-  if (showMcpConfigEntry.value) {
-    tabs.push({ id: 'mcp-config' as const, label: 'MCP 配置', description: 'Server 管理' });
-  }
+  const tabs: Array<{ id: PersonalTab; label: string; icon: IconKey }> = [...baseTabs];
   if (isAdmin.value) {
-    tabs.push({ id: 'admin-monitor' as const, label: '管理员监控', description: '系统总览' });
+    tabs.push({ id: 'admin', label: '管理员', icon: 'wrench' });
   }
   return tabs;
 });
 
-const activeTab = ref<PersonalTab>('preferences');
+const activeTab = ref<PersonalTab>('general');
+const activeDropdown = ref<string | null>(null);
+
+const activeTabLabel = computed(() => {
+  return personalTabs.value.find((tab) => tab.id === activeTab.value)?.label || '常规';
+});
+
+const toggleDropdown = (key: string) => {
+  activeDropdown.value = activeDropdown.value === key ? null : key;
+};
+
+const closeDropdown = () => {
+  activeDropdown.value = null;
+};
+
+const settingsTabIconStyle = (icon: IconKey) => ({
+  '--icon-src': `url(${ICONS[icon]})`
+});
 
 type RunModeValue = 'fast' | 'thinking' | 'deep' | null;
 type PermissionModeValue = 'readonly' | 'approval' | 'auto_approval' | 'unrestricted';
@@ -1692,7 +1418,11 @@ const permissionModeOptions: Array<{
 }> = [
   { id: 'readonly', label: '只读', desc: '仅允许读取/检索类工具，修改操作将被拒绝。' },
   { id: 'approval', label: '批准', desc: '对工作区文件进行修改的工具需人工批准后执行。' },
-  { id: 'auto_approval', label: '自动审核', desc: '工作区内写入直通；高风险操作由后台审核智能体自动审批。' },
+  {
+    id: 'auto_approval',
+    label: '自动审核',
+    desc: '工作区内写入直通；高风险操作由后台审核智能体自动审批。'
+  },
   { id: 'unrestricted', label: '无限制', desc: '工具按常规流程直接执行。' }
 ];
 
@@ -1728,6 +1458,42 @@ const imageCompressionOptions = [
   { id: '540p', label: '540p', desc: '最长边不超过 540p 等比缩放' }
 ] as const;
 
+const defaultModelLabel = computed(() => {
+  return (
+    filteredModelOptions.value.find((option: any) => option.value === form.value.default_model)
+      ?.label || '未设置'
+  );
+});
+
+const runModeLabel = computed(() => {
+  return runModeOptions.find((option) => isRunModeActive(option.value))?.label || '未设置';
+});
+
+const permissionModeLabel = computed(() => {
+  return (
+    permissionModeOptions.find((option) => option.id === form.value.default_permission_mode)
+      ?.label || '未设置'
+  );
+});
+
+const imageCompressionLabel = computed(() => {
+  return (
+    imageCompressionOptions.find((option) => option.id === form.value.image_compression)?.label ||
+    '未设置'
+  );
+});
+
+const communicationStyleLabel = computed(() => {
+  return form.value.communication_style === 'human_like' ? '拟人' : '默认';
+});
+
+const blockDisplayLabel = computed(() => {
+  return (
+    blockDisplayOptions.find((option) => option.value === form.value.block_display_mode)?.label ||
+    '堆叠动画'
+  );
+});
+
 const usageSummary = ref({
   total_input_tokens: 0,
   total_output_tokens: 0,
@@ -1818,23 +1584,6 @@ const appCurrentVersionText = computed(() => {
   return appCurrentVersionName.value || '未知';
 });
 
-const appLatestVersionText = computed(() => {
-  if (!appUpdateInfo.value) return '--';
-  return `${appUpdateInfo.value.latestVersionName || '未知'}`;
-});
-
-const appLatestFileSizeText = computed(() => {
-  const bytes = Number(appUpdateInfo.value?.fileSizeBytes || 0);
-  if (!bytes) return '--';
-  const mb = bytes / 1024 / 1024;
-  return `${mb.toFixed(mb >= 100 ? 0 : 1)} MB`;
-});
-
-const appUpdateChangelogText = computed(() => {
-  const text = (appUpdateInfo.value?.changelog || '').trim();
-  return text || '';
-});
-
 const appHasUpdate = computed(() => {
   if (!appUpdateInfo.value) return false;
   if (typeof appUpdateInfo.value.hasUpdate === 'boolean') return appUpdateInfo.value.hasUpdate;
@@ -1945,12 +1694,12 @@ onMounted(async () => {
 watch(
   () => [activeTab.value, visible.value],
   ([tab, isVisible]) => {
-    if (isVisible && tab === 'usage') {
+    if (isVisible && tab === 'data') {
       fetchUsageSummary();
     }
     if (
       isVisible &&
-      tab === 'app-update' &&
+      tab === 'general' &&
       isAppShell.value &&
       !appUpdateInfo.value &&
       !appUpdateChecking.value
@@ -1962,6 +1711,7 @@ watch(
 
 const setActiveTab = (tab: PersonalTab) => {
   activeTab.value = tab;
+  closeDropdown();
 };
 
 const startTutorial = () => {
@@ -2019,6 +1769,36 @@ const setCommunicationStyle = (value: 'default' | 'human_like') => {
   personalization.setCommunicationStyle(value);
 };
 
+const selectDefaultModel = (value: string) => {
+  setDefaultModel(value);
+  closeDropdown();
+};
+
+const selectDefaultRunMode = (value: RunModeValue) => {
+  setDefaultRunMode(value);
+  closeDropdown();
+};
+
+const selectDefaultPermissionMode = (value: PermissionModeValue) => {
+  setDefaultPermissionMode(value);
+  closeDropdown();
+};
+
+const selectCommunicationStyle = (value: 'default' | 'human_like') => {
+  setCommunicationStyle(value);
+  closeDropdown();
+};
+
+const selectImageCompression = (value: (typeof imageCompressionOptions)[number]['id']) => {
+  personalization.setImageCompression(value);
+  closeDropdown();
+};
+
+const selectBlockDisplayMode = (mode: 'traditional' | 'stacked' | 'minimal') => {
+  handleBlockDisplayModeChange(mode);
+  closeDropdown();
+};
+
 const checkModeModelConflict = (mode: RunModeValue, model: string | null): boolean => {
   const found = (filteredModelOptions.value || []).find((item: any) => item.value === model);
   const warnings: string[] = [];
@@ -2187,13 +1967,26 @@ const themeOptions: Array<{ id: ThemeKey; label: string; desc: string; swatches:
 
 const activeTheme = ref<ThemeKey>(loadTheme());
 
+const themeLabel = computed(() => {
+  return themeOptions.find((option) => option.id === activeTheme.value)?.label || '经典';
+});
+
 // 监听store中的theme变化，同步到activeTheme（用于从后端加载主题后更新UI）
-watch(() => personalization.form.theme, (newTheme) => {
-  if (newTheme && newTheme !== activeTheme.value) {
-    activeTheme.value = newTheme as ThemeKey;
-    setTheme(newTheme as ThemeKey);
-  }
-}, { immediate: true });
+watch(
+  () => personalization.form.theme,
+  (newTheme) => {
+    if (newTheme && newTheme !== activeTheme.value) {
+      activeTheme.value = newTheme as ThemeKey;
+      setTheme(newTheme as ThemeKey);
+    }
+  },
+  { immediate: true }
+);
+
+const selectThemeOption = (theme: ThemeKey) => {
+  applyThemeOption(theme);
+  closeDropdown();
+};
 
 const applyThemeOption = async (theme: ThemeKey) => {
   activeTheme.value = theme;
@@ -2219,179 +2012,714 @@ const applyThemeOption = async (theme: ThemeKey) => {
 </script>
 
 <style scoped>
-.compression-custom-grid {
-  margin-top: 10px;
-  display: grid;
-  gap: 10px;
+.settings-redesign-card {
+  --settings-floating-menu-bg: #ffffff;
+  --settings-floating-menu-hover: rgba(0, 0, 0, 0.055);
+  --settings-floating-menu-shadow: none;
+  position: relative;
+  width: min(70vw, calc(100vw - 24px));
+  height: min(80vh, calc(100vh - 24px));
+  padding: 38px 42px 44px;
+  border-radius: 32px;
+  overflow: visible;
+  background: var(--theme-surface-soft, var(--claude-panel));
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  box-shadow: none;
 }
 
-.compression-input-row {
+:global(html[data-theme='dark']) .settings-redesign-card,
+:global(body[data-theme='dark']) .settings-redesign-card {
+  --settings-floating-menu-bg: #1a1a1a;
+  --settings-floating-menu-hover: rgba(255, 255, 255, 0.08);
+  --settings-floating-menu-shadow: none;
+}
+
+.settings-close-button {
+  position: absolute;
+  top: 31px;
+  left: 45px;
+  width: 42px;
+  height: 42px;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--claude-text);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.settings-close-button:hover {
+  background: var(--theme-hover-bg, rgba(0, 0, 0, 0.06));
+}
+
+.settings-close-button svg {
+  width: 25px;
+  height: 25px;
+  stroke-width: 2.15;
+}
+
+.settings-redesign-body,
+.settings-redesign-form {
+  height: 100%;
+  min-height: 0;
+}
+
+.settings-redesign-layout {
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(190px, 2fr) minmax(0, 8fr);
+  column-gap: 34px;
+  min-height: 0;
+}
+
+.settings-redesign-tabs {
+  margin-top: 68px;
+  height: calc(100% - 68px);
+  padding-right: 28px;
+  border-right: 1px solid var(--theme-control-border, var(--claude-border));
   display: flex;
   flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.settings-redesign-tab {
+  width: 100%;
+  height: 47px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--claude-text);
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+}
+
+.settings-redesign-tab:hover {
+  background: var(--theme-hover-bg, rgba(0, 0, 0, 0.055));
+}
+
+.settings-redesign-tab.active {
+  background: var(--theme-active-bg, rgba(0, 0, 0, 0.078));
+  font-weight: 640;
+}
+
+.settings-tab-icon {
+  --icon-size: 20px;
+  flex: 0 0 auto;
+}
+
+.settings-tab-icon--chat {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+
+.settings-tab-icon--chat svg {
+  width: 30px;
+  height: 30px;
+}
+
+.settings-redesign-content {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.settings-redesign-content-header {
+  height: 46px;
+  flex: 0 0 46px;
+  display: flex;
+  align-items: center;
+}
+
+.settings-redesign-content-header h2 {
+  margin: 0;
+  color: var(--claude-text);
+  font-size: 28px;
+  line-height: 1;
+  letter-spacing: -0.045em;
+  font-weight: 730;
+}
+
+.settings-redesign-title-line {
+  height: 1px;
+  background: var(--theme-control-border, var(--claude-border));
+  margin: 22px 0 12px;
+  flex: 0 0 1px;
+}
+
+.settings-redesign-scroll {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: visible;
+  padding-right: 18px;
+  padding-bottom: 80px;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.settings-redesign-scroll:has(.settings-select-wrap.open) {
+  overflow: visible;
+}
+
+.settings-redesign-tabs::-webkit-scrollbar,
+.settings-redesign-scroll::-webkit-scrollbar,
+.settings-floating-menu::-webkit-scrollbar,
+.app-update-changelog-content::-webkit-scrollbar {
+  display: none;
+}
+
+.settings-floating-menu,
+.app-update-changelog-content {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.settings-page {
+  max-width: 900px;
+  min-height: 0;
+}
+
+.settings-select-row,
+.settings-input-row,
+.settings-list-row,
+.settings-action-row,
+.settings-toggle-row {
+  min-height: 64px;
+  border-bottom: 1px solid var(--theme-control-border, var(--claude-border));
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 18px;
+  padding: 11px 0;
+  color: var(--claude-text);
+}
+
+.settings-list-row.tall,
+.settings-input-row.stackable {
+  align-items: flex-start;
+}
+
+.settings-list-row.tall {
+  grid-template-columns: minmax(180px, 1fr) minmax(0, 360px);
+}
+
+.settings-row-copy {
+  min-width: 0;
+  display: block;
+}
+
+.settings-row-title {
+  display: block;
+  color: var(--claude-text);
+  font-size: 14px;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  line-height: 1.32;
+}
+
+.settings-row-desc {
+  display: block;
+  margin-top: 3px;
+  color: var(--claude-text-secondary);
+  font-size: 12.5px;
+  line-height: 1.38;
+}
+
+.settings-select-wrap {
+  position: relative;
+  display: inline-flex;
+  justify-self: end;
+}
+
+.settings-select-button {
+  width: max-content;
+  min-width: 0;
+  height: 36px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--claude-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 8px 0 10px;
+  cursor: pointer;
+  font-size: 15px;
+  white-space: nowrap;
+}
+
+.settings-select-button:hover {
+  background: var(--theme-hover-bg, rgba(0, 0, 0, 0.055));
+}
+
+.settings-select-button .select-chevron {
+  width: 12px;
+  height: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+
+.settings-select-button .select-chevron::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-1.5px) rotate(45deg);
+}
+
+.settings-select-wrap.open .settings-select-button .select-chevron {
+  transform: rotate(180deg);
+}
+
+.settings-floating-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 10px);
+  width: 300px;
+  max-height: min(420px, 60vh);
+  overflow: auto;
+  padding: 6px;
+  border-radius: 20px;
+  background: var(--settings-floating-menu-bg);
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  box-shadow: var(--settings-floating-menu-shadow);
+  opacity: 1;
+  backdrop-filter: none;
+  z-index: 10000;
+  display: none;
+}
+
+.settings-select-wrap.open .settings-floating-menu {
+  display: block;
+}
+
+.settings-floating-menu.dark {
+  background: #1a1a1a !important;
+  box-shadow: none !important;
+}
+
+.settings-floating-menu.dark .settings-menu-option:hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+:global(html[data-theme='dark']) :global(.settings-floating-menu),
+:global(body[data-theme='dark']) :global(.settings-floating-menu) {
+  background: #1a1a1a !important;
+  box-shadow: none !important;
+}
+
+:global(html[data-theme='dark']) :global(.settings-menu-option:hover),
+:global(body[data-theme='dark']) :global(.settings-menu-option:hover) {
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.settings-menu-option {
+  width: 100%;
+  min-height: 38px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--claude-text);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 22px;
+  row-gap: 0;
+  column-gap: 8px;
+  align-items: center;
+  padding: 7px 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.settings-menu-option:hover {
+  background: var(--settings-floating-menu-hover);
+}
+
+.settings-menu-option:disabled {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.settings-menu-option strong {
+  grid-column: 1;
+  grid-row: 1;
+  display: block;
+  color: var(--claude-text);
+  font-size: 15px;
+  font-weight: 550;
+  letter-spacing: -0.01em;
+  min-width: 0;
+}
+
+.settings-menu-option span {
+  grid-column: 1;
+  grid-row: 2;
+  display: block;
+  margin-top: 0;
+  color: var(--claude-text-secondary);
+  font-size: 11px;
+  line-height: 1.15;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-menu-option svg {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: center;
+  width: 21px;
+  height: 21px;
+  fill: none;
+  stroke: var(--claude-text);
+  stroke-width: 2.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0;
+}
+
+.settings-menu-option.selected svg {
+  opacity: 1;
+}
+
+.settings-input-row input,
+.settings-add-row input,
+.settings-number-row input,
+.settings-compression-grid input {
+  height: 38px;
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--claude-text);
+  padding: 0 12px;
+  outline: none;
+  font-size: 13px;
+}
+
+.settings-input-row > input {
+  width: min(360px, 40vw);
+  text-align: right;
+}
+
+.settings-input-row input:focus,
+.settings-add-row input:focus,
+.settings-number-row input:focus,
+.settings-compression-grid input:focus {
+  border-color: var(--claude-text-secondary);
+  box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.11);
+}
+
+.settings-input-stack {
+  width: min(430px, 46vw);
+  display: grid;
+  gap: 8px;
+  justify-self: end;
+}
+
+.settings-input-stack.wide {
+  width: min(360px, 42vw);
+}
+
+.settings-input-stack input {
+  width: 100%;
+}
+
+.settings-chip-row {
+  display: flex;
+  flex-wrap: wrap;
   gap: 6px;
+}
+
+.settings-chip-row.right {
+  justify-content: flex-end;
+}
+
+.settings-chip-row button,
+.settings-number-row button,
+.settings-add-row button,
+.settings-secondary-button,
+.settings-primary-button {
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  border-radius: 999px;
+  background: transparent;
+  color: var(--claude-text);
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.settings-chip-row button:hover,
+.settings-number-row button:hover,
+.settings-add-row button:hover,
+.settings-secondary-button:hover {
+  background: var(--theme-hover-bg, rgba(0, 0, 0, 0.055));
+}
+
+.settings-chip-row button.active,
+.settings-primary-button {
+  border-color: var(--claude-accent);
+  background: var(--claude-accent);
+  color: #fff;
+}
+
+.settings-secondary-button.danger {
+  color: var(--claude-warning, #c85f45);
+}
+
+.settings-inline-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.settings-inline-actions.right {
+  margin-top: 10px;
+}
+
+.settings-mini-status {
   color: var(--claude-text-secondary);
   font-size: 12px;
 }
 
-.compression-input-row input {
-  border: 1px solid var(--claude-border);
-  border-radius: 10px;
-  background: var(--claude-panel);
+.settings-mini-status.warning {
+  color: var(--claude-warning, #c85f45);
+}
+
+.settings-add-row,
+.settings-number-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.settings-add-row input,
+.settings-number-row input {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.settings-consideration-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 6px;
+}
+
+.settings-consideration-list li {
+  min-height: 34px;
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  border-radius: 12px;
+  padding: 0 8px;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 28px;
+  gap: 8px;
+  align-items: center;
   color: var(--claude-text);
-  padding: 8px 10px;
   font-size: 13px;
 }
 
-.compression-custom-hint {
-  margin-top: 8px;
-}
-
-.compression-actions-row {
-  margin-top: 4px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.compression-reset-btn {
-  border: 1px solid var(--claude-border);
-  border-radius: 10px;
-  padding: 6px 12px;
-  background: var(--claude-panel);
-  color: var(--claude-text);
-  font-size: 12px;
+.settings-consideration-list button {
+  border: 0;
+  background: transparent;
+  color: var(--claude-text-secondary);
   cursor: pointer;
-  transition:
-    transform 0.18s ease,
-    box-shadow 0.18s ease;
 }
 
-.compression-reset-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 8px 18px rgba(61, 57, 41, 0.14);
+.drag-handle {
+  color: var(--claude-text-secondary);
+  cursor: grab;
+}
+
+.settings-toggle-row {
+  cursor: pointer;
+  position: relative;
+}
+
+.settings-toggle-row input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.settings-toggle-row .fancy-check {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: none;
+  transition: opacity 0.2s ease;
+}
+
+.settings-toggle-row .fancy-check svg {
+  width: 22px;
+  height: 22px;
+  overflow: visible;
+}
+
+.fancy-path {
+  fill: none;
+  stroke: var(--claude-text-secondary);
+  stroke-width: 5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition:
+    stroke-dasharray 0.5s ease,
+    stroke-dashoffset 0.5s ease,
+    stroke 0.2s ease;
+  stroke-dasharray: 241 9999999;
+  stroke-dashoffset: 0;
+}
+
+.settings-toggle-row input:checked + .fancy-check .fancy-path {
+  stroke: var(--claude-accent);
+  stroke-dasharray: 70.5096664428711 9999999;
+  stroke-dashoffset: -262.2723388671875;
+}
+
+.settings-group-block {
+  border-bottom: 1px solid var(--theme-control-border, var(--claude-border));
+  padding: 14px 0 16px;
+}
+
+.settings-group-title {
+  margin-bottom: 6px;
+}
+
+.settings-toggle-row.inner {
+  min-height: 48px;
+  padding: 7px 0 7px 18px;
+  border-bottom: 0;
+}
+
+.settings-check-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 26px;
+}
+
+.settings-compression-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 14px;
+  margin-top: 10px;
+}
+
+.settings-compression-grid label {
+  display: grid;
+  gap: 5px;
+  color: var(--claude-text-secondary);
+  font-size: 12px;
+}
+
+.settings-save-bar {
+  position: absolute;
+  right: 18px;
+  bottom: 0;
+  left: 0;
+  min-height: 54px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  background: transparent;
+  pointer-events: none;
+}
+
+.settings-save-bar > * {
+  pointer-events: auto;
+}
+
+.personal-status-group {
+  min-height: 20px;
+  font-size: 12px;
+}
+
+.status.success {
+  color: var(--claude-success);
+}
+
+.status.error,
+.usage-summary-error {
+  color: var(--claude-warning);
 }
 
 .usage-summary-page {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  padding: 12px 4px 24px;
-  height: 100%;
+  display: block;
+  padding: 0;
 }
 
+.settings-stats-card,
 .usage-summary-card {
   width: 100%;
   max-width: 720px;
-  padding: 0 8px;
-  min-height: 320px;
+  padding: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 18px;
-  flex: 1 1 auto;
-  min-height: 0;
-}
-
-.usage-summary-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  flex-wrap: wrap;
+  gap: 14px;
 }
 
 .usage-summary-header h3 {
   margin: 4px 0 6px;
-  font-size: 24px;
+  font-size: 20px;
 }
 
 .usage-summary-eyebrow {
   margin: 0;
-  font-size: 12px;
+  font-size: 11px;
   color: var(--claude-accent-strong);
-  letter-spacing: 0.18em;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
 }
 
-.usage-summary-desc {
+.usage-summary-desc,
+.usage-summary-note,
+.usage-summary-meta {
   margin: 0;
   color: var(--claude-text-secondary);
-}
-
-.usage-summary-note {
-  margin: 6px 0 0;
   font-size: 12px;
-  color: var(--claude-text-tertiary);
-}
-
-.usage-summary-refresh {
-  border: 1px solid var(--claude-border);
-  border-radius: 12px;
-  padding: 6px 14px;
-  background: var(--claude-panel);
-  color: var(--claude-text);
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.18s ease,
-    box-shadow 0.18s ease;
-  box-shadow: 0 6px 14px rgba(61, 57, 41, 0.12);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.usage-summary-refresh:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-
-.usage-summary-refresh:not(:disabled):hover {
-  transform: translateY(-1px);
-  box-shadow: 0 14px 28px rgba(61, 57, 41, 0.22);
-}
-
-.app-update-page .app-update-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.app-update-changelog {
-  border: 1px solid var(--claude-border);
-  border-radius: 14px;
-  padding: 12px;
-  background: var(--claude-panel);
-  max-height: 300px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.app-update-changelog-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--claude-text);
-  margin-bottom: 8px;
-}
-
-.app-update-changelog-content {
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-size: 12px;
-  line-height: 1.55;
-  color: var(--claude-text-secondary);
-  flex: 1 1 auto;
-  min-height: 0;
-  max-height: 240px;
-  overflow: auto;
 }
 
 .usage-summary-grid {
   display: grid;
-  gap: 14px;
+  gap: 10px;
 }
 
 .usage-summary-grid--tokens {
@@ -2403,13 +2731,10 @@ const applyThemeOption = async (theme: ThemeKey) => {
 }
 
 .usage-summary-item {
-  padding: 14px 16px;
-  border-radius: 16px;
-  border: 1px solid var(--claude-border);
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--theme-control-border, var(--claude-border));
   background: transparent;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
 }
 
 .usage-summary-item .label {
@@ -2418,7 +2743,8 @@ const applyThemeOption = async (theme: ThemeKey) => {
 }
 
 .usage-summary-item .value {
-  font-size: 22px;
+  margin-top: 4px;
+  font-size: 20px;
   font-weight: 600;
   color: var(--claude-text);
 }
@@ -2431,190 +2757,101 @@ const applyThemeOption = async (theme: ThemeKey) => {
   color: var(--claude-warning);
 }
 
-.usage-summary-item .value--accent {
-  color: var(--claude-text);
-}
-
 .usage-summary-meta {
-  font-size: 12px;
-  color: var(--claude-text-secondary);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
-  margin-top: auto;
 }
 
-.usage-summary-error {
-  color: var(--claude-warning);
+.usage-summary-refresh {
+  border: 1px solid var(--theme-control-border, var(--claude-border));
+  border-radius: 999px;
+  padding: 7px 14px;
+  background: transparent;
+  color: var(--claude-text);
+  font-size: 12px;
+  cursor: pointer;
 }
 
 .admin-monitor-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  align-items: center;
-  min-height: 320px;
-  padding: 12px 0 24px;
+  display: block;
+  padding: 0;
 }
 
-.admin-monitor-panel {
-  width: 100%;
-  max-width: 640px;
-  padding: 28px 32px;
-  border-radius: 26px;
-  border: 1px solid var(--theme-control-border, var(--claude-border));
-  background: linear-gradient(145deg, var(--theme-surface-soft), var(--theme-surface-muted));
-  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-}
-
-.admin-monitor-panel.secondary {
-  background: linear-gradient(145deg, var(--theme-surface-muted), var(--theme-surface-soft));
-}
-
-.admin-monitor-heading {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.admin-monitor-title-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.admin-monitor-title-row h3 {
-  margin: 0;
-  font-size: 24px;
-}
-
-.admin-monitor-desc {
-  margin: 0;
-  color: var(--claude-text-secondary);
-  max-width: 460px;
-}
-
-.admin-monitor-chip {
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--theme-chip-border, var(--claude-border));
-  font-size: 12px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--claude-text-secondary);
-  background: var(--theme-chip-bg, var(--claude-panel));
-}
-
-.admin-monitor-eyebrow {
-  font-size: 12px;
-  color: var(--claude-accent-strong);
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.admin-monitor-highlights {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.admin-monitor-tag {
-  padding: 6px 14px;
-  border-radius: 999px;
-  border: 1px dashed var(--theme-chip-border, var(--claude-border));
-  background: var(--theme-chip-bg, var(--claude-panel));
-  font-size: 13px;
-  color: var(--claude-text-secondary);
-}
-
-.section-note {
-  margin: 6px 0 14px;
-  font-size: 12px;
-  color: var(--claude-text-secondary);
-}
-
-.admin-monitor-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.admin-monitor-button {
-  border: none;
-  border-radius: 16px;
-  padding: 11px 28px;
-  background: linear-gradient(135deg, var(--claude-accent), var(--claude-accent-strong));
-  color: #fff;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
-  cursor: pointer;
-  transition:
-    transform 0.18s ease,
-    box-shadow 0.18s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-.admin-monitor-button.ghost {
-  background: transparent;
-  color: var(--claude-text);
-  border: 1px dashed var(--theme-chip-border, var(--claude-border));
-  box-shadow: none;
-}
-
-.admin-monitor-button:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--theme-shadow-mid, var(--claude-shadow));
-}
-
-.admin-monitor-button:active {
-  transform: translateY(0);
-  box-shadow: var(--theme-shadow-soft, var(--claude-shadow));
-}
-
-.admin-monitor-hint {
-  margin: 0;
-  font-size: 13px;
-  color: var(--claude-text-secondary);
-}
-
-@media (max-width: 640px) {
-  .usage-summary-refresh {
-    width: 100%;
-    justify-content: center;
+@media (max-width: 900px) {
+  .settings-redesign-card {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+    padding: 30px 24px;
   }
 
+  .settings-close-button {
+    left: 27px;
+    top: 24px;
+  }
+
+  .settings-redesign-layout {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+
+  .settings-redesign-tabs {
+    margin-top: 68px;
+    height: auto;
+    padding-right: 0;
+    padding-bottom: 12px;
+    border-right: 0;
+    border-bottom: 1px solid var(--theme-control-border, var(--claude-border));
+    flex-direction: row;
+    overflow: auto;
+    scrollbar-width: none;
+  }
+
+  .settings-redesign-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .settings-redesign-tab {
+    width: auto;
+    white-space: nowrap;
+  }
+
+  .settings-redesign-content {
+    padding-top: 18px;
+  }
+
+  .settings-select-row,
+  .settings-input-row,
+  .settings-list-row,
+  .settings-action-row,
+  .settings-toggle-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .settings-select-wrap,
+  .settings-input-stack,
+  .settings-input-row > input {
+    justify-self: stretch;
+    width: 100%;
+  }
+
+  .settings-select-button {
+    margin-left: auto;
+  }
+
+  .settings-floating-menu {
+    width: min(340px, calc(100vw - 48px));
+  }
+
+  .settings-check-grid,
+  .settings-compression-grid,
   .usage-summary-grid--tokens,
   .usage-summary-grid--counts {
     grid-template-columns: 1fr;
   }
-
-  .admin-monitor-panel {
-    padding: 24px;
-  }
-
-  .admin-monitor-actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .admin-monitor-button {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .admin-monitor-hint {
-    text-align: center;
-  }
 }
 </style>
diff --git a/static/src/utils/icons.ts b/static/src/utils/icons.ts
index ca0d628..c9f69df 100644
--- a/static/src/utils/icons.ts
+++ b/static/src/utils/icons.ts
@@ -1,10 +1,12 @@
 export const ICONS = Object.freeze({
+  alignLeft: '/static/icons/align-left.svg',
   bot: '/static/icons/bot.svg',
   book: '/static/icons/book.svg',
   brain: '/static/icons/brain.svg',
   brainCog: '/static/icons/brain-cog.svg',
   camera: '/static/icons/camera.svg',
   check: '/static/icons/check.svg',
+  chatBubble: '/static/icons/chat-bubble.svg',
   checkbox: '/static/icons/checkbox.svg',
   circleAlert: '/static/icons/circle-alert.svg',
   clipboard: '/static/icons/clipboard.svg',