@xmanrui/dsh-im 0.1.0

package/plugin-src/client/styles.js

@@ -0,0 +1,192 @@
+export const IM_STYLE_ID = 'xmanrui-dsh-im-settings';
+
+const CSS = String.raw`
+.dim-page {
+  --dim-blue: #3370ff;
+  --dim-blue-soft: color-mix(in srgb, var(--dim-blue) 9%, transparent);
+  width: 100%;
+  max-width: 1080px;
+  padding: 2px 0 30px;
+  color: var(--dsw-alias-label-primary, #1f2329);
+  box-sizing: border-box;
+}
+.dim-page *, .dim-page *::before, .dim-page *::after { box-sizing: border-box; }
+.dim-title { margin: 0 0 26px; }
+.dim-title p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 20px; white-space: nowrap; }
+.dim-layout { display: grid; grid-template-columns: 174px 1px minmax(0, 1fr); gap: 24px; align-items: start; }
+.dim-rail { max-height: 520px; display: grid; align-content: start; gap: 8px; overflow-y: auto; padding: 1px 4px 1px 1px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-line-border, #dfe1e5) transparent; }
+.dim-rail::-webkit-scrollbar { width: 4px; }
+.dim-rail::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--dsw-alias-line-border, #dfe1e5); }
+.dim-channel { width: 100%; min-height: 48px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--dsw-alias-line-border, #eef0f3); border-radius: 14px; color: inherit; background: var(--dsw-alias-bg-layer-3, #fff); box-shadow: 0 2px 8px rgb(31 35 41 / 3%); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
+.dim-channel:hover { border-color: color-mix(in srgb, var(--dim-blue) 25%, var(--dsw-alias-line-border, #eef0f3)); background: color-mix(in srgb, var(--dim-blue) 2%, var(--dsw-alias-bg-layer-3, #fff)); box-shadow: 0 5px 16px rgb(31 35 41 / 5%); }
+.dim-channel[aria-selected="true"] { border-color: color-mix(in srgb, var(--dim-blue) 43%, white); color: var(--dim-blue); background: color-mix(in srgb, var(--dim-blue) 9%, white); box-shadow: 0 3px 12px rgb(51 112 255 / 7%); }
+.dim-channel:focus-visible { outline: none; border-color: color-mix(in srgb, var(--dim-blue) 72%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dim-blue) 24%, transparent) inset, 0 3px 12px rgb(51 112 255 / 7%); }
+.dim-logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; box-shadow: 0 1px 3px rgb(31 35 41 / 7%); }
+.dim-logo svg { display: block; width: 20px; height: 20px; }
+.dim-logoWeixin { color: white; background: #07c160; }
+.dim-logoWeixin svg { width: 19px; height: 19px; }
+.dim-logoFeishu { background: white; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); }
+.dim-logoFeishu svg { width: 28px; height: 28px; }
+.dim-logoDingtalk { color: white; background: #1677ff; }
+.dim-logoDingtalk svg { width: 24px; height: 24px; }
+.dim-logoQq { color: white; background: #1677ff; }
+.dim-logoQq svg { width: 21px; height: 21px; }
+.dim-logoWecom { background: white; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); }
+.dim-logoWecom svg { width: 22px; height: 22px; }
+.dim-logoTelegram { color: white; background: #229ed9; }
+.dim-logoTelegram svg { width: 21px; height: 21px; }
+.dim-logoDiscord { color: white; background: #5865f2; }
+.dim-logoDiscord svg { width: 21px; height: 21px; }
+.dim-channelCopy { min-width: 0; display: block; }
+.dim-channelCopy strong { overflow: hidden; color: inherit; font-size: 14px; line-height: 20px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
+.dim-divider { width: 1px; min-height: 520px; background: var(--dsw-alias-line-divider, #eef0f3); }
+.dim-panel { min-width: 0; container-type: inline-size; }
+.dim-panel .bxf-page, .dim-panel .dxw-page, .dim-panel .ddt-page, .dim-panel .dqq-page, .dim-panel .dwecom-page { width: 100%; max-width: none; padding: 0 0 24px; }
+.dim-panel .bxf-heading, .dim-panel .dxw-heading, .dim-panel .ddt-heading { justify-content: flex-end; }
+.dim-panel .bxf-headingTools, .dim-panel .dxw-tools, .dim-panel .ddt-tools { width: 100%; justify-content: space-between; }
+.dim-panel .dim-bindActions { min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
+.dim-panel .bxf-headingTools .dim-scanButton, .dim-panel .dxw-tools .dim-scanButton, .dim-panel .ddt-tools .dim-scanButton { flex: none; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #1677ff; border-radius: 8px; color: #fff; background: #1677ff; box-shadow: none; font: inherit; font-size: 13px; font-weight: 560; white-space: nowrap; }
+.dim-panel .bxf-headingTools .dim-scanButton:hover:not(:disabled), .dim-panel .dxw-tools .dim-scanButton:hover:not(:disabled), .dim-panel .ddt-tools .dim-scanButton:hover:not(:disabled) { border-color: #0958d9; background: #0958d9; }
+.dim-panel .dim-credentialButton { flex: none; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #86909c; border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); box-shadow: 0 1px 2px rgb(31 35 41 / 5%); font: inherit; font-size: 13px; font-weight: 560; line-height: normal; white-space: nowrap; }
+.dim-panel .dim-actionIcon { width: 15px; height: 15px; flex: 0 0 15px; }
+.dim-panel .dim-credentialButton:hover:not(:disabled) { border-color: #4e5969; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.dim-panel .dim-credentialButton[aria-pressed="true"] { border-color: #4e5969; background: var(--dsw-alias-fill-secondary, #f2f3f5); box-shadow: inset 0 0 0 1px rgb(78 89 105 / 8%); }
+.dim-panel .bxf-headingTools .dim-onlineBadge, .dim-panel .dxw-tools .dim-onlineBadge, .dim-panel .ddt-tools .dim-onlineBadge { flex: none; min-height: 30px; display: inline-flex; align-items: center; gap: 0; padding: 0 11px; border: 0; border-radius: 999px; color: var(--dsw-alias-label-secondary, #646a73); background: var(--dsw-alias-fill-secondary, #f2f3f5); font: inherit; font-size: 12px; font-weight: 400; line-height: normal; white-space: nowrap; }
+.dim-panel .dim-channelPage { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 18px; padding: 0 0 24px; color: var(--dsw-alias-label-primary, #1f2329); box-sizing: border-box; }
+.dim-panel .dim-surfaceCard { position: relative; overflow: hidden; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-body, #fff); box-shadow: 0 1px 2px rgb(31 35 41 / 3%); }
+.dim-panel .dim-surfaceCard::before { display: none; }
+.dim-panel .dim-surfaceBody { padding: 24px; }
+.dim-panel .dim-credentialPanel { display: grid; gap: 18px; padding: 20px; }
+.dim-panel .dim-credentialTitle { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 17px; line-height: 1.35; font-weight: 650; }
+.dim-panel .dim-credentialForm { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
+.dim-panel .dim-credentialFormSingle { grid-template-columns: minmax(0, 1fr); }
+.dim-panel .dim-credentialField { min-width: 0; display: grid; gap: 7px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: normal; font-weight: 560; }
+.dim-panel .dim-credentialField input { width: 100%; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 8px; outline: none; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; transition: border-color .16s ease, box-shadow .16s ease; }
+.dim-panel .dim-credentialField input:focus { border-color: #4e5969; box-shadow: 0 0 0 3px rgb(78 89 105 / 10%); }
+.dim-panel .dim-credentialField input::placeholder { color: var(--dsw-alias-label-tertiary, #8f959e); font-family: inherit; }
+.dim-panel .dim-credentialError, .dim-panel .dim-credentialActions { grid-column: 1 / -1; }
+.dim-panel .dim-credentialError { margin: 0; color: var(--dsw-alias-state-error-primary, #d54941); font-size: 12px; line-height: 1.5; }
+.dim-panel .dim-credentialActions { margin-top: 0; }
+.dim-panel .dim-listSection { display: flex; flex-direction: column; gap: 0; }
+.dim-panel .dim-listHeading { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 9px; padding: 0; }
+.dim-panel .dim-listHeading h3 { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 14px; line-height: normal; font-weight: 650; }
+.dim-panel .dim-botList { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
+.dim-panel .dim-loadingView { padding: 38px; color: var(--dsw-alias-label-secondary, #646a73); text-align: center; }
+.dim-panel .dim-loadingView h3 { margin: 0 0 7px; color: var(--dsw-alias-label-primary, #1f2329); font-size: 17px; line-height: normal; font-weight: 650; }
+.dim-panel .dim-loadingView p { margin: 0; line-height: 1.6; }
+.dim-panel .dim-spinner { width: 24px; height: 24px; margin: 0 auto 13px; border: 3px solid var(--dsw-alias-line-border, #e6e8eb); border-top-color: #1677ff; border-radius: 50%; animation: dim-spin .8s linear infinite; }
+@keyframes dim-spin { to { transform: rotate(360deg); } }
+.dim-panel .dim-emptyView { min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; gap: 30px; }
+.dim-panel .dim-emptyCopy { min-width: 0; }
+.dim-panel .dim-emptyCopy h3 { margin: 8px 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 18px; line-height: 1.35; font-weight: 650; }
+.dim-panel .dim-emptyCopy > p { max-width: 560px; margin: 0; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.dim-panel .dim-emptyBrand { width: 110px; height: 110px; display: grid; place-items: center; justify-self: center; border-radius: 28px; box-shadow: 0 18px 45px rgb(22 119 255 / 18%); }
+.dim-panel .dim-stateLabel { display: inline-flex; align-items: center; gap: 8px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: normal; font-weight: 600; }
+.dim-panel .dim-stateDot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dsw-alias-label-tertiary, #8f959e); box-shadow: none; }
+.dim-panel .dim-stateDot[data-tone="success"] { background: var(--dsw-alias-state-success-primary, #20a162); }
+.dim-panel .dim-stateDot[data-tone="warning"] { background: var(--dsw-alias-state-warning-primary, #d97706); }
+.dim-panel .dim-stateDot[data-tone="error"] { background: var(--dsw-alias-state-error-primary, #d54941); }
+.dim-panel .dim-viewActions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
+.dim-panel .dim-viewActions .bxf-button, .dim-panel .dim-viewActions .dxw-button, .dim-panel .dim-viewActions .ddt-button { min-height: 34px; padding: 0 13px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); box-shadow: none; font: inherit; font-size: 13px; font-weight: 560; line-height: normal; white-space: nowrap; }
+.dim-panel .dim-viewActions .bxf-button[data-kind="primary"], .dim-panel .dim-viewActions .dxw-button[data-kind="primary"], .dim-panel .dim-viewActions .ddt-button[data-kind="primary"] { border-color: #1677ff; color: #fff; background: #1677ff; box-shadow: none; }
+.dim-panel .dim-viewActions .bxf-button[data-kind="danger"], .dim-panel .dim-viewActions .dxw-button[data-kind="danger"], .dim-panel .dim-viewActions .ddt-button[data-kind="danger"] { color: var(--dsw-alias-state-error-primary, #d54941); }
+.dim-panel .dim-qrLayout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start; }
+.dim-panel .dim-qrColumn { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.dim-panel .dim-qrFrame { position: relative; width: min(270px, 100%); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 16px; background: #fff; }
+.dim-panel .dim-qrFrame::before { content: ""; position: absolute; inset: 7px; z-index: 0; border: 1px solid color-mix(in srgb, #1677ff 16%, var(--dsw-alias-line-border, #dfe1e5)); border-radius: 12px; pointer-events: none; }
+.dim-panel .dim-qrFrame::after { display: none; }
+.dim-panel .dim-qrFrame img { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; }
+.dim-panel .dim-qrFallback { position: relative; z-index: 1; display: grid; place-items: center; gap: 8px; color: var(--dsw-alias-label-secondary, #646a73); font-size: 13px; line-height: 1.5; text-align: center; }
+.dim-panel .dim-qrExpired { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; color: var(--dsw-alias-label-primary, #1f2329); background: rgb(255 255 255 / 92%); font-size: 15px; line-height: 1.6; font-weight: 650; text-align: center; white-space: pre-line; backdrop-filter: blur(3px); }
+.dim-panel .dim-countdown { width: min(270px, 100%); margin: 0; color: var(--dsw-alias-label-secondary, #646a73); font-size: 12px; line-height: normal; }
+.dim-panel .dim-countdownTop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
+.dim-panel .dim-countdownTop strong { color: var(--dsw-alias-label-primary, #1f2329); font-weight: 650; }
+.dim-panel .dim-progress { height: 4px; overflow: hidden; margin: 0; border-radius: 99px; background: var(--dsw-alias-fill-secondary, #eef0f3); }
+.dim-panel .dim-progress span { display: block; width: var(--bxf-progress, var(--dxw-progress, var(--ddt-progress, 0%))); height: 100%; border-radius: inherit; background: #1677ff; transition: width .25s linear; }
+.dim-panel .dim-qrCopy { min-width: 0; overflow-wrap: anywhere; }
+.dim-panel .dim-qrCopy h3 { margin: 9px 0 8px; color: var(--dsw-alias-label-primary, #1f2329); font-size: 18px; line-height: 1.35; font-weight: 650; }
+.dim-panel .dim-qrCopy > p { margin: 0; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.65; }
+.dim-panel .dim-steps { margin: 18px 0 16px; padding: 0; list-style: none; counter-reset: dim-step; }
+.dim-panel .dim-steps li { position: relative; min-height: 28px; display: flex; align-items: center; padding: 5px 0 5px 36px; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.5; counter-increment: dim-step; }
+.dim-panel .dim-steps li::before { content: counter(dim-step); position: absolute; left: 0; top: 4px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #1677ff; background: color-mix(in srgb, #1677ff 10%, white); font-size: 12px; font-weight: 650; }
+.dim-panel .dim-specialView { padding: 32px; text-align: center; }
+.dim-panel .dim-statusNotice { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary, #d54941) 22%, white); border-radius: 10px; color: var(--dsw-alias-state-error-primary, #d54941); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #d54941) 6%, white); font-size: 13px; line-height: 1.5; }
+.dim-panel .dim-inlineError { display: flex; align-items: flex-start; flex-direction: column; gap: 10px; padding: 22px; color: var(--dsw-alias-state-error-primary, #d54941); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #d54941) 6%, white); }
+.dim-panel .dim-inlineError > div { min-width: 0; }
+.dim-panel .dim-inlineError h3 { margin: 0; color: inherit; font-size: 17px; line-height: 1.35; font-weight: 650; }
+.dim-panel .dim-inlineError p { margin: 7px 0 0; color: inherit; line-height: 1.6; }
+.dim-panel .dim-confirm { padding: 18px 24px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.dim-panel .dim-confirm strong, .dim-panel .dim-confirm h4 { margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 14px; line-height: 1.4; font-weight: 650; }
+.dim-panel .dim-confirm p { margin: 7px 0 0; color: var(--dsw-alias-label-secondary, #646a73); line-height: 1.6; }
+.dim-panel .dim-cardFooter { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 16px; border-top: 1px solid var(--dsw-alias-line-divider, #eef0f3); }
+.dim-panel .dim-cardSummary { min-width: 0; color: var(--dsw-alias-label-secondary, #646a73); font: inherit; font-size: 12px; font-weight: 400; line-height: normal; }
+.dim-panel .dim-cardActions { flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 0 0 0 auto; }
+.dim-panel .dim-cardActions .dim-cardAction { flex: none; min-height: 34px; padding: 0 13px; border: 1px solid var(--dsw-alias-line-border, #dfe1e5); border-radius: 8px; color: var(--dsw-alias-label-primary, #1f2329); background: var(--dsw-alias-bg-body, #fff); font: inherit; font-size: 13px; font-weight: 560; line-height: normal; white-space: nowrap; }
+.dim-panel .dim-cardActions .dim-cardAction:hover:not(:disabled) { border-color: #aeb3bb; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.dim-panel .dim-cardActions .dim-cardAction[data-kind="danger"] { color: var(--dsw-alias-state-error-primary, #d54941); }
+.dim-panel .dim-botCard { position: relative; overflow: hidden; border: 1px solid var(--dsw-alias-line-border, #e5e6eb); border-radius: 14px; background: var(--dsw-alias-bg-body, #fff); box-shadow: 0 1px 2px rgb(31 35 41 / 3%); }
+.dim-panel .dim-botCard::before { display: none; }
+.dim-panel .dim-botCardBody { position: relative; padding: 24px; }
+.dim-panel .dim-botCardTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.dim-panel .dim-botIdentity { min-width: 0; display: flex; align-items: center; gap: 12px; }
+.dim-panel .dim-botAvatar { flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; box-shadow: none; }
+.dim-panel .dim-botAvatar svg { width: 29px; height: 29px; }
+.dim-panel .dim-botName { min-width: 0; }
+.dim-panel .dim-botName h3 { overflow: hidden; margin: 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 15px; font-weight: 650; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
+.dim-panel .dim-botName p { overflow: hidden; margin: 4px 0 0; color: var(--dsw-alias-label-secondary, #646a73); font: 12px ui-monospace, SFMono-Regular, monospace; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
+.dim-panel .dim-botCard .dim-botHealth { flex: none; min-height: 0; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-radius: 0; color: var(--dsw-alias-label-secondary, #646a73); background: transparent; font: inherit; font-size: 12px; font-weight: 400; line-height: normal; white-space: nowrap; }
+.dim-panel .dim-botCard .dim-healthDot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #aeb3bb; box-shadow: none; }
+.dim-panel .dim-botCard .dim-healthDot[data-tone="success"] { background: var(--dsw-alias-state-success-primary, #20a162); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-success-primary, #20a162) 14%, transparent); }
+.dim-panel .dim-botCard .dim-healthDot[data-tone="warning"] { background: var(--dsw-alias-state-warning-primary, #d97706); }
+.dim-panel .dim-botCard .dim-healthDot[data-tone="error"] { background: var(--dsw-alias-state-error-primary, #d54941); }
+.dim-panel .dim-botMetrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
+.dim-panel .dim-botMetric { min-width: 0; padding: 12px; border: 0; border-radius: 9px; background: var(--dsw-alias-fill-tertiary, #f7f8fa); }
+.dim-panel .dim-botMetric dt { margin: 0; color: var(--dsw-alias-label-tertiary, #8f959e); font-size: 11px; font-weight: 400; line-height: normal; }
+.dim-panel .dim-botMetric dd { overflow: hidden; margin: 5px 0 0; color: var(--dsw-alias-label-primary, #1f2329); font-size: 13px; font-weight: 400; line-height: normal; text-overflow: ellipsis; white-space: nowrap; }
+.dim-panel .dim-botCard .dim-cardFooter { margin-top: 0; }
+.dim-panel .ddt-headingCopy { display: none; }
+.dim-panel .ddt-qrFrame, .dim-panel .ddt-countdown { width: min(270px, 100%); }
+@container (max-width: 680px) {
+  .dim-panel .dim-credentialForm { grid-template-columns: minmax(0, 1fr); }
+  .dim-panel .dim-credentialError, .dim-panel .dim-credentialActions { grid-column: auto; }
+  .dim-panel .dim-emptyView { min-height: 0; grid-template-columns: minmax(0, 1fr); }
+  .dim-panel .dim-emptyBrand { display: none; }
+  .dim-panel .dim-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
+  .dim-panel .dim-qrColumn { width: 100%; min-width: 0; }
+  .dim-panel .dim-qrCopy { width: 100%; min-width: 0; overflow-wrap: anywhere; }
+  .dim-panel .ddt-qrLayout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
+  .dim-panel .ddt-qrColumn { width: 100%; min-width: 0; }
+  .dim-panel .ddt-qrCopy { width: 100%; min-width: 0; overflow-wrap: anywhere; }
+}
+@media (max-width: 840px) {
+  .dim-title { align-items: flex-start; }
+  .dim-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
+  .dim-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .dim-divider { display: none; }
+  .dim-rail { max-height: none; overflow: visible; padding-right: 1px; }
+  .dim-channel { min-height: 48px; }
+}
+@media (max-width: 720px) {
+  .dim-panel .dim-botCardTop { flex-direction: column; align-items: stretch; }
+}
+@media (max-width: 560px) {
+  .dim-title { flex-direction: column; gap: 10px; }
+  .dim-title p { white-space: normal; }
+  .dim-rail { grid-template-columns: minmax(0, 1fr); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .dim-page * { transition-duration: .01ms !important; }
+}
+`;
+
+export function installImStyles() {
+  if (typeof document === 'undefined') return () => {};
+  const existing = document.querySelector(`style[data-plugin-css="${IM_STYLE_ID}"]`);
+  if (existing) return () => {};
+  const style = document.createElement('style');
+  style.dataset.plugin = '@xmanrui/dsh-im';
+  style.dataset.pluginCss = IM_STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  return () => style.remove();
+}

package/plugin-src/host/build.mjs

@@ -0,0 +1,24 @@
+import { mkdir } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { build } from 'esbuild';
+
+const sourceDirectory = dirname(fileURLToPath(import.meta.url));
+const packageRoot = resolve(sourceDirectory, '../..');
+const outputPath = resolve(packageRoot, 'lib/index.js');
+
+await mkdir(dirname(outputPath), { recursive: true });
+await build({
+  entryPoints: [resolve(sourceDirectory, 'index.mjs')],
+  bundle: true,
+  format: 'esm',
+  platform: 'node',
+  target: ['node22'],
+  packages: 'external',
+  outfile: outputPath,
+  sourcemap: false,
+  legalComments: 'none',
+});
+
+console.log(`Wrote ${outputPath}`);

package/plugin-src/host/channels/dingtalk/connection-supervisor.mjs

@@ -0,0 +1,130 @@
+const DEFAULT_RETRY_DELAYS_MS = Object.freeze([250, 1_000, 3_000, 5_000, 10_000, 30_000]);
+
+function retryDelays(value) {
+  if (!Array.isArray(value) || value.length === 0) return [...DEFAULT_RETRY_DELAYS_MS];
+  const valid = value.filter((delay) => Number.isFinite(delay) && delay >= 0);
+  return valid.length > 0 ? valid : [...DEFAULT_RETRY_DELAYS_MS];
+}
+
+export class ConnectionSupervisor {
+  #controller;
+  #harness;
+  #logger;
+  #retryDelays;
+  #healthyIntervalMs;
+  #setTimeout;
+  #clearTimeout;
+  #timer = null;
+  #running = null;
+  #retryIndex = 0;
+  #closed = false;
+  #started = false;
+  #ready;
+  #resolveReady;
+
+  constructor({
+    controller,
+    harness,
+    logger = console,
+    retryDelaysMs,
+    healthyIntervalMs = 15_000,
+    setTimeoutImpl = setTimeout,
+    clearTimeoutImpl = clearTimeout,
+  }) {
+    if (!controller || typeof controller.initialize !== 'function' || typeof controller.status !== 'function') {
+      throw new TypeError('ConnectionSupervisor requires a controller');
+    }
+    if (!harness || typeof harness.ensureRunning !== 'function') {
+      throw new TypeError('ConnectionSupervisor requires a Harness client');
+    }
+    this.#controller = controller;
+    this.#harness = harness;
+    this.#logger = logger;
+    this.#retryDelays = retryDelays(retryDelaysMs);
+    this.#healthyIntervalMs = Number.isFinite(healthyIntervalMs) && healthyIntervalMs >= 0
+      ? healthyIntervalMs
+      : 15_000;
+    this.#setTimeout = setTimeoutImpl;
+    this.#clearTimeout = clearTimeoutImpl;
+    this.#ready = new Promise((resolve) => {
+      this.#resolveReady = resolve;
+    });
+  }
+
+  get ready() {
+    return this.#ready;
+  }
+
+  start() {
+    if (this.#started || this.#closed) return this;
+    this.#started = true;
+    this.#schedule(0);
+    return this;
+  }
+
+  async close() {
+    if (this.#closed) return;
+    this.#closed = true;
+    if (this.#timer !== null) this.#clearTimeout(this.#timer);
+    this.#timer = null;
+    await this.#running?.catch(() => undefined);
+    this.#resolveReady?.(null);
+    this.#resolveReady = null;
+  }
+
+  #schedule(delayMs) {
+    if (this.#closed) return;
+    this.#timer = this.#setTimeout(() => {
+      this.#timer = null;
+      void this.#run();
+    }, delayMs);
+    this.#timer?.unref?.();
+  }
+
+  async #run() {
+    if (this.#closed || this.#running) return;
+    const operation = this.#reconcile();
+    this.#running = operation;
+    try {
+      await operation;
+    } finally {
+      if (this.#running === operation) this.#running = null;
+    }
+  }
+
+  async #reconcile() {
+    try {
+      await this.#harness.ensureRunning();
+      if (this.#closed) return;
+      const status = await this.#controller.initialize();
+      if (this.#closed) return;
+      this.#resolveReady?.(status);
+      this.#resolveReady = null;
+      const { configured, connected } = status.totals;
+      if (connected < configured) {
+        const delayMs = this.#retryDelays[Math.min(this.#retryIndex, this.#retryDelays.length - 1)];
+        this.#retryIndex += 1;
+        this.#logger.warn?.(
+          `[dsh-dingtalk] ${connected}/${configured} bots connected; retrying in ${delayMs}ms`,
+        );
+        this.#schedule(delayMs);
+        return;
+      }
+      this.#retryIndex = 0;
+      this.#schedule(this.#healthyIntervalMs);
+    } catch (error) {
+      if (this.#closed) return;
+      const delayMs = this.#retryDelays[Math.min(this.#retryIndex, this.#retryDelays.length - 1)];
+      this.#retryIndex += 1;
+      this.#logger.warn?.(
+        `[dsh-dingtalk] connection reconciliation failed; retrying in ${delayMs}ms`,
+        error,
+      );
+      this.#schedule(delayMs);
+    }
+  }
+}
+
+export function createConnectionSupervisor(options) {
+  return new ConnectionSupervisor(options);
+}

package/plugin-src/host/channels/dingtalk/index.mjs

@@ -0,0 +1,39 @@
+import { createProductionController } from './production.mjs';
+import { installDingtalkRpc } from './rpc.mjs';
+
+export const name = 'dsh-dingtalk-host';
+export const inject = ['connection', 'credentials', 'webServer'];
+
+export async function apply(ctx, config = {}) {
+  if (config?.controller) {
+    return installDingtalkRpc(ctx, config.controller, config.rpcOptions, config.rpcAuthority);
+  }
+
+  const production = await createProductionController(ctx, config, config.internals);
+  const disposeRpc = installDingtalkRpc(
+    ctx,
+    production.controller,
+    config.rpcOptions,
+    config.rpcAuthority,
+  );
+  ctx.effect(() => async () => {
+    await production.close();
+  }, 'dsh-dingtalk: close bot connections');
+  return disposeRpc;
+}
+
+export function createDingtalkHostPlugin(config) {
+  return Object.freeze({ name, inject, apply: (ctx) => apply(ctx, config) });
+}
+
+export { createConnectionSupervisor, ConnectionSupervisor } from './connection-supervisor.mjs';
+export { createProductionController } from './production.mjs';
+export {
+  DINGTALK_ENDPOINTS,
+  DINGTALK_RPC_CHANNEL,
+  DINGTALK_RPC_ENDPOINTS,
+  createDingtalkRpcHandler,
+  installDingtalkRpc,
+} from './rpc.mjs';
+export { DingtalkController } from '../../../../src/channels/dingtalk/dingtalk-controller.mjs';
+export { DingtalkRuntime } from '../../../../src/channels/dingtalk/dingtalk-runtime.mjs';

package/plugin-src/host/channels/dingtalk/production.mjs

@@ -0,0 +1,122 @@
+import { unlink } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join, resolve } from 'node:path';
+
+import { DingtalkConfigStore } from '../../../../src/channels/dingtalk/config-store.mjs';
+import { DingtalkDeviceAuth } from '../../../../src/channels/dingtalk/device-auth.mjs';
+import { DingtalkController } from '../../../../src/channels/dingtalk/dingtalk-controller.mjs';
+import { DingtalkRuntime } from '../../../../src/channels/dingtalk/dingtalk-runtime.mjs';
+import { HarnessClient } from '../../../../src/channels/dingtalk/harness-client.mjs';
+import { DingtalkStateStore } from '../../../../src/channels/dingtalk/state-store.mjs';
+import { createConnectionSupervisor } from './connection-supervisor.mjs';
+
+function harnessOrigin(webServer, configured) {
+  if (configured !== undefined) return new URL(configured);
+  const port = webServer?.port;
+  if (!Number.isInteger(port) || port < 1 || port > 65_535) {
+    throw new Error('dsh-dingtalk requires an initialized DSH webServer port');
+  }
+  return new URL(`http://127.0.0.1:${port}`);
+}
+
+function pluginPaths(config) {
+  const dshHome = resolve(config.dshHome ?? process.env.DSH_HOME ?? join(homedir(), '.dsh'));
+  const root = resolve(config.dataDir ?? join(dshHome, 'integrations', 'dsh-dingtalk'));
+  return {
+    root,
+    config: resolve(config.configPath ?? join(root, 'config.json')),
+    bots: resolve(config.botsDir ?? join(root, 'bots')),
+  };
+}
+
+export async function createProductionController(ctx, config = {}, internals = {}) {
+  if (!ctx?.credentials) throw new TypeError('dsh-dingtalk requires ctx.credentials');
+  if (!ctx?.webServer) throw new TypeError('dsh-dingtalk requires ctx.webServer');
+
+  const ConfigStore = internals.ConfigStore ?? DingtalkConfigStore;
+  const DeviceAuth = internals.DeviceAuth ?? DingtalkDeviceAuth;
+  const StateStore = internals.StateStore ?? DingtalkStateStore;
+  const Harness = internals.HarnessClient ?? HarnessClient;
+  const Controller = internals.Controller ?? DingtalkController;
+  const Runtime = internals.Runtime ?? DingtalkRuntime;
+  const createSupervisor = internals.createConnectionSupervisor ?? createConnectionSupervisor;
+  const logger = typeof ctx.logger === 'function'
+    ? ctx.logger('dsh-dingtalk')
+    : (ctx.logger ?? console);
+  const paths = pluginPaths(config);
+  const configStore = await new ConfigStore(paths.config).load();
+  const deviceAuth = internals.deviceAuth ?? new DeviceAuth({
+    baseUrl: config.registrationBaseUrl,
+  });
+  const stateStores = new Map();
+
+  const statePath = (botId) => resolve(paths.bots, botId, 'state.json');
+  const stateFor = async (botId) => {
+    let state = stateStores.get(botId);
+    if (!state) {
+      state = await new StateStore(statePath(botId)).load();
+      stateStores.set(botId, state);
+    }
+    return state;
+  };
+  const harness = new Harness({
+    baseUrl: harnessOrigin(ctx.webServer, config.harnessBaseUrl),
+    workspace: resolve(config.workspace ?? process.cwd()),
+    agentPreset: config.agentPreset ?? 'standard',
+    autostart: false,
+    dshBin: config.dshBin ?? 'dsh',
+  });
+  const controller = new Controller({
+    deviceAuth,
+    credentials: ctx.credentials,
+    configStore,
+    logger,
+    createRuntime: async ({ botId, config: botConfig, clientSecret }) => {
+      const state = await stateFor(botId);
+      return new Runtime({
+        config: botConfig,
+        clientSecret,
+        harness,
+        state,
+        replyTimeoutMs: config.replyTimeoutMs ?? 600_000,
+        maxMessageChars: config.maxMessageChars ?? 4_000,
+        connectTimeoutMs: config.connectTimeoutMs ?? 15_000,
+        logger: {
+          error: (...args) => logger.error?.(`[${botId}]`, ...args),
+          warn: (...args) => logger.warn?.(`[${botId}]`, ...args),
+          info: (...args) => logger.info?.(`[${botId}]`, ...args),
+          debug: (...args) => logger.debug?.(`[${botId}]`, ...args),
+        },
+      });
+    },
+    deleteState: async ({ botId }) => {
+      const state = stateStores.get(botId);
+      stateStores.delete(botId);
+      if (state && typeof state.remove === 'function') {
+        await state.remove();
+        return;
+      }
+      try {
+        await unlink(statePath(botId));
+      } catch (error) {
+        if (error?.code !== 'ENOENT') throw error;
+      }
+    },
+  });
+  const supervisor = createSupervisor({
+    controller,
+    harness,
+    logger,
+    retryDelaysMs: config.retryDelaysMs,
+    healthyIntervalMs: config.healthyIntervalMs,
+  }).start();
+  return {
+    controller,
+    ready: supervisor.ready,
+    async close() {
+      await supervisor.close();
+      await controller.close();
+      harness.stopManagedProcess();
+    },
+  };
+}