From 16e24cfc9596f486a6e3ccb50ced1aeee8a48672 Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Sat, 27 Jun 2026 16:54:31 +0800
Subject: [PATCH] ui(frontend): polish channel cards and use official QQBot
 icon

Replace the placeholder QQBot logo with the official documentation favicon and enlarge channel card badges for clearer platform recognition.
---
 frontend/src/assets/img/im/qqbot.png          | Bin 0 -> 1546 bytes
 frontend/src/assets/img/im/qqbot.svg          |   1 -
 .../src/components/AgentEmbedChannelPanel.vue | 591 ++++++--------
 frontend/src/components/IMChannelPanel.vue    | 732 ++++++++----------
 .../components/css/channel-panel-list.less    |  12 +-
 frontend/src/components/menu.vue              |   2 +-
 6 files changed, 557 insertions(+), 781 deletions(-)
 create mode 100644 frontend/src/assets/img/im/qqbot.png
 delete mode 100644 frontend/src/assets/img/im/qqbot.svg

diff --git a/frontend/src/assets/img/im/qqbot.png b/frontend/src/assets/img/im/qqbot.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c9a443c3f0eb9a9438ff6170613cdd73c4c2428
GIT binary patch
literal 1546
zcmYLJ3p5jI9RJp4ktL32Bab{<B0biF6cgHREP1S1)UuE}yIBvkq^#sMNgh#_C3C%o
z@{Ss3OOjM`L$T48M_p2Cn4~-RcDmm=zwh@uzyI(1pYxsnIsYUt{GR2@kjnr7%W+s&
zZzY>9LKUvOPcj%^l>`gLcwzv!o2EX0L}jr^!FqcFz_0?~!X*Ial-7kY08VcJ-~$-|
zha3R(Bl7O=cT^UlgNe8hPfuX2)T#gmL4w5&5G8g&41Z~N2ns;|^_KvU5C&jBGk7I0
z9<maPZ~kK_2l6wm^f*g?rA;}||Ftp=B7E;Jc2$eO`kw?qL%0Y?);bMC<)7wpt{7jU
z+M@$u#{%7S7P{U&urcs7e?`<U)g`%<iA+>5UUzkP$pqI+bqgEnwx;&j9MfG*NFhRP
zkr(|*g(*yq?sqQtcUVbrt4d9+DXAui`d1r));T3H;^*G{_VL`_&a=2y?GZ_?eg8~X
z-pLX8Y(B1N_<TYjJcZ|FQ@C(YGfd!M@38717dlqkTfoAb)xsba+r8)15Ck%BrH$^T
zwSI9^si>O~A2WT7hEHq}5kF*eMW;ZgobTA1F(e(}1@&;DUWnPMgdTQ$&3(bF!+`a0
zpaa0JahFpPtpngmSEdZ+yw*)#mqv%&+i_ZtL35hcbgdMlwJF>^<g%`|#4c_(eUeCI
zi6bF(uS?&9wH1gRG?i-&al`e=NBGxp(Q52hEr~6q&=XAA9v4MovpBjX#?L0F1ky~d
z#8|!wo43k7Xj+Lj(WuvMd&!kH+#2~}S?rh~pMsA5z-2)D3e^G<6LODEV6nAPV@8E?
zRQ@16=K01>`ufK)%!a%Z)#sA3>7gF%&fUaN$=kEu)(FnN46g}JE1~jzp|^vxW}r=L
zZ288=Q#O(PZZNv~%+2&n`&-B9$qZ_hWc*o1ejf@rtBB`dg6~H)LsrR}v;|WL((t>Z
zmp6U0d&3y%*vcdtyL#?hZ5eeNCwbZ~v{C@Z_%rk;xOTZ{4H0QOuOi;aF8OoSba>I&
z7ud_8cppa21F5^!=)T5|BXh8C>}jJAMfbQoD^?J+_emF9dS}FrRgk5osHo4#WEk&D
z$scvR2l3^^jXvy)YN&~Ar`DP8c{m$ft;jGX<v{rgA^L>L%^uxG_&_l71(lR)7Wm{-
z6T<kdf`+-%V6)U=;tc9BrMN|5&>D-*z5YFRwvX~WXlJ;^d1JN)=jEw0glYwRXQaON
zjMj8Ia%vzQmbCM>p&J>izsV!z49@}CLVxXK21Oncw%6SDCioO>tTw^pU*6@UCN<rd
zTpmrJy6CYd-|a^zije_Jd)p{F5Y2%O;oezQltkzwE!}0hTaMl#L0!*_@6U~5RykM5
zn)Cuk#R?TCZ;j12@)Z=o=ip_c3tEomAo=feuM5#`Z=cIt(023c1F%77|8OhYvZNvQ
z7H+_LHH~Pjdq?_<CfT?u@S2Pl85E=s%3NSy)q4{R;wgEfgWqHfX6n<=Y29rY*5{~@
z?s`cbb+Cm^Cm7KtV3eFtV~fM6GkklY;qkSi@F#xllgx^TP2)62ra!CA)Hrjf2qBMi
znn!~Tc5kjE_{_^mn4;F422y*G)t7bK22dV`tR^jS`x*f<nIv(d$Bn6G@;l9RN{(zV
zlevVF59#+6Sw7OIpQVGt40opdhA^0Zd*yT6>}U{Ie?U6D8o(<<4fLpQD`cB7{Sz^l
ze?+bz=i!z$ui9n^L0v!BDZRK*-ce<w|2~A7I7{aRjXsFfC=U+}IyAJ`cXoy6ouiiY
zOk~%wdgX{Gr?>FthkPZ;$${?>BCo3g{2#wbXD)pX7JG~yP?%(i%*zXco3qn|uc{&2
z@oBWsZ3CS>)R;bIC5Ino@qtBGZ~Ov6uF)Dhs0|EcZ@xW0AxgNkQK|rWuK6^MAT|7%
zx?^GhFQ`|8<u_wCwVi#Qgyn4jYZ?VTTJmK}8ZMSu8dacE?BTt2VtW(LLRoXm9KDhi
b5qNb$rQ0s<Grpgzx40y6Zg|%U7c%o7I%lr*

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/img/im/qqbot.svg b/frontend/src/assets/img/im/qqbot.svg
deleted file mode 100644
index 26c08d80..00000000
--- a/frontend/src/assets/img/im/qqbot.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><circle cx="128" cy="128" r="120" fill="#12B7F5"/><ellipse cx="128" cy="124" fill="#fff" rx="73" ry="82"/><circle cx="101" cy="105" r="10" fill="#1F2937"/><circle cx="155" cy="105" r="10" fill="#1F2937"/><path fill="#F59E0B" d="M128 120c-14 0-30 8-30 20c0 8 12 15 30 15s30-7 30-15c0-12-16-20-30-20Z"/><path fill="#EF4444" d="M85 157c11 24 28 36 43 36s32-12 43-36c-13 10-27 15-43 15s-30-5-43-15Z"/><path fill="#1F2937" d="M71 121c-10 2-17 10-17 20c0 13 11 23 24 23c3 0 6-1 9-2c-7-12-12-26-16-41Zm114 0c-4 15-9 29-16 41c3 1 6 2 9 2c13 0 24-10 24-23c0-10-7-18-17-20Z" opacity=".12"/></svg>
diff --git a/frontend/src/components/AgentEmbedChannelPanel.vue b/frontend/src/components/AgentEmbedChannelPanel.vue
index ced5a529..ba28ca19 100644
--- a/frontend/src/components/AgentEmbedChannelPanel.vue
+++ b/frontend/src/components/AgentEmbedChannelPanel.vue
@@ -13,15 +13,10 @@
         </div>
 
         <div v-else-if="!loading" class="channel-grid">
-          <button
-            v-for="ch in channels"
-            :key="ch.id"
-            type="button"
-            class="channel-card channel-card--clickable"
-            @click="openDrawer(ch)"
-          >
+          <button v-for="ch in channels" :key="ch.id" type="button" class="channel-card channel-card--clickable"
+            @click="openDrawer(ch)">
             <div class="channel-card__badge">
-              <t-icon name="code" size="18px" />
+              <t-icon name="code" size="22px" />
             </div>
             <div class="channel-card__body">
               <div class="channel-card__header">
@@ -35,39 +30,20 @@
               </span>
             </div>
             <div v-if="authStore.hasRole('admin')" class="channel-card__actions" @click.stop>
-              <t-dropdown
-                trigger="click"
-                placement="bottom-right"
-                attach="body"
-                :options="channelMenuOptions(ch)"
-                @click="(data) => handleChannelMenuClick(data, ch)"
-              >
-                <t-button
-                  variant="text"
-                  shape="square"
-                  size="small"
-                  class="channel-card__action-btn channel-card__more"
-                  @click.stop
-                >
+              <t-dropdown trigger="click" placement="bottom-right" attach="body" :options="channelMenuOptions(ch)"
+                @click="(data) => handleChannelMenuClick(data, ch)">
+                <t-button variant="text" shape="square" size="small" class="channel-card__action-btn channel-card__more"
+                  @click.stop>
                   <template #icon><t-icon name="ellipsis" /></template>
                 </t-button>
               </t-dropdown>
-              <t-popconfirm
-                :content="$t('embedPublish.deleteConfirm')"
+              <t-popconfirm :content="$t('embedPublish.deleteConfirm')"
                 :confirm-btn="{ content: $t('common.delete'), theme: 'danger' }"
-                :cancel-btn="{ content: $t('common.cancel') }"
-                placement="bottom-right"
-                @confirm="() => removeChannel(ch.id)"
-              >
+                :cancel-btn="{ content: $t('common.cancel') }" placement="bottom-right"
+                @confirm="() => removeChannel(ch.id)">
                 <t-tooltip :content="$t('common.delete')" placement="top">
-                  <t-button
-                    theme="danger"
-                    shape="square"
-                    variant="text"
-                    size="small"
-                    class="channel-card__action-btn channel-card__delete"
-                    @click.stop
-                  >
+                  <t-button theme="danger" shape="square" variant="text" size="small"
+                    class="channel-card__action-btn channel-card__delete" @click.stop>
                     <template #icon><t-icon name="delete" /></template>
                   </t-button>
                 </t-tooltip>
@@ -75,12 +51,8 @@
             </div>
           </button>
 
-          <button
-            v-if="authStore.hasRole('admin')"
-            type="button"
-            class="channel-card channel-card--add"
-            @click="openCreate"
-          >
+          <button v-if="authStore.hasRole('admin')" type="button" class="channel-card channel-card--add"
+            @click="openCreate">
             <span class="channel-card__badge" aria-hidden="true">
               <t-icon name="add" />
             </span>
@@ -95,20 +67,10 @@
       </t-loading>
     </div>
 
-    <SettingDrawer
-      v-model:visible="showDrawer"
-      class="embed-channel-drawer"
-      :title="drawerTitle"
-      :description="drawerStepDescription"
-      icon="code"
-      storage-key="setting-drawer:embed-channel"
-      width="560px"
-      :confirm-loading="saving"
-      :confirm-text="drawerConfirmText"
-      :hide-footer="!isAdmin"
-      @confirm="handleDrawerConfirm"
-      @cancel="closeDrawer"
-    >
+    <SettingDrawer v-model:visible="showDrawer" class="embed-channel-drawer" :title="drawerTitle"
+      :description="drawerStepDescription" icon="code" storage-key="setting-drawer:embed-channel" width="560px"
+      :confirm-loading="saving" :confirm-text="drawerConfirmText" :hide-footer="!isAdmin" @confirm="handleDrawerConfirm"
+      @cancel="closeDrawer">
       <template v-if="wizardStep > 0" #footer-left>
         <t-button variant="outline" @click="prevWizardStep">
           {{ $t('datasource.back') }}
@@ -116,13 +78,8 @@
       </template>
 
       <div class="im-steps">
-        <button
-          v-for="(title, i) in stepTitles"
-          :key="i"
-          type="button"
-          :class="['im-step', { active: wizardStep === i, done: wizardStep > i }]"
-          @click="goToWizardStep(i)"
-        >
+        <button v-for="(title, i) in stepTitles" :key="i" type="button"
+          :class="['im-step', { active: wizardStep === i, done: wizardStep > i }]" @click="goToWizardStep(i)">
           <span class="im-step-num">
             <t-icon v-if="wizardStep > i" name="check" class="im-step-check" />
             <template v-else>{{ i + 1 }}</template>
@@ -133,278 +90,205 @@
 
       <!-- Step 1: Channel -->
       <div v-if="wizardStep === 0" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionChannel') }}</h4>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionChannel') }}</h4>
 
-        <div class="form-item">
-          <label class="form-label required">{{ $t('integrations.boundAgent') }}</label>
-          <div class="agent-field-row">
-            <t-select
-              v-model="createAgentId"
-              :options="agentOptions"
-              filterable
-              :placeholder="$t('integrations.selectAgentPlaceholder')"
-            />
+          <div class="form-item">
+            <label class="form-label required">{{ $t('integrations.boundAgent') }}</label>
+            <div class="agent-field-row">
+              <t-select v-model="createAgentId" :options="agentOptions" filterable
+                :placeholder="$t('integrations.selectAgentPlaceholder')" />
+            </div>
           </div>
-        </div>
 
-        <div v-if="editingId && isAdmin" class="setting-row setting-row--last">
-          <div class="setting-info">
-            <label>{{ $t('embedPublish.enabled') }}</label>
+          <div v-if="editingId && isAdmin" class="setting-row setting-row--last">
+            <div class="setting-info">
+              <label>{{ $t('embedPublish.enabled') }}</label>
+            </div>
+            <div class="setting-control">
+              <t-switch v-model="editingEnabled" size="small" />
+            </div>
           </div>
-          <div class="setting-control">
-            <t-switch v-model="editingEnabled" size="small" />
+
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.name') }}</label>
+            <t-input v-model="form.name" :disabled="!isAdmin" :placeholder="$t('embedPublish.namePlaceholder')"
+              @focus="channelNameTouched = true" />
+            <p v-if="!editingId" class="form-desc">{{ $t('embedPublish.nameDefaultHint') }}</p>
+            <p v-else class="form-desc">{{ $t('embedPublish.nameDesc') }}</p>
           </div>
-        </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.name') }}</label>
-          <t-input
-            v-model="form.name"
-            :disabled="!isAdmin"
-            :placeholder="$t('embedPublish.namePlaceholder')"
-            @focus="channelNameTouched = true"
-          />
-          <p v-if="!editingId" class="form-desc">{{ $t('embedPublish.nameDefaultHint') }}</p>
-          <p v-else class="form-desc">{{ $t('embedPublish.nameDesc') }}</p>
-        </div>
-
-      </section>
+        </section>
       </div>
 
       <!-- Step 2: Security -->
       <div v-else-if="wizardStep === 1" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionSecurity') }}</h4>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionSecurity') }}</h4>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.allowedOrigins') }}</label>
-          <t-textarea
-            v-model="originsText"
-            :disabled="!isAdmin"
-            :placeholder="$t('embedPublish.originsPlaceholder')"
-            :status="originsError ? 'error' : 'default'"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-            @change="originsError = ''"
-          />
-          <p v-if="originsError" class="form-desc form-desc--error">{{ originsError }}</p>
-          <p v-else class="form-desc">{{ $t('embedPublish.originsHint') }}</p>
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.allowedOrigins') }}</label>
+            <t-textarea v-model="originsText" :disabled="!isAdmin" :placeholder="$t('embedPublish.originsPlaceholder')"
+              :status="originsError ? 'error' : 'default'" :autosize="{ minRows: 2, maxRows: 4 }"
+              @change="originsError = ''" />
+            <p v-if="originsError" class="form-desc form-desc--error">{{ originsError }}</p>
+            <p v-else class="form-desc">{{ $t('embedPublish.originsHint') }}</p>
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.rateLimitLabel') }}</label>
-          <t-input-number
-            v-model="form.rate_limit_per_minute"
-            :disabled="!isAdmin"
-            :min="1"
-            :max="600"
-            theme="column"
-            class="form-number"
-          />
-          <p class="form-desc">{{ $t('embedPublish.rateLimitDesc') }}</p>
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.rateLimitLabel') }}</label>
+            <t-input-number v-model="form.rate_limit_per_minute" :disabled="!isAdmin" :min="1" :max="600" theme="column"
+              class="form-number" />
+            <p class="form-desc">{{ $t('embedPublish.rateLimitDesc') }}</p>
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.rateLimitDayLabel') }}</label>
-          <t-input-number
-            v-model="form.rate_limit_per_day"
-            :disabled="!isAdmin"
-            :min="1"
-            :max="1000000"
-            theme="column"
-            class="form-number"
-          />
-          <p class="form-desc">{{ $t('embedPublish.rateLimitDayDesc') }}</p>
-        </div>
-      </section>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.rateLimitDayLabel') }}</label>
+            <t-input-number v-model="form.rate_limit_per_day" :disabled="!isAdmin" :min="1" :max="1000000"
+              theme="column" class="form-number" />
+            <p class="form-desc">{{ $t('embedPublish.rateLimitDayDesc') }}</p>
+          </div>
+        </section>
       </div>
 
       <!-- Step 3: Capabilities -->
       <div v-else-if="wizardStep === 2" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionCapabilities') }}</h4>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionCapabilities') }}</h4>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.welcomeMessage') }}</label>
-          <t-textarea
-            v-model="form.welcome_message"
-            :disabled="!isAdmin"
-            :placeholder="$t('embedPublish.welcomePlaceholder')"
-            :autosize="{ minRows: 2, maxRows: 4 }"
-          />
-          <p class="form-desc">{{ $t('embedPublish.welcomeMessageDesc') }}</p>
-        </div>
-
-        <div class="settings-group">
-          <div class="setting-row">
-            <div class="setting-info">
-              <label>{{ $t('embedPublish.showSuggestedQuestions') }}</label>
-              <p class="desc">{{ $t('embedPublish.showSuggestedQuestionsDesc') }}</p>
-            </div>
-            <div class="setting-control">
-              <t-switch
-                v-model="form.show_suggested_questions"
-                :disabled="!isAdmin"
-                size="small"
-              />
-            </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.welcomeMessage') }}</label>
+            <t-textarea v-model="form.welcome_message" :disabled="!isAdmin"
+              :placeholder="$t('embedPublish.welcomePlaceholder')" :autosize="{ minRows: 2, maxRows: 4 }" />
+            <p class="form-desc">{{ $t('embedPublish.welcomeMessageDesc') }}</p>
           </div>
 
-          <div class="setting-row">
-            <div class="setting-info">
-              <label>{{ $t('embedPublish.allowWebSearch') }}</label>
-              <p class="desc">{{ $t('embedPublish.allowWebSearchDesc') }}</p>
-              <p v-if="form.allow_web_search && !agentWebSearchEnabledEffective" class="desc desc--warn">
-                {{ $t('embedPublish.agentWebSearchDisabledHint') }}
-              </p>
+          <div class="settings-group">
+            <div class="setting-row">
+              <div class="setting-info">
+                <label>{{ $t('embedPublish.showSuggestedQuestions') }}</label>
+                <p class="desc">{{ $t('embedPublish.showSuggestedQuestionsDesc') }}</p>
+              </div>
+              <div class="setting-control">
+                <t-switch v-model="form.show_suggested_questions" :disabled="!isAdmin" size="small" />
+              </div>
             </div>
-            <div class="setting-control">
-              <t-switch
-                v-model="form.allow_web_search"
-                :disabled="!isAdmin"
-                size="small"
-              />
-            </div>
-          </div>
 
-          <div class="setting-row">
-            <div class="setting-info">
-              <label>{{ $t('embedPublish.allowFileUpload') }}</label>
-              <p class="desc">{{ $t('embedPublish.allowFileUploadDesc') }}</p>
-              <p v-if="form.allow_file_upload && !agentImageUploadEnabledEffective" class="desc desc--warn">
-                {{ $t('embedPublish.agentImageUploadDisabledHint') }}
-              </p>
+            <div class="setting-row">
+              <div class="setting-info">
+                <label>{{ $t('embedPublish.allowWebSearch') }}</label>
+                <p class="desc">{{ $t('embedPublish.allowWebSearchDesc') }}</p>
+                <p v-if="form.allow_web_search && !agentWebSearchEnabledEffective" class="desc desc--warn">
+                  {{ $t('embedPublish.agentWebSearchDisabledHint') }}
+                </p>
+              </div>
+              <div class="setting-control">
+                <t-switch v-model="form.allow_web_search" :disabled="!isAdmin" size="small" />
+              </div>
             </div>
-            <div class="setting-control">
-              <t-switch
-                v-model="form.allow_file_upload"
-                :disabled="!isAdmin"
-                size="small"
-              />
+
+            <div class="setting-row">
+              <div class="setting-info">
+                <label>{{ $t('embedPublish.allowFileUpload') }}</label>
+                <p class="desc">{{ $t('embedPublish.allowFileUploadDesc') }}</p>
+                <p v-if="form.allow_file_upload && !agentImageUploadEnabledEffective" class="desc desc--warn">
+                  {{ $t('embedPublish.agentImageUploadDisabledHint') }}
+                </p>
+              </div>
+              <div class="setting-control">
+                <t-switch v-model="form.allow_file_upload" :disabled="!isAdmin" size="small" />
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
       </div>
 
       <!-- Step 4: Appearance -->
       <div v-else-if="wizardStep === 3" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionAppearance') }}</h4>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionAppearance') }}</h4>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.pageTitle') }}</label>
-          <t-input
-            v-model="form.page_title"
-            :disabled="!isAdmin"
-            :placeholder="$t('embedPublish.pageTitlePlaceholder')"
-          />
-          <p class="form-desc">{{ $t('embedPublish.pageTitleDesc') }}</p>
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.pageTitle') }}</label>
+            <t-input v-model="form.page_title" :disabled="!isAdmin"
+              :placeholder="$t('embedPublish.pageTitlePlaceholder')" />
+            <p class="form-desc">{{ $t('embedPublish.pageTitleDesc') }}</p>
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.headerTitleMode') }}</label>
-          <t-select
-            v-model="form.header_title_mode"
-            :disabled="!isAdmin"
-            :options="headerTitleModeOptions"
-          />
-          <p class="form-desc">{{ $t('embedPublish.headerTitleModeDesc') }}</p>
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.headerTitleMode') }}</label>
+            <t-select v-model="form.header_title_mode" :disabled="!isAdmin" :options="headerTitleModeOptions" />
+            <p class="form-desc">{{ $t('embedPublish.headerTitleModeDesc') }}</p>
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.widgetPosition') }}</label>
-          <t-select
-            v-model="form.widget_position"
-            :disabled="!isAdmin"
-            :options="positionOptions"
-          />
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.widgetPosition') }}</label>
+            <t-select v-model="form.widget_position" :disabled="!isAdmin" :options="positionOptions" />
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.defaultLocale') }}</label>
-          <t-select
-            v-model="form.default_locale"
-            :disabled="!isAdmin"
-            :options="defaultLocaleOptions"
-          />
-          <p class="form-desc">{{ $t('embedPublish.defaultLocaleDesc') }}</p>
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.defaultLocale') }}</label>
+            <t-select v-model="form.default_locale" :disabled="!isAdmin" :options="defaultLocaleOptions" />
+            <p class="form-desc">{{ $t('embedPublish.defaultLocaleDesc') }}</p>
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.primaryColor') }}</label>
-          <t-color-picker
-            v-model="form.primary_color"
-            :disabled="!isAdmin"
-            format="HEX"
-            :color-modes="['monochrome']"
-          />
-        </div>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.primaryColor') }}</label>
+            <t-color-picker v-model="form.primary_color" :disabled="!isAdmin" format="HEX"
+              :color-modes="['monochrome']" />
+          </div>
 
-        <div class="form-item">
-          <label class="form-label">{{ $t('embedPublish.widgetPreview') }}</label>
-          <div class="widget-preview" :class="`pos-${form.widget_position}`">
-            <div class="preview-surface">
-              <button
-                type="button"
-                class="preview-launcher"
-                :style="{ background: form.primary_color || defaultPrimaryColor }"
-                aria-hidden="true"
-              >
-                <t-icon name="chat" />
-              </button>
+          <div class="form-item">
+            <label class="form-label">{{ $t('embedPublish.widgetPreview') }}</label>
+            <div class="widget-preview" :class="`pos-${form.widget_position}`">
+              <div class="preview-surface">
+                <button type="button" class="preview-launcher"
+                  :style="{ background: form.primary_color || defaultPrimaryColor }" aria-hidden="true">
+                  <t-icon name="chat" />
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
       </div>
 
       <!-- Step 5: Webhook -->
       <div v-else-if="wizardStep === 4" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionWebhook') }}</h4>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionWebhook') }}</h4>
 
-        <div class="settings-group">
-          <div class="settings-group__field">
-            <label class="form-label">{{ $t('embedPublish.webhookUrl') }}</label>
-            <t-input
-              v-model="form.webhook_url"
-              :disabled="!isAdmin"
-              autocomplete="off"
-              :placeholder="$t('embedPublish.webhookUrlPlaceholder')"
-            />
-            <p class="form-desc">{{ $t('embedPublish.webhookUrlDesc') }}</p>
-          </div>
+          <div class="settings-group">
+            <div class="settings-group__field">
+              <label class="form-label">{{ $t('embedPublish.webhookUrl') }}</label>
+              <t-input v-model="form.webhook_url" :disabled="!isAdmin" autocomplete="off"
+                :placeholder="$t('embedPublish.webhookUrlPlaceholder')" />
+              <p class="form-desc">{{ $t('embedPublish.webhookUrlDesc') }}</p>
+            </div>
 
-          <div class="settings-group__field">
-            <label class="form-label">{{ $t('embedPublish.webhookSecret') }}</label>
-            <t-input
-              v-model="form.webhook_secret"
-              :disabled="!isAdmin"
-              type="password"
-              autocomplete="new-password"
-              :placeholder="webhookSecretPlaceholder"
-            />
-            <p class="form-desc">{{ $t('embedPublish.webhookSecretDesc') }}</p>
+            <div class="settings-group__field">
+              <label class="form-label">{{ $t('embedPublish.webhookSecret') }}</label>
+              <t-input v-model="form.webhook_secret" :disabled="!isAdmin" type="password" autocomplete="new-password"
+                :placeholder="webhookSecretPlaceholder" />
+              <p class="form-desc">{{ $t('embedPublish.webhookSecretDesc') }}</p>
+            </div>
           </div>
+        </section>
+
+        <div v-if="!editingId" class="deploy-hint" role="note">
+          <t-icon name="info-circle" class="deploy-hint__icon" />
+          <p>{{ $t('embedPublish.deployAfterSaveHint') }}</p>
         </div>
-      </section>
-
-      <div v-if="!editingId" class="deploy-hint" role="note">
-        <t-icon name="info-circle" class="deploy-hint__icon" />
-        <p>{{ $t('embedPublish.deployAfterSaveHint') }}</p>
-      </div>
       </div>
 
       <!-- Step 6: Deploy (edit only) -->
       <div v-else-if="editingId" class="im-step-body">
-      <section class="setting-drawer__section embed-drawer__section">
-        <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionDeploy') }}</h4>
-        <p class="form-desc form-desc--block">{{ $t('embedPublish.deployIntro') }}</p>
+        <section class="setting-drawer__section embed-drawer__section">
+          <h4 class="setting-drawer__section-title">{{ $t('embedPublish.sectionDeploy') }}</h4>
+          <p class="form-desc form-desc--block">{{ $t('embedPublish.deployIntro') }}</p>
 
-        <div class="deploy-block">
-          <h5 class="deploy-block__title">{{ $t('embedPublish.deployStepEmbed') }}</h5>
-          <p class="deploy-block__desc">{{ $t('embedPublish.deployStepEmbedDesc') }}</p>
+          <div class="deploy-block">
+            <h5 class="deploy-block__title">{{ $t('embedPublish.deployStepEmbed') }}</h5>
+            <p class="deploy-block__desc">{{ $t('embedPublish.deployStepEmbedDesc') }}</p>
 
             <t-tabs v-model="drawerSnippetTab" class="snippet-tabs">
               <t-tab-panel value="iframe" :label="$t('embedPublish.tabIframe')" />
@@ -430,13 +314,8 @@
                   {{ drawerSnippetTab === 'iframe' ? $t('embedPublish.embedCode') : $t('embedPublish.widgetCode') }}
                 </span>
                 <div class="code-panel__actions">
-                  <t-button
-                    v-if="drawerSnippetTab !== 'secure'"
-                    size="small"
-                    variant="text"
-                    :loading="previewLoading"
-                    @click="openPreviewFromDrawer"
-                  >
+                  <t-button v-if="drawerSnippetTab !== 'secure'" size="small" variant="text" :loading="previewLoading"
+                    @click="openPreviewFromDrawer">
                     <template #icon><t-icon name="browse" /></template>
                     {{ $t('embedPublish.preview') }}
                   </t-button>
@@ -468,77 +347,49 @@
                 <pre class="code-panel__pre">{{ secureServerExample }}</pre>
               </div>
             </template>
-        </div>
-
-        <div class="deploy-block">
-          <h5 class="deploy-block__title">{{ $t('embedPublish.channelKey') }}</h5>
-          <p class="deploy-block__desc">{{ $t('embedPublish.channelKeyDesc') }}</p>
-
-          <div v-if="drawerChannel" class="channel-key-control">
-            <t-input
-              :model-value="displayChannelKey(editingId)"
-              readonly
-              type="text"
-              class="mono-text-input channel-key-input"
-              :placeholder="tokenFor(drawerChannel) ? '' : $t('embedPublish.channelKeyUnavailable')"
-            />
-            <template v-if="tokenFor(drawerChannel)">
-              <t-button
-                size="small"
-                variant="text"
-                :title="revealedTokens[editingId] ? $t('embedPublish.hideKey') : $t('embedPublish.revealKey')"
-                @click="toggleReveal(editingId)"
-              >
-                <t-icon :name="revealedTokens[editingId] ? 'browse-off' : 'browse'" />
-              </t-button>
-              <t-button
-                size="small"
-                variant="text"
-                :title="$t('embedPublish.copyChannelKeyTitle')"
-                @click="copyToken(drawerChannel)"
-              >
-                <t-icon name="file-copy" />
-              </t-button>
-            </template>
-            <t-popconfirm
-              v-if="isAdmin"
-              theme="warning"
-              :content="$t('embedPublish.resetKeyConfirmBody')"
-              :confirm-btn="{ content: $t('embedPublish.resetKeyConfirmOk'), theme: 'danger' }"
-              :cancel-btn="{ content: $t('common.cancel') }"
-              @confirm="performRotate(editingId)"
-            >
-              <t-button
-                size="small"
-                variant="text"
-                theme="danger"
-                :loading="rotating"
-                :title="$t('embedPublish.resetKeyTitle')"
-              >
-                <t-icon name="refresh" />
-              </t-button>
-            </t-popconfirm>
           </div>
-          <p v-if="drawerChannel && !tokenFor(drawerChannel)" class="form-desc">
-            {{ $t('embedPublish.channelKeyHint') }}
-          </p>
-        </div>
 
-      </section>
+          <div class="deploy-block">
+            <h5 class="deploy-block__title">{{ $t('embedPublish.channelKey') }}</h5>
+            <p class="deploy-block__desc">{{ $t('embedPublish.channelKeyDesc') }}</p>
+
+            <div v-if="drawerChannel" class="channel-key-control">
+              <t-input :model-value="displayChannelKey(editingId)" readonly type="text"
+                class="mono-text-input channel-key-input"
+                :placeholder="tokenFor(drawerChannel) ? '' : $t('embedPublish.channelKeyUnavailable')" />
+              <template v-if="tokenFor(drawerChannel)">
+                <t-button size="small" variant="text"
+                  :title="revealedTokens[editingId] ? $t('embedPublish.hideKey') : $t('embedPublish.revealKey')"
+                  @click="toggleReveal(editingId)">
+                  <t-icon :name="revealedTokens[editingId] ? 'browse-off' : 'browse'" />
+                </t-button>
+                <t-button size="small" variant="text" :title="$t('embedPublish.copyChannelKeyTitle')"
+                  @click="copyToken(drawerChannel)">
+                  <t-icon name="file-copy" />
+                </t-button>
+              </template>
+              <t-popconfirm v-if="isAdmin" theme="warning" :content="$t('embedPublish.resetKeyConfirmBody')"
+                :confirm-btn="{ content: $t('embedPublish.resetKeyConfirmOk'), theme: 'danger' }"
+                :cancel-btn="{ content: $t('common.cancel') }" @confirm="performRotate(editingId)">
+                <t-button size="small" variant="text" theme="danger" :loading="rotating"
+                  :title="$t('embedPublish.resetKeyTitle')">
+                  <t-icon name="refresh" />
+                </t-button>
+              </t-popconfirm>
+            </div>
+            <p v-if="drawerChannel && !tokenFor(drawerChannel)" class="form-desc">
+              {{ $t('embedPublish.channelKeyHint') }}
+            </p>
+          </div>
+
+        </section>
       </div>
     </SettingDrawer>
 
-    <EmbedChannelPreview
-      v-model:visible="previewVisible"
-      :channel-id="previewChannel?.id || ''"
-      :token="previewToken"
-      :mode="previewMode"
-      :title="previewChannel?.name || $t('embedPublish.preview')"
-      :primary-color="previewChannel?.primary_color"
-      :position="previewPosition"
-      :refresh-key="previewNonce"
-      :locale="previewLocale"
-    />
+    <EmbedChannelPreview v-model:visible="previewVisible" :channel-id="previewChannel?.id || ''" :token="previewToken"
+      :mode="previewMode" :title="previewChannel?.name || $t('embedPublish.preview')"
+      :primary-color="previewChannel?.primary_color" :position="previewPosition" :refresh-key="previewNonce"
+      :locale="previewLocale" />
   </div>
 </template>
 
@@ -1678,8 +1529,24 @@ const toggleEnabled = async (ch: EmbedChannel, enabled: boolean) => {
   }
 }
 
-.pos-bottom-right .preview-launcher { right: 10px; bottom: 10px; }
-.pos-bottom-left .preview-launcher { left: 10px; bottom: 10px; }
-.pos-top-right .preview-launcher { left: auto; right: 10px; top: 10px; }
-.pos-top-left .preview-launcher { left: 10px; top: 10px; }
+.pos-bottom-right .preview-launcher {
+  right: 10px;
+  bottom: 10px;
+}
+
+.pos-bottom-left .preview-launcher {
+  left: 10px;
+  bottom: 10px;
+}
+
+.pos-top-right .preview-launcher {
+  left: auto;
+  right: 10px;
+  top: 10px;
+}
+
+.pos-top-left .preview-launcher {
+  left: 10px;
+  top: 10px;
+}
 </style>
diff --git a/frontend/src/components/IMChannelPanel.vue b/frontend/src/components/IMChannelPanel.vue
index 9321505a..398ee378 100644
--- a/frontend/src/components/IMChannelPanel.vue
+++ b/frontend/src/components/IMChannelPanel.vue
@@ -13,21 +13,12 @@
         </div>
 
         <div v-else-if="!loading" class="channel-grid">
-          <button
-            v-for="channel in channels"
-            :key="channel.id"
-            type="button"
-            class="channel-card channel-card--clickable"
-            @click="openDrawer(channel)"
-          >
+          <button v-for="channel in channels" :key="channel.id" type="button"
+            class="channel-card channel-card--clickable" @click="openDrawer(channel)">
             <div class="channel-card__badge" :class="`channel-card__badge--${channel.platform}`">
-              <img
-                v-if="platformLogo(channel.platform)"
-                :src="platformLogo(channel.platform)"
-                :alt="platformLabel(channel.platform)"
-                class="channel-card__logo"
-              />
-              <t-icon v-else name="chat-message" size="18px" />
+              <img v-if="platformLogo(channel.platform)" :src="platformLogo(channel.platform)"
+                :alt="platformLabel(channel.platform)" class="channel-card__logo" />
+              <t-icon v-else name="chat-message" size="22px" />
             </div>
             <div class="channel-card__body">
               <div class="channel-card__header">
@@ -41,39 +32,20 @@
               </span>
             </div>
             <div v-if="authStore.hasRole('admin')" class="channel-card__actions" @click.stop>
-              <t-dropdown
-                trigger="click"
-                placement="bottom-right"
-                attach="body"
-                :options="channelMenuOptions(channel)"
-                @click="(data) => handleChannelMenuClick(data, channel)"
-              >
-                <t-button
-                  variant="text"
-                  shape="square"
-                  size="small"
-                  class="channel-card__action-btn channel-card__more"
-                  @click.stop
-                >
+              <t-dropdown trigger="click" placement="bottom-right" attach="body" :options="channelMenuOptions(channel)"
+                @click="(data) => handleChannelMenuClick(data, channel)">
+                <t-button variant="text" shape="square" size="small" class="channel-card__action-btn channel-card__more"
+                  @click.stop>
                   <template #icon><t-icon name="ellipsis" /></template>
                 </t-button>
               </t-dropdown>
-              <t-popconfirm
-                :content="$t('agentEditor.im.deleteConfirm')"
+              <t-popconfirm :content="$t('agentEditor.im.deleteConfirm')"
                 :confirm-btn="{ content: $t('common.delete'), theme: 'danger' }"
-                :cancel-btn="{ content: $t('common.cancel') }"
-                placement="bottom-right"
-                @confirm="() => handleDelete(channel.id)"
-              >
+                :cancel-btn="{ content: $t('common.cancel') }" placement="bottom-right"
+                @confirm="() => handleDelete(channel.id)">
                 <t-tooltip :content="$t('common.delete')" placement="top">
-                  <t-button
-                    theme="danger"
-                    shape="square"
-                    variant="text"
-                    size="small"
-                    class="channel-card__action-btn channel-card__delete"
-                    @click.stop
-                  >
+                  <t-button theme="danger" shape="square" variant="text" size="small"
+                    class="channel-card__action-btn channel-card__delete" @click.stop>
                     <template #icon><t-icon name="delete" /></template>
                   </t-button>
                 </t-tooltip>
@@ -81,12 +53,8 @@
             </div>
           </button>
 
-          <button
-            v-if="authStore.hasRole('admin')"
-            type="button"
-            class="channel-card channel-card--add"
-            @click="openCreate"
-          >
+          <button v-if="authStore.hasRole('admin')" type="button" class="channel-card channel-card--add"
+            @click="openCreate">
             <span class="channel-card__badge" aria-hidden="true">
               <t-icon name="add" />
             </span>
@@ -101,26 +69,13 @@
       </t-loading>
     </div>
 
-    <SettingDrawer
-      v-model:visible="showCreateDialog"
-      class="im-channel-drawer"
-      :title="drawerTitle"
-      :description="drawerStepDescription"
-      storage-key="setting-drawer:im-channel"
-      width="560px"
-      :confirm-loading="saving"
-      :confirm-text="drawerConfirmText"
-      :hide-footer="!authStore.hasRole('admin')"
-      @confirm="handleDrawerConfirm"
-      @cancel="resetForm"
-    >
+    <SettingDrawer v-model:visible="showCreateDialog" class="im-channel-drawer" :title="drawerTitle"
+      :description="drawerStepDescription" storage-key="setting-drawer:im-channel" width="560px"
+      :confirm-loading="saving" :confirm-text="drawerConfirmText" :hide-footer="!authStore.hasRole('admin')"
+      @confirm="handleDrawerConfirm" @cancel="resetForm">
       <template #headerIcon>
-        <img
-          v-if="platformLogo(formData.platform)"
-          :src="platformLogo(formData.platform)"
-          :alt="platformLabel(formData.platform)"
-          class="drawer-platform-icon"
-        />
+        <img v-if="platformLogo(formData.platform)" :src="platformLogo(formData.platform)"
+          :alt="platformLabel(formData.platform)" class="drawer-platform-icon" />
         <t-icon v-else name="chat-message" />
       </template>
 
@@ -131,11 +86,8 @@
       </template>
 
       <div class="im-steps">
-        <div
-          v-for="(title, i) in stepTitles"
-          :key="i"
-          :class="['im-step', { active: wizardStep === i, done: wizardStep > i }]"
-        >
+        <div v-for="(title, i) in stepTitles" :key="i"
+          :class="['im-step', { active: wizardStep === i, done: wizardStep > i }]">
           <span class="im-step-num">
             <t-icon v-if="wizardStep > i" name="check" class="im-step-check" />
             <template v-else>{{ i + 1 }}</template>
@@ -152,36 +104,20 @@
           <div class="form-item">
             <label class="form-label required">{{ $t('integrations.boundAgent') }}</label>
             <div class="agent-field-row">
-              <t-select
-                v-model="formData.target_agent_id"
-                :options="agentOptions"
-                filterable
-                :placeholder="$t('integrations.selectAgentPlaceholder')"
-              />
+              <t-select v-model="formData.target_agent_id" :options="agentOptions" filterable
+                :placeholder="$t('integrations.selectAgentPlaceholder')" />
             </div>
           </div>
 
           <div class="form-item">
             <label class="form-label required">{{ $t('agentEditor.im.platform') }}</label>
-            <t-select
-              v-model="formData.platform"
-              :disabled="!!editingChannel"
-              class="im-platform-select"
-              @change="onPlatformChange"
-            >
+            <t-select v-model="formData.platform" :disabled="!!editingChannel" class="im-platform-select"
+              @change="onPlatformChange">
               <template v-if="platformLogo(formData.platform)" #prefixIcon>
-                <img
-                  :src="platformLogo(formData.platform)"
-                  :alt="platformLabel(formData.platform)"
-                  class="im-platform-select-prefix"
-                />
+                <img :src="platformLogo(formData.platform)" :alt="platformLabel(formData.platform)"
+                  class="im-platform-select-prefix" />
               </template>
-              <t-option
-                v-for="item in platformOptions"
-                :key="item.value"
-                :value="item.value"
-                :label="item.label"
-              >
+              <t-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label">
                 <div class="im-platform-select-option">
                   <img :src="item.logo" :alt="item.label" class="im-platform-select-option__icon" />
                   <span>{{ item.label }}</span>
@@ -192,11 +128,8 @@
 
           <div class="form-item">
             <label class="form-label">{{ $t('agentEditor.im.channelName') }}</label>
-            <t-input
-              v-model="formData.name"
-              :placeholder="$t('agentEditor.im.channelNamePlaceholder')"
-              @focus="channelNameTouched = true"
-            />
+            <t-input v-model="formData.name" :placeholder="$t('agentEditor.im.channelNamePlaceholder')"
+              @focus="channelNameTouched = true" />
             <p v-if="!editingChannel" class="form-desc">{{ $t('agentEditor.im.channelNameDefaultHint') }}</p>
           </div>
 
@@ -219,46 +152,33 @@
           <div class="form-item">
             <label class="form-label required">{{ $t('agentEditor.im.mode') }}</label>
             <div class="option-chips">
-              <button
-                type="button"
-                class="option-chip"
+              <button type="button" class="option-chip"
                 :class="{ 'option-chip--active': formData.mode === 'websocket' }"
-                :disabled="formData.platform === 'mattermost'"
-                @click="formData.mode = 'websocket'"
-              >
+                :disabled="formData.platform === 'mattermost'" @click="formData.mode = 'websocket'">
                 WebSocket
               </button>
-              <button
-                type="button"
-                class="option-chip"
-                :class="{ 'option-chip--active': formData.mode === 'webhook' }"
-                @click="formData.mode = 'webhook'"
-              >
+              <button type="button" class="option-chip" :class="{ 'option-chip--active': formData.mode === 'webhook' }"
+                @click="formData.mode = 'webhook'">
                 Webhook
               </button>
             </div>
             <p class="form-desc">
-              {{ formData.platform === 'mattermost' ? $t('agentEditor.im.mattermostModeHint') : $t('agentEditor.im.modeHint') }}
+              {{ formData.platform === 'mattermost' ? $t('agentEditor.im.mattermostModeHint') :
+                $t('agentEditor.im.modeHint') }}
             </p>
           </div>
 
           <div class="form-item">
             <label class="form-label required">{{ $t('agentEditor.im.outputMode') }}</label>
             <div class="option-chips">
-              <button
-                type="button"
-                class="option-chip"
+              <button type="button" class="option-chip"
                 :class="{ 'option-chip--active': formData.output_mode === 'stream' }"
-                @click="formData.output_mode = 'stream'"
-              >
+                @click="formData.output_mode = 'stream'">
                 {{ $t('agentEditor.im.outputStream') }}
               </button>
-              <button
-                type="button"
-                class="option-chip"
+              <button type="button" class="option-chip"
                 :class="{ 'option-chip--active': formData.output_mode === 'full' }"
-                @click="formData.output_mode = 'full'"
-              >
+                @click="formData.output_mode = 'full'">
                 {{ $t('agentEditor.im.outputFull') }}
               </button>
             </div>
@@ -270,21 +190,14 @@
           <div class="form-item">
             <label class="form-label required">{{ $t('agentEditor.im.sessionMode') }}</label>
             <div class="option-chips">
-              <button
-                type="button"
-                class="option-chip"
+              <button type="button" class="option-chip"
                 :class="{ 'option-chip--active': formData.session_mode === 'user' }"
-                @click="formData.session_mode = 'user'"
-              >
+                @click="formData.session_mode = 'user'">
                 {{ $t('agentEditor.im.sessionModeUser') }}
               </button>
-              <button
-                type="button"
-                class="option-chip"
+              <button type="button" class="option-chip"
                 :class="{ 'option-chip--active': formData.session_mode === 'thread' }"
-                :disabled="!platformSupportsThread(formData.platform)"
-                @click="formData.session_mode = 'thread'"
-              >
+                :disabled="!platformSupportsThread(formData.platform)" @click="formData.session_mode = 'thread'">
                 {{ $t('agentEditor.im.sessionModeThread') }}
               </button>
             </div>
@@ -292,16 +205,14 @@
           </div>
         </section>
 
-        <section v-if="editingChannel && formData.mode === 'webhook'" class="setting-drawer__section im-drawer__section">
+        <section v-if="editingChannel && formData.mode === 'webhook'"
+          class="setting-drawer__section im-drawer__section">
           <h4 class="setting-drawer__section-title">{{ $t('agentEditor.im.sectionCallback') }}</h4>
           <div class="form-item">
             <label class="form-label">{{ $t('agentEditor.im.callbackUrl') }}</label>
             <div class="callback-url-control">
-              <t-input
-                :model-value="getCallbackUrl(editingChannel)"
-                readonly
-                class="mono-text-input callback-url-input"
-              />
+              <t-input :model-value="getCallbackUrl(editingChannel)" readonly
+                class="mono-text-input callback-url-input" />
               <t-button size="small" variant="text" :title="$t('common.copy')" @click="copyUrl(editingChannel)">
                 <t-icon name="file-copy" />
               </t-button>
@@ -316,12 +227,8 @@
           <h4 class="setting-drawer__section-title">{{ $t('agentEditor.im.sectionKnowledge') }}</h4>
           <div class="form-item">
             <label class="form-label">{{ $t('agentEditor.im.fileKnowledgeBase') }}</label>
-            <t-select
-              v-model="formData.knowledge_base_id"
-              :placeholder="$t('agentEditor.im.fileKnowledgeBasePlaceholder')"
-              clearable
-              filterable
-            >
+            <t-select v-model="formData.knowledge_base_id"
+              :placeholder="$t('agentEditor.im.fileKnowledgeBasePlaceholder')" clearable filterable>
               <t-option v-for="kb in knowledgeBases" :key="kb.id" :value="kb.id" :label="kb.name" />
             </t-select>
             <p class="form-desc">{{ $t('agentEditor.im.fileKnowledgeBaseHint') }}</p>
@@ -334,277 +241,280 @@
         <section class="setting-drawer__section im-drawer__section">
           <h4 class="setting-drawer__section-title">{{ $t('agentEditor.im.sectionCredentials') }}</h4>
           <div class="drawer-form">
-        <!-- WeCom credentials -->
-        <template v-if="formData.platform === 'wecom'">
-          <div class="platform-link-hint">
-            <a href="https://work.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.wecomConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <template v-if="formData.mode === 'websocket'">
-            <div class="form-item">
-              <label class="form-label">Bot ID</label>
-              <t-input v-model="formData.credentials.bot_id" placeholder="Bot ID" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Bot Secret</label>
-              <t-input v-model="formData.credentials.bot_secret" type="password" placeholder="Bot Secret" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">WebSocket Endpoint</label>
-              <t-input v-model="formData.credentials.ws_endpoint" placeholder="wss://openws.work.weixin.qq.com" />
-              <p class="form-desc">{{ $t('agentEditor.im.wecomWSEndpointHint') }}</p>
-            </div>
-          </template>
-          <template v-else>
-            <div class="form-item">
-              <label class="form-label">Corp ID</label>
-              <t-input v-model="formData.credentials.corp_id" placeholder="Corp ID" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Agent Secret</label>
-              <t-input v-model="formData.credentials.agent_secret" type="password" placeholder="Agent Secret" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Token</label>
-              <t-input v-model="formData.credentials.token" placeholder="Token" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">EncodingAESKey</label>
-              <t-input v-model="formData.credentials.encoding_aes_key" placeholder="EncodingAESKey" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Corp Agent ID</label>
-              <t-input-number v-model="formData.credentials.corp_agent_id" placeholder="Corp Agent ID" style="width: 100%;" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">API Base URL</label>
-              <t-input v-model="formData.credentials.api_base_url" placeholder="https://qyapi.weixin.qq.com" />
-              <p class="form-desc">{{ $t('agentEditor.im.wecomAPIBaseURLHint') }}</p>
-            </div>
-          </template>
-        </template>
-
-        <!-- Feishu credentials -->
-        <template v-if="formData.platform === 'feishu'">
-          <div class="platform-link-hint">
-            <a href="https://open.feishu.cn/" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.feishuConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <div class="form-item">
-            <label class="form-label">App ID</label>
-            <t-input v-model="formData.credentials.app_id" placeholder="App ID" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">App Secret</label>
-            <t-input v-model="formData.credentials.app_secret" type="password" placeholder="App Secret" />
-          </div>
-          <template v-if="formData.mode === 'webhook'">
-            <div class="form-item">
-              <label class="form-label">Verification Token</label>
-              <t-input v-model="formData.credentials.verification_token" placeholder="Verification Token" />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Encrypt Key</label>
-              <t-input v-model="formData.credentials.encrypt_key" type="password" placeholder="Encrypt Key" />
-            </div>
-          </template>
-        </template>
-
-        <!-- Slack credentials -->
-        <template v-if="formData.platform === 'slack'">
-          <div class="platform-link-hint">
-            <a href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.slackConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <template v-if="formData.mode === 'websocket'">
-            <div class="form-item">
-              <label class="form-label">App Token</label>
-              <t-input v-model="formData.credentials.app_token" type="password" placeholder="xapp-..." />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Bot Token</label>
-              <t-input v-model="formData.credentials.bot_token" type="password" placeholder="xoxb-..." />
-            </div>
-          </template>
-          <template v-else>
-            <div class="form-item">
-              <label class="form-label">Bot Token</label>
-              <t-input v-model="formData.credentials.bot_token" type="password" placeholder="xoxb-..." />
-            </div>
-            <div class="form-item">
-              <label class="form-label">Signing Secret</label>
-              <t-input v-model="formData.credentials.signing_secret" type="password" placeholder="Signing Secret" />
-            </div>
-          </template>
-        </template>
-
-        <!-- Telegram credentials -->
-        <template v-if="formData.platform === 'telegram'">
-          <div class="platform-link-hint">
-            <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.telegramConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <div class="form-item">
-            <label class="form-label">Bot Token</label>
-            <t-input v-model="formData.credentials.bot_token" type="password" placeholder="123456789:AABBccdd..." />
-          </div>
-          <template v-if="formData.mode === 'webhook'">
-            <div class="form-item">
-              <label class="form-label">Secret Token</label>
-              <t-input v-model="formData.credentials.secret_token" type="password" placeholder="Secret Token (optional)" />
-            </div>
-          </template>
-        </template>
-
-        <!-- DingTalk credentials -->
-        <template v-if="formData.platform === 'dingtalk'">
-          <div class="platform-link-hint">
-            <a href="https://open.dingtalk.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.dingtalkConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <div class="form-item">
-            <label class="form-label">Client ID (AppKey)</label>
-            <t-input v-model="formData.credentials.client_id" placeholder="Client ID / AppKey" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">Client Secret (AppSecret)</label>
-            <t-input v-model="formData.credentials.client_secret" type="password" placeholder="Client Secret / AppSecret" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">{{ $t('agentEditor.im.dingtalkCardTemplateId') }}</label>
-            <t-input v-model="formData.credentials.card_template_id" placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.schema" />
-            <p class="form-desc">{{ $t('agentEditor.im.dingtalkCardTemplateIdHint') }}</p>
-          </div>
-        </template>
-
-        <!-- QQBot credentials -->
-        <template v-if="formData.platform === 'qqbot'">
-          <div class="platform-link-hint">
-            <a href="https://q.qq.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.qqbotConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <div class="form-item">
-            <label class="form-label">App ID</label>
-            <t-input v-model="formData.credentials.app_id" placeholder="QQBot App ID" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">App Secret</label>
-            <t-input v-model="formData.credentials.client_secret" type="password" placeholder="QQBot App Secret" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">API Base URL</label>
-            <t-input v-model="formData.credentials.api_base_url" placeholder="https://api.sgroup.qq.com" />
-            <p class="form-desc">{{ $t('agentEditor.im.qqbotAPIBaseURLHint') }}</p>
-          </div>
-          <div class="form-item">
-            <label class="form-label">Gateway URL</label>
-            <t-input v-model="formData.credentials.gateway_url" placeholder="wss://api.sgroup.qq.com/websocket/" />
-            <p class="form-desc">{{ $t('agentEditor.im.qqbotGatewayURLHint') }}</p>
-          </div>
-        </template>
-
-        <!-- Mattermost credentials -->
-        <template v-if="formData.platform === 'mattermost'">
-          <div class="platform-link-hint">
-            <a href="https://developers.mattermost.com/integrate/webhooks/outgoing/" target="_blank" rel="noopener noreferrer" class="doc-link">
-              {{ $t('agentEditor.im.mattermostConsole') }}
-              <t-icon name="link" class="link-icon" />
-            </a>
-            <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
-          </div>
-          <div class="form-item">
-            <label class="form-label">Site URL</label>
-            <t-input v-model="formData.credentials.site_url" placeholder="https://mattermost.example.com" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">Bot Token</label>
-            <t-input v-model="formData.credentials.bot_token" type="password" placeholder="Bot Token" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">Outgoing Webhook Token</label>
-            <t-input v-model="formData.credentials.outgoing_token" type="password" placeholder="Token from Outgoing Webhook" />
-          </div>
-          <div class="form-item">
-            <label class="form-label">Bot User ID</label>
-            <t-input v-model="formData.credentials.bot_user_id" placeholder="Optional — filter bot self-messages" />
-          </div>
-          <div class="settings-group">
-            <div class="setting-row setting-row--last">
-              <div class="setting-info">
-                <label>{{ $t('agentEditor.im.mattermostPostToMain') }}</label>
-                <p class="desc">{{ $t('agentEditor.im.mattermostPostToMainHint') }}</p>
+            <!-- WeCom credentials -->
+            <template v-if="formData.platform === 'wecom'">
+              <div class="platform-link-hint">
+                <a href="https://work.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.wecomConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
               </div>
-              <div class="setting-control">
-                <t-switch
-                  :value="!!formData.credentials.post_to_main"
-                  size="small"
-                  @change="(v: boolean) => { formData.credentials.post_to_main = v }"
-                />
+              <template v-if="formData.mode === 'websocket'">
+                <div class="form-item">
+                  <label class="form-label">Bot ID</label>
+                  <t-input v-model="formData.credentials.bot_id" placeholder="Bot ID" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Bot Secret</label>
+                  <t-input v-model="formData.credentials.bot_secret" type="password" placeholder="Bot Secret" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">WebSocket Endpoint</label>
+                  <t-input v-model="formData.credentials.ws_endpoint" placeholder="wss://openws.work.weixin.qq.com" />
+                  <p class="form-desc">{{ $t('agentEditor.im.wecomWSEndpointHint') }}</p>
+                </div>
+              </template>
+              <template v-else>
+                <div class="form-item">
+                  <label class="form-label">Corp ID</label>
+                  <t-input v-model="formData.credentials.corp_id" placeholder="Corp ID" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Agent Secret</label>
+                  <t-input v-model="formData.credentials.agent_secret" type="password" placeholder="Agent Secret" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Token</label>
+                  <t-input v-model="formData.credentials.token" placeholder="Token" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">EncodingAESKey</label>
+                  <t-input v-model="formData.credentials.encoding_aes_key" placeholder="EncodingAESKey" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Corp Agent ID</label>
+                  <t-input-number v-model="formData.credentials.corp_agent_id" placeholder="Corp Agent ID"
+                    style="width: 100%;" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">API Base URL</label>
+                  <t-input v-model="formData.credentials.api_base_url" placeholder="https://qyapi.weixin.qq.com" />
+                  <p class="form-desc">{{ $t('agentEditor.im.wecomAPIBaseURLHint') }}</p>
+                </div>
+              </template>
+            </template>
+
+            <!-- Feishu credentials -->
+            <template v-if="formData.platform === 'feishu'">
+              <div class="platform-link-hint">
+                <a href="https://open.feishu.cn/" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.feishuConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
               </div>
-            </div>
-          </div>
-        </template>
-        <!-- WeChat credentials (QR code binding) -->
-        <template v-if="formData.platform === 'wechat'">
-          <p class="form-desc">{{ $t('agentEditor.im.wechatHint') }}</p>
+              <div class="form-item">
+                <label class="form-label">App ID</label>
+                <t-input v-model="formData.credentials.app_id" placeholder="App ID" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">App Secret</label>
+                <t-input v-model="formData.credentials.app_secret" type="password" placeholder="App Secret" />
+              </div>
+              <template v-if="formData.mode === 'webhook'">
+                <div class="form-item">
+                  <label class="form-label">Verification Token</label>
+                  <t-input v-model="formData.credentials.verification_token" placeholder="Verification Token" />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Encrypt Key</label>
+                  <t-input v-model="formData.credentials.encrypt_key" type="password" placeholder="Encrypt Key" />
+                </div>
+              </template>
+            </template>
 
-          <!-- Already bound state -->
-          <div v-if="wechatBound" class="wechat-bound-status">
-            <t-icon name="check-circle-filled" class="bound-icon" />
-            <span>{{ $t('agentEditor.im.wechatBindSuccess') }}</span>
-            <t-button size="small" variant="outline" theme="default" @click="startWeChatBinding">
-              {{ $t('agentEditor.im.wechatRebind') }}
-            </t-button>
-          </div>
+            <!-- Slack credentials -->
+            <template v-if="formData.platform === 'slack'">
+              <div class="platform-link-hint">
+                <a href="https://api.slack.com/apps" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.slackConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
+              </div>
+              <template v-if="formData.mode === 'websocket'">
+                <div class="form-item">
+                  <label class="form-label">App Token</label>
+                  <t-input v-model="formData.credentials.app_token" type="password" placeholder="xapp-..." />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Bot Token</label>
+                  <t-input v-model="formData.credentials.bot_token" type="password" placeholder="xoxb-..." />
+                </div>
+              </template>
+              <template v-else>
+                <div class="form-item">
+                  <label class="form-label">Bot Token</label>
+                  <t-input v-model="formData.credentials.bot_token" type="password" placeholder="xoxb-..." />
+                </div>
+                <div class="form-item">
+                  <label class="form-label">Signing Secret</label>
+                  <t-input v-model="formData.credentials.signing_secret" type="password" placeholder="Signing Secret" />
+                </div>
+              </template>
+            </template>
 
-          <!-- QR code binding flow -->
-          <div v-else class="wechat-qr-section">
-            <!-- Initial state: show bind button -->
-            <div v-if="!wechatQRImgUrl" class="wechat-bind-action">
-              <t-button theme="default" variant="outline" :loading="wechatLoading" @click="startWeChatBinding">
-                <template #icon><t-icon name="scan" /></template>
-                {{ $t('agentEditor.im.wechatScanBind') }}
-              </t-button>
-            </div>
+            <!-- Telegram credentials -->
+            <template v-if="formData.platform === 'telegram'">
+              <div class="platform-link-hint">
+                <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.telegramConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
+              </div>
+              <div class="form-item">
+                <label class="form-label">Bot Token</label>
+                <t-input v-model="formData.credentials.bot_token" type="password" placeholder="123456789:AABBccdd..." />
+              </div>
+              <template v-if="formData.mode === 'webhook'">
+                <div class="form-item">
+                  <label class="form-label">Secret Token</label>
+                  <t-input v-model="formData.credentials.secret_token" type="password"
+                    placeholder="Secret Token (optional)" />
+                </div>
+              </template>
+            </template>
 
-            <!-- QR code displayed -->
-            <div v-else class="wechat-qr-display">
-              <div class="qr-container">
-                <img :src="wechatQRImgUrl" alt="WeChat QR Code" class="qr-image" />
-                <div v-if="wechatQRStatus === 'expired'" class="qr-expired-overlay" @click="startWeChatBinding">
-                  <t-icon name="refresh" class="refresh-icon" />
-                  <span>{{ $t('agentEditor.im.wechatQRExpired') }}</span>
+            <!-- DingTalk credentials -->
+            <template v-if="formData.platform === 'dingtalk'">
+              <div class="platform-link-hint">
+                <a href="https://open.dingtalk.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.dingtalkConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
+              </div>
+              <div class="form-item">
+                <label class="form-label">Client ID (AppKey)</label>
+                <t-input v-model="formData.credentials.client_id" placeholder="Client ID / AppKey" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">Client Secret (AppSecret)</label>
+                <t-input v-model="formData.credentials.client_secret" type="password"
+                  placeholder="Client Secret / AppSecret" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">{{ $t('agentEditor.im.dingtalkCardTemplateId') }}</label>
+                <t-input v-model="formData.credentials.card_template_id"
+                  placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.schema" />
+                <p class="form-desc">{{ $t('agentEditor.im.dingtalkCardTemplateIdHint') }}</p>
+              </div>
+            </template>
+
+            <!-- QQBot credentials -->
+            <template v-if="formData.platform === 'qqbot'">
+              <div class="platform-link-hint">
+                <a href="https://q.qq.com/" target="_blank" rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.qqbotConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
+              </div>
+              <div class="form-item">
+                <label class="form-label">App ID</label>
+                <t-input v-model="formData.credentials.app_id" placeholder="QQBot App ID" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">App Secret</label>
+                <t-input v-model="formData.credentials.client_secret" type="password" placeholder="QQBot App Secret" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">API Base URL</label>
+                <t-input v-model="formData.credentials.api_base_url" placeholder="https://api.sgroup.qq.com" />
+                <p class="form-desc">{{ $t('agentEditor.im.qqbotAPIBaseURLHint') }}</p>
+              </div>
+              <div class="form-item">
+                <label class="form-label">Gateway URL</label>
+                <t-input v-model="formData.credentials.gateway_url" placeholder="wss://api.sgroup.qq.com/websocket/" />
+                <p class="form-desc">{{ $t('agentEditor.im.qqbotGatewayURLHint') }}</p>
+              </div>
+            </template>
+
+            <!-- Mattermost credentials -->
+            <template v-if="formData.platform === 'mattermost'">
+              <div class="platform-link-hint">
+                <a href="https://developers.mattermost.com/integrate/webhooks/outgoing/" target="_blank"
+                  rel="noopener noreferrer" class="doc-link">
+                  {{ $t('agentEditor.im.mattermostConsole') }}
+                  <t-icon name="link" class="link-icon" />
+                </a>
+                <span class="hint-text">{{ $t('agentEditor.im.consoleTip') }}</span>
+              </div>
+              <div class="form-item">
+                <label class="form-label">Site URL</label>
+                <t-input v-model="formData.credentials.site_url" placeholder="https://mattermost.example.com" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">Bot Token</label>
+                <t-input v-model="formData.credentials.bot_token" type="password" placeholder="Bot Token" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">Outgoing Webhook Token</label>
+                <t-input v-model="formData.credentials.outgoing_token" type="password"
+                  placeholder="Token from Outgoing Webhook" />
+              </div>
+              <div class="form-item">
+                <label class="form-label">Bot User ID</label>
+                <t-input v-model="formData.credentials.bot_user_id" placeholder="Optional — filter bot self-messages" />
+              </div>
+              <div class="settings-group">
+                <div class="setting-row setting-row--last">
+                  <div class="setting-info">
+                    <label>{{ $t('agentEditor.im.mattermostPostToMain') }}</label>
+                    <p class="desc">{{ $t('agentEditor.im.mattermostPostToMainHint') }}</p>
+                  </div>
+                  <div class="setting-control">
+                    <t-switch :value="!!formData.credentials.post_to_main" size="small"
+                      @change="(v: boolean) => { formData.credentials.post_to_main = v }" />
+                  </div>
                 </div>
               </div>
-              <p class="qr-hint">
-                <template v-if="wechatQRStatus === 'scaned'">
-                  {{ $t('agentEditor.im.wechatBinding') }}
-                </template>
-                <template v-else>
-                  {{ $t('agentEditor.im.wechatScanning') }}
-                </template>
-              </p>
-            </div>
-          </div>
-        </template>
+            </template>
+            <!-- WeChat credentials (QR code binding) -->
+            <template v-if="formData.platform === 'wechat'">
+              <p class="form-desc">{{ $t('agentEditor.im.wechatHint') }}</p>
+
+              <!-- Already bound state -->
+              <div v-if="wechatBound" class="wechat-bound-status">
+                <t-icon name="check-circle-filled" class="bound-icon" />
+                <span>{{ $t('agentEditor.im.wechatBindSuccess') }}</span>
+                <t-button size="small" variant="outline" theme="default" @click="startWeChatBinding">
+                  {{ $t('agentEditor.im.wechatRebind') }}
+                </t-button>
+              </div>
+
+              <!-- QR code binding flow -->
+              <div v-else class="wechat-qr-section">
+                <!-- Initial state: show bind button -->
+                <div v-if="!wechatQRImgUrl" class="wechat-bind-action">
+                  <t-button theme="default" variant="outline" :loading="wechatLoading" @click="startWeChatBinding">
+                    <template #icon><t-icon name="scan" /></template>
+                    {{ $t('agentEditor.im.wechatScanBind') }}
+                  </t-button>
+                </div>
+
+                <!-- QR code displayed -->
+                <div v-else class="wechat-qr-display">
+                  <div class="qr-container">
+                    <img :src="wechatQRImgUrl" alt="WeChat QR Code" class="qr-image" />
+                    <div v-if="wechatQRStatus === 'expired'" class="qr-expired-overlay" @click="startWeChatBinding">
+                      <t-icon name="refresh" class="refresh-icon" />
+                      <span>{{ $t('agentEditor.im.wechatQRExpired') }}</span>
+                    </div>
+                  </div>
+                  <p class="qr-hint">
+                    <template v-if="wechatQRStatus === 'scaned'">
+                      {{ $t('agentEditor.im.wechatBinding') }}
+                    </template>
+                    <template v-else>
+                      {{ $t('agentEditor.im.wechatScanning') }}
+                    </template>
+                  </p>
+                </div>
+              </div>
+            </template>
           </div>
         </section>
       </div>
@@ -633,7 +543,7 @@ import telegramLogo from '@/assets/img/im/telegram.svg';
 import dingtalkLogo from '@/assets/img/im/dingtalk.svg';
 import mattermostLogo from '@/assets/img/im/mattermost.svg';
 import wechatLogo from '@/assets/img/im/wechat.svg';
-import qqbotLogo from '@/assets/img/im/qqbot.svg';
+import qqbotLogo from '@/assets/img/im/qqbot.png';
 
 type IMPlatform = IMChannel['platform'];
 
diff --git a/frontend/src/components/css/channel-panel-list.less b/frontend/src/components/css/channel-panel-list.less
index 2d1079dd..4d84bc12 100644
--- a/frontend/src/components/css/channel-panel-list.less
+++ b/frontend/src/components/css/channel-panel-list.less
@@ -108,7 +108,7 @@
     .channel-card__badge {
       background: color-mix(in srgb, var(--td-brand-color) 10%, transparent);
       color: var(--td-brand-color);
-      font-size: 16px;
+      font-size: 20px;
     }
 
     .channel-card__title {
@@ -120,9 +120,9 @@
 
   &__badge {
     flex-shrink: 0;
-    width: 28px;
-    height: 28px;
-    border-radius: 7px;
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -132,8 +132,8 @@
   }
 
   &__logo {
-    width: 16px;
-    height: 16px;
+    width: 22px;
+    height: 22px;
     object-fit: contain;
   }
 
diff --git a/frontend/src/components/menu.vue b/frontend/src/components/menu.vue
index a5123d90..8cac5986 100644
--- a/frontend/src/components/menu.vue
+++ b/frontend/src/components/menu.vue
@@ -259,7 +259,7 @@ import telegramLogo from '@/assets/img/im/telegram.svg';
 import dingtalkLogo from '@/assets/img/im/dingtalk.svg';
 import mattermostLogo from '@/assets/img/im/mattermost.svg';
 import wechatLogo from '@/assets/img/im/wechat.svg';
-import qqbotLogo from '@/assets/img/im/qqbot.svg';
+import qqbotLogo from '@/assets/img/im/qqbot.png';
 
 const PLATFORM_LOGO: Record<string, string> = {
     wecom: wecomLogo,