@xmanrui/dsh-im 4.11.0 → 4.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xmanrui/dsh-im",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "把九种 IM 机器人和公网 AI Office 接入本机 DeepSeek Harness。 Connect nine IM channels and a public AI Office to a local DeepSeek Harness.",
   "keywords": [
     "deepseek-harness",

package/plugin-src/client/channels/dingtalk/index.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -256,13 +257,20 @@ export function AccountCard({
   const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
   return h('article', { className: 'ddt-card dim-botCard', tabIndex: -1, 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
-      h('div', { className: 'ddt-accountTop dim-botCardTop' },
+      h(CollapsibleAccountSection, {
+        id: `ddt-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+        header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
           h('div', { className: 'ddt-avatar dim-botAvatar', 'aria-hidden': 'true' }, h(DingtalkIcon, { size: 29 })),
           h('div', { className: 'dim-botName' },
             h('h3', { title: account.bot.name }, account.bot.name),
             h('p', { title: account.bot.clientIdMasked }, account.bot.clientIdMasked))),
-        h('div', { className: 'dim-botCardTools' },
+        h('div', {
+            className: 'dim-botCardTools',
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+          },
           h(BotStatusMeta, {
             className: 'ddt-health',
             dotClassName: 'ddt-dot',
@@ -277,8 +285,9 @@ export function AccountCard({
             botName: account.bot.name,
             connected: account.connected,
             accessPolicy: account.accessPolicy,
-          }))),
-      h(WorkspaceEditor, {
+          })))
+      },
+        h(WorkspaceEditor, {
         workspace: account.workspace,
         disabled: Boolean(busy),
         onSave: onWorkspaceSave,
@@ -314,7 +323,9 @@ export function AccountCard({
           feedback ? h('div', {
             className: 'ddt-summary dim-cardFeedback',
             role: 'status',
-          }, feedback) : null))),
+          }, feedback) : null)),
+      ),
+    ),
     removing ? h(RemoveConfirmation, {
       account,
       busy: busy === 'delete',

package/plugin-src/client/channels/feishu/index.js

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { FeishuLogoGlyph } from "../../channel-logos.js";
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from "../../credential-binding.js";
+import { CollapsibleAccountSection } from "../shared/collapsible-account.js";
 import { h } from "../../i18n.js";
 import {
   FEISHU_ENDPOINTS,
@@ -506,42 +507,49 @@ export function BotCard({
     ref: cardRef,
   },
     h("div", { className: "bxf-cardBody dim-botCardBody" },
-      h("div", { className: "bxf-connectedTop dim-botCardTop" },
-        h("div", { className: "bxf-botIdentity dim-botIdentity" },
-          h("div", { className: "bxf-avatar dim-botAvatar", "aria-hidden": "true" },
-            h(FeishuLogoGlyph, { size: 34 })),
-          h("div", { className: "bxf-botName dim-botName" },
-            h("h3", { id: titleId, title: bot.name }, bot.name),
-            h("p", { title: bot.appIdMasked }, bot.appIdMasked ?? "应用标识已安全保存")),
-        ),
-        h("div", { className: "dim-botCardTools" },
-          h(BotStatusMeta, {
-            className: "bxf-healthPill",
-            dotClassName: "bxf-dot",
-            tone,
-            stateLabel: HEALTH_LABELS[stateForDisplay] ?? "状态未知",
-            lastCheckedAt: health.lastCheckedAt,
-            formatCheckedTime,
-            healthState: stateForDisplay,
-          }),
-          h(BotSettingsButton, {
-            channel: "feishu",
-            botId: connection.botId,
-            botName: bot.name,
-            connected,
-            accessPolicy: connection.accessPolicy,
-            channelSettings: {
-              groupResponseMode: connection.groupResponseMode,
-              groupTopicReply: connection.groupTopicReply,
-              groupMessagePermissionGranted: connection.groupMessagePermissionGranted,
-            },
-          })),
-      ),
-      h(WorkspaceEditor, {
-        workspace: connection.workspace,
-        disabled: Boolean(busy),
-        onSave: onWorkspaceSave,
-      }),
+      h(CollapsibleAccountSection, {
+        id: `bxf-settings-${connection.botId.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
+        header: h("div", { className: "bxf-connectedTop dim-botCardTop" },
+          h("div", { className: "bxf-botIdentity dim-botIdentity" },
+            h("div", { className: "bxf-avatar dim-botAvatar", "aria-hidden": "true" },
+              h(FeishuLogoGlyph, { size: 34 })),
+            h("div", { className: "bxf-botName dim-botName" },
+              h("h3", { id: titleId, title: bot.name }, bot.name),
+              h("p", { title: bot.appIdMasked }, bot.appIdMasked ?? "应用标识已安全保存")),
+          ),
+          h("div", {
+            className: "dim-botCardTools",
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === "Enter" || event.key === " ") event.stopPropagation(); },
+          },
+            h(BotStatusMeta, {
+              className: "bxf-healthPill",
+              dotClassName: "bxf-dot",
+              tone,
+              stateLabel: HEALTH_LABELS[stateForDisplay] ?? "状态未知",
+              lastCheckedAt: health.lastCheckedAt,
+              formatCheckedTime,
+              healthState: stateForDisplay,
+            }),
+            h(BotSettingsButton, {
+              channel: "feishu",
+              botId: connection.botId,
+              botName: bot.name,
+              connected,
+              accessPolicy: connection.accessPolicy,
+              channelSettings: {
+                groupResponseMode: connection.groupResponseMode,
+                groupTopicReply: connection.groupTopicReply,
+                groupMessagePermissionGranted: connection.groupMessagePermissionGranted,
+              },
+            }))),
+      },
+        h(WorkspaceEditor, {
+          workspace: connection.workspace,
+          disabled: Boolean(busy),
+          onSave: onWorkspaceSave,
+        }),
       h(ModelEditor, {
         model: connection.model,
         disabled: Boolean(busy),
@@ -605,6 +613,7 @@ export function BotCard({
             className: "bxf-healthSummary dim-cardFeedback",
             role: "status",
           }, testNotice) : null),
+        ),
       ),
     ),
     removing

package/plugin-src/client/channels/qq/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { QqLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -184,12 +185,19 @@ export function AccountCard({
   const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
-      h('div', { className: 'ddt-accountTop dim-botCardTop' },
+      h(CollapsibleAccountSection, {
+        id: `qq-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+        header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
           h('div', { className: 'ddt-avatar dim-botAvatar dqq-avatar', 'aria-hidden': 'true' }, h(QqLogoGlyph, { size: 29 })),
           h('div', { className: 'dim-botName' },
             h('h3', null, account.bot.name), h('p', null, account.bot.appIdMasked))),
-        h('div', { className: 'dim-botCardTools' },
+        h('div', {
+            className: 'dim-botCardTools',
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+          },
           h(BotStatusMeta, {
             className: 'ddt-health',
             dotClassName: 'ddt-dot',
@@ -204,8 +212,9 @@ export function AccountCard({
             botName: account.bot.name,
             connected: account.connected,
             accessPolicy: account.accessPolicy,
-          }))),
-      h(WorkspaceEditor, {
+          })))
+      },
+        h(WorkspaceEditor, {
         workspace: account.workspace,
         disabled: Boolean(busy),
         onSave: onWorkspaceSave,
@@ -239,7 +248,9 @@ export function AccountCard({
             className: 'ddt-summary dim-cardFeedback',
             role: 'status',
             'aria-live': 'polite',
-          }, feedback) : null))),
+          }, feedback) : null)),
+      ),
+    ),
     removing ? h(RemoveConfirmation, {
       account, busy: busy === 'delete', onConfirm: onConfirmRemove, onCancel: onCancelRemove,
     }) : null);

package/plugin-src/client/channels/shared/collapsible-account.js

@@ -0,0 +1,80 @@
+/**
+ * Collapsible per-account card, shared by every IM channel.
+ *
+ * When several accounts are connected, each account's workspace / preset /
+ * context-enhancement editors make the list extremely long. This component
+ * renders the account header as the toggle itself: collapsed, the card shows
+ * only the header line; clicking the header expands the settings details.
+ *
+ * Design notes:
+ * - The whole header is the toggle (click + keyboard). Buttons rendered inside
+ *   the header must call stopPropagation so they keep their own behaviour.
+ * - A chevron sits at the end of the header line as the affordance.
+ * - Height animation uses grid-template-rows: 0fr -> 1fr (pure CSS).
+ * - Full a11y: the header is a button-like region with aria-expanded /
+ *   aria-controls; the details region keeps native semantics.
+ * - Honors prefers-reduced-motion.
+ * - Styles are managed by the IM settings plugin, not individual accounts.
+ */
+import * as React from 'react';
+import { h } from '../../i18n.js';
+
+/**
+ * Collapsible account card.
+ *
+ * `header` renders the always-visible header line; clicking it toggles.
+ * Any interactive control inside the header should stop the click event so it
+ * does not toggle the section (e.g. the bot settings button).
+ * `children` is the collapsed details region.
+ */
+export function CollapsibleAccountSection({
+  header,
+  defaultOpen = false,
+  open: controlledOpen,
+  onToggle,
+  id,
+  className = '',
+  children,
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const contentId = id ? `${id}-content` : undefined;
+
+  const toggle = () => {
+    if (controlledOpen === undefined) setUncontrolledOpen((value) => !value);
+    onToggle?.(!open);
+  };
+
+  const onKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+      event.preventDefault();
+      toggle();
+    }
+  };
+
+  return h('div', {
+    className: `dim-collapsibleAccount ${open ? 'is-open' : ''} ${className}`.trim(),
+    'data-open': open ? 'true' : 'false',
+  },
+    h('div', {
+      className: 'dim-collapsibleHead',
+      role: 'button',
+      tabIndex: 0,
+      onClick: toggle,
+      onKeyDown,
+      'aria-expanded': open ? 'true' : 'false',
+      'aria-controls': contentId,
+      'aria-label': open ? '收起该账号的设置' : '展开该账号的设置',
+    },
+      h('div', { className: 'dim-collapsibleHeaderContent' }, header),
+      h('span', { className: 'dim-collapsibleChevron', 'aria-hidden': 'true' }),
+    ),
+    h('div', {
+      id: contentId,
+      className: 'dim-collapsibleBody',
+      role: 'region',
+    },
+      h('div', { className: 'dim-collapsibleBodyInner' }, children),
+    ),
+  );
+}

package/plugin-src/client/channels/shared/token-channel.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { CredentialActionIcon, CredentialBindingPanel } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from './collapsible-account.js';
 import { h } from '../../i18n.js';
 import { installDingtalkStyles } from '../dingtalk/styles.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
@@ -88,33 +89,41 @@ export function createTokenChannelSettings(definition) {
     const identity = account.bot.username ? `@${account.bot.username}` : account.bot.idMasked;
     return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
       h('div', { className: 'ddt-cardBody dim-botCardBody' },
-        h('div', { className: 'ddt-accountTop dim-botCardTop' },
-          h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
-            h('div', { className: `ddt-avatar dim-botAvatar ${avatarClass}`, 'aria-hidden': 'true' },
-              h(LogoGlyph, { size: 29 })),
-            h('div', { className: 'dim-botName' },
-              h('h3', null, account.bot.name), h('p', null, identity))),
-          h('div', { className: 'dim-botCardTools' },
-            h(BotStatusMeta, {
-              className: 'ddt-health',
-              dotClassName: 'ddt-dot',
-              tone,
-              stateLabel,
-              lastCheckedAt: account.health.lastCheckedAt,
-              formatCheckedTime: checkedTime,
-            }),
-            h(BotSettingsButton, {
-              channel: channel.toLowerCase(),
-              botId: account.botId,
-              botName: account.bot.name,
-              connected: account.connected,
-              accessPolicy: account.accessPolicy,
-            }))),
-        h(WorkspaceEditor, {
-          workspace: account.workspace,
-          disabled: Boolean(busy),
-          onSave: onWorkspaceSave,
-        }),
+        h(CollapsibleAccountSection, {
+          id: `tok-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+          header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
+            h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
+              h('div', { className: `ddt-avatar dim-botAvatar ${avatarClass}`, 'aria-hidden': 'true' },
+                h(LogoGlyph, { size: 29 })),
+              h('div', { className: 'dim-botName' },
+                h('h3', null, account.bot.name), h('p', null, identity))),
+            h('div', {
+              className: 'dim-botCardTools',
+              // The header is the collapse toggle; keep inner controls clickable.
+              onClick: (event) => { event.stopPropagation(); },
+              onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+            },
+              h(BotStatusMeta, {
+                className: 'ddt-health',
+                dotClassName: 'ddt-dot',
+                tone,
+                stateLabel,
+                lastCheckedAt: account.health.lastCheckedAt,
+                formatCheckedTime: checkedTime,
+              }),
+              h(BotSettingsButton, {
+                channel: channel.toLowerCase(),
+                botId: account.botId,
+                botName: account.bot.name,
+                connected: account.connected,
+                accessPolicy: account.accessPolicy,
+              }))),
+        },
+          h(WorkspaceEditor, {
+            workspace: account.workspace,
+            disabled: Boolean(busy),
+            onSave: onWorkspaceSave,
+          }),
         h(ModelEditor, {
           model: account.model,
           disabled: Boolean(busy),
@@ -157,7 +166,9 @@ export function createTokenChannelSettings(definition) {
             testNotice ? h('div', {
               className: 'ddt-summary dim-cardFeedback',
               role: 'status',
-            }, testNotice) : null))),
+            }, testNotice) : null)),
+        ),
+      ),
       removing ? h('div', { className: 'ddt-confirm dim-confirm', role: 'alertdialog' },
         h('strong', null, `从 DeepSeek Harness 移除“${account.bot.name}”？`),
         h('p', null, `这会停止消息连接，并删除本机保存的 ${credentialNoun}、机器人配置及会话映射。${platformLabel}中的机器人不会被自动删除。`),

package/plugin-src/client/channels/wecom/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WecomLogoGlyph } from '../../channel-logos.js';
 import { CredentialActionIcon, CredentialBindingPanel, QrActionIcon } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -183,12 +184,19 @@ export function AccountCard({
   const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
-      h('div', { className: 'ddt-accountTop dim-botCardTop' },
+      h(CollapsibleAccountSection, {
+        id: `wec-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+        header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
           h('div', { className: 'ddt-avatar dim-botAvatar dwecom-avatar', 'aria-hidden': 'true' }, h(WecomLogoGlyph, { size: 29 })),
           h('div', { className: 'dim-botName' },
             h('h3', null, account.bot.name), h('p', null, account.bot.appIdMasked))),
-        h('div', { className: 'dim-botCardTools' },
+        h('div', {
+            className: 'dim-botCardTools',
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+          },
           h(BotStatusMeta, {
             className: 'ddt-health',
             dotClassName: 'ddt-dot',
@@ -203,8 +211,9 @@ export function AccountCard({
             botName: account.bot.name,
             connected: account.connected,
             accessPolicy: account.accessPolicy,
-          }))),
-      h(WorkspaceEditor, {
+          })))
+      },
+        h(WorkspaceEditor, {
         workspace: account.workspace,
         disabled: Boolean(busy),
         onSave: onWorkspaceSave,
@@ -238,7 +247,9 @@ export function AccountCard({
             className: 'ddt-summary dim-cardFeedback',
             role: 'status',
             'aria-live': 'polite',
-          }, feedback) : null))),
+          }, feedback) : null)),
+      ),
+    ),
     removing ? h(RemoveConfirmation, {
       account, busy: busy === 'delete', onConfirm: onConfirmRemove, onCancel: onCancelRemove,
     }) : null);

package/plugin-src/client/channels/weixin/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WeixinLogoGlyph } from '../../channel-logos.js';
 import { QrActionIcon } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import {
   WEIXIN_ENDPOINTS,
@@ -225,11 +226,18 @@ export function AccountCard({
   const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
   return h('article', { className: 'dxw-card dim-botCard', tabIndex: -1, 'data-bot-id': account.botId },
     h('div', { className: 'dxw-cardBody dim-botCardBody' },
-      h('div', { className: 'dxw-accountTop dim-botCardTop' },
+      h(CollapsibleAccountSection, {
+        id: `dxw-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+        header: h('div', { className: 'dxw-accountTop dim-botCardTop' },
         h('div', { className: 'dxw-accountIdentity dim-botIdentity' },
           h('div', { className: 'dxw-avatar dim-botAvatar', 'aria-hidden': 'true' }, h(WeixinLogoGlyph, { size: 27 })),
           h('div', { className: 'dim-botName' }, h('h3', null, account.bot.name), h('p', null, account.bot.accountIdMasked))),
-        h('div', { className: 'dim-botCardTools' },
+        h('div', {
+            className: 'dim-botCardTools',
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+          },
           h(BotStatusMeta, {
             className: 'dxw-health',
             dotClassName: 'dxw-dot',
@@ -244,8 +252,9 @@ export function AccountCard({
             botName: account.bot.name,
             connected: account.connected,
             accessPolicy: account.accessPolicy,
-          }))),
-      h(WorkspaceEditor, {
+          })))
+      },
+        h(WorkspaceEditor, {
         workspace: account.workspace,
         disabled: Boolean(busy),
         onSave: onWorkspaceSave,
@@ -281,7 +290,9 @@ export function AccountCard({
             className: 'dxw-summary dim-cardFeedback',
             role: 'status',
             'aria-live': 'polite',
-          }, feedback) : null))),
+          }, feedback) : null)),
+      ),
+    ),
     removing ? h('div', { className: 'dxw-confirm dim-confirm', role: 'alertdialog' },
       h('strong', null, '从此 Harness 移除这个微信账号？'),
       h('p', null, '这会停止消息连接，并删除本机保存的 bot_token、账号配置和会话映射。其他微信账号不受影响。'),

package/plugin-src/client/channels/whatsapp/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { WhatsappLogoGlyph } from '../../channel-logos.js';
 import { QrActionIcon } from '../../credential-binding.js';
+import { CollapsibleAccountSection } from '../shared/collapsible-account.js';
 import { h } from '../../i18n.js';
 import { WorkspaceEditor } from '../../workspace-editor.js';
 import { ContextEnhancementEditor } from '../../context-enhancement.js';
@@ -203,7 +204,9 @@ export function WhatsappAccountCard({
   const summary = account.error?.message ?? (account.connected ? null : account.health.summary);
   return h('article', { className: 'ddt-card dim-botCard', 'data-bot-id': account.botId },
     h('div', { className: 'ddt-cardBody dim-botCardBody' },
-      h('div', { className: 'ddt-accountTop dim-botCardTop' },
+      h(CollapsibleAccountSection, {
+        id: `wsp-settings-${account.botId.replace(/[^a-zA-Z0-9_-]/g, '-')}`,
+        header: h('div', { className: 'ddt-accountTop dim-botCardTop' },
         h('div', { className: 'ddt-accountIdentity dim-botIdentity' },
           h('div', {
             className: 'ddt-avatar dim-botAvatar dwa-avatar',
@@ -211,7 +214,12 @@ export function WhatsappAccountCard({
           }, h(WhatsappLogoGlyph, { size: 29 })),
           h('div', { className: 'dim-botName' },
             h('h3', null, account.bot.name), h('p', null, account.bot.idMasked))),
-        h('div', { className: 'dim-botCardTools' },
+        h('div', {
+            className: 'dim-botCardTools',
+            // The header is the collapse toggle; keep inner controls clickable.
+            onClick: (event) => { event.stopPropagation(); },
+            onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') event.stopPropagation(); },
+          },
           h(BotStatusMeta, {
             className: 'ddt-health',
             dotClassName: 'ddt-dot',
@@ -226,8 +234,9 @@ export function WhatsappAccountCard({
             botName: account.bot.name,
             connected: account.connected,
             accessPolicy: account.accessPolicy,
-          }))),
-      h(WorkspaceEditor, {
+          })))
+      },
+        h(WorkspaceEditor, {
         workspace: account.workspace,
         disabled: Boolean(busy),
         onSave: onWorkspaceSave,
@@ -264,7 +273,9 @@ export function WhatsappAccountCard({
           testNotice ? h('div', {
             className: 'ddt-summary dim-cardFeedback',
             role: 'status',
-          }, testNotice) : null))),
+          }, testNotice) : null)),
+      ),
+    ),
     removing ? h(RemoveConfirmation, {
       account,
       busy: busy === 'delete',

package/plugin-src/client/i18n.js

@@ -227,6 +227,8 @@ const EN = Object.freeze({
   '手动接入': 'Manual setup',
   '收起凭据': 'Hide credentials',
   '收起接入': 'Hide setup',
+  '展开该账号的设置': "Expand this account's settings",
+  '收起该账号的设置': "Collapse this account's settings",
   '接入机器人': 'Connect bot',
   '开始接入': 'Start setup',
   '在线': 'online',

package/plugin-src/client/styles.js

@@ -358,6 +358,17 @@ const CSS = String.raw`
 .dim-panel .dim-botCard { position: relative; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; border: 1px solid var(--dsw-alias-border-l2, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 1px 2px rgb(31 35 41 / 3%); }
 .dim-panel .dim-botCard::before { display: none; }
 .dim-panel .dim-botCardBody { position: relative; min-width: 0; width: 100%; max-width: 100%; padding: 12px; }
+.dim-collapsibleAccount { min-width: 0; display: flex; flex-direction: column; }
+.dim-collapsibleHead { min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-user-select: none; }
+.dim-collapsibleHead:focus-visible { outline: 2px solid var(--dsw-alias-state-business-primary, #3370ff); outline-offset: 2px; border-radius: 8px; }
+.dim-collapsibleHeaderContent { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; }
+.dim-collapsibleChevron { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 9px; height: 9px; border-right: 1.6px solid var(--dsw-alias-label-tertiary, #8f959e); border-bottom: 1.6px solid var(--dsw-alias-label-tertiary, #8f959e); transform: rotate(-45deg); transition: transform .22s cubic-bezier(.4, 0, .2, 1); transform-origin: 50% 50%; }
+.dim-collapsibleAccount.is-open .dim-collapsibleChevron { transform: rotate(45deg); }
+/* Animate height without measuring content; hide collapsed controls from focus and accessibility. */
+.dim-collapsibleBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1); }
+.dim-collapsibleAccount.is-open > .dim-collapsibleBody { grid-template-rows: 1fr; }
+.dim-collapsibleBodyInner { min-height: 0; overflow: hidden; }
+.dim-collapsibleAccount:not(.is-open) .dim-collapsibleBodyInner { visibility: hidden; }
 .dim-panel .dim-botCardTop { min-width: 0; max-width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
 .dim-panel .dim-botIdentity { min-width: 0; flex: 1 1 0; display: flex; align-items: center; gap: 10px; }
 .dim-panel .dim-botAvatar { flex: none; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; box-shadow: none; }
@@ -634,6 +645,7 @@ const CSS = String.raw`
 @media (prefers-reduced-motion: reduce) {
   .dim-page * { transition-duration: .01ms !important; }
   .dim-directoryPickerSpinner { animation-duration: 1.8s; }
+  .dim-collapsibleBody, .dim-collapsibleChevron { transition: none !important; }
 }
 `;
 

package/src/channels/shared/i18n-en/wecom.mjs

@@ -1,5 +1,29 @@
 // English translations (wecom area). Keys are exact Chinese literals passed to t().
 export default {
+  '/menu 或 /m  打开可点击的功能菜单': '/menu or /m  Open the interactive menu',
+  '保持当前': 'Keep current',
+  '会话': 'Session',
+  '模型': 'Model',
+  '预设': 'Preset',
+  '跟随默认模型': 'Default model',
+  '跟随 Host 默认': 'Follow Host default',
+  '新会话': 'New session',
+  '上一页': 'Previous',
+  '下一页': 'Next',
+  '返回': 'Back',
+  '更多选项…': 'More options…',
+  '选择会话、模型或预设后，点击应用设置。': 'Choose a session, model or preset, then apply settings.',
+  '应用设置': 'Apply settings',
+  '工作区与任务': 'Workspace & tasks',
+  '应用选择': 'Apply selection',
+  '请选择一个选项后再应用。': 'Select one option before applying.',
+  '设置未改变。': 'Settings unchanged.',
+  '已收到操作，请查看下方结果。': 'Action received. See the result below.',
+  '重新打开菜单': 'Reopen menu',
+  '暂无可用选项。': 'No options are available.',
+  '预设仅用于之后的新会话。': 'Presets apply to future new sessions.',
+  '部分模型暂不可用，可稍后重试。': 'Some models are unavailable. Try again later.',
+  '工作区已变化，请从新菜单重新选择。': 'The workspace changed. Please select again from the new menu.',
   // Help text (wecom-bridge.mjs)
   '企业微信机器人已连接 DeepSeek Harness。': 'The Enterprise WeChat bot is connected to DeepSeek Harness.',