@modesto_ma/dsh-channels 0.5.0-beta.3 → 0.5.0-beta.5

package/src/client/panel/advanced-tab.tsx

@@ -1,80 +1,71 @@
 /**
- * 「高级」tab：流式刷新等低层字段 + 只读部署信息（overlayPath / version /
- * 部署级参数）+ 「清除 Web 覆盖」。清除覆盖是整体动作，不走 draft。
+ * 「高级」tab：日志分析接口（监听地址字段 + 访问令牌凭据行）、SDK 日志级别
+ * 与 Web 覆盖文件（「恢复 profile 配置」删除整个覆盖层，不走 draft）。
  *
  * @module dsh-channels/client/panel/advanced-tab
  */
 
-import { PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
-import type { PanelWire } from '../../settings/contract.ts'
-import { FieldsCard, SaveBar, TabHelp } from './shared.tsx'
-import type { BusyAction, FormView } from './shared.tsx'
+import { fillCopy, PANEL_COPY, TAB_FIELD_GROUPS } from '../../settings/contract.ts'
+import { CredentialRow } from './credentials-card.tsx'
+import { FieldSections, Row, Section } from './shared.tsx'
+import type { AnalyzeTokenView, FormView } from './shared.tsx'
 
-export function AdvancedTab(props: { form: FormView; onClear: () => void }): JSX.Element {
-  const { form, onClear } = props
-  return (
-    <div className="dsh-channels-cfg__tabBody">
-      <TabHelp text={PANEL_COPY.advancedTabHelp} />
-      <FieldsCard form={form} groups={TAB_FIELD_GROUPS.advanced} />
-      <SaveBar form={form} tab="advanced" />
-      <AdvancedCard panel={form.panel} busy={form.busy} locked={form.locked} onClear={onClear} />
-    </div>
-  )
-}
-
-/** Read-only deployment facts; the only write action here drops the overlay file. */
-function AdvancedCard(props: {
-  panel: PanelWire
-  busy: BusyAction | null
-  locked: boolean
+export function AdvancedTab(props: {
+  form: FormView
+  analyzeToken: AnalyzeTokenView
   onClear: () => void
 }): JSX.Element {
-  const { panel, busy, locked, onClear } = props
-  const { readOnly } = panel.config
+  const { form, analyzeToken, onClear } = props
+  const { panel, busy, locked } = form
+  const tokenState = panel.config.credentials.analyzeToken
   const overridden = panel.config.overriddenKeys.length
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.advancedCard}</span>
-        <span className="dsh-channels-cfg__cardMeta">
-          {overridden === 0 ? PANEL_COPY.inherited : `${PANEL_COPY.overridden} ${overridden} 项`}
-        </span>
-      </div>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.advancedHelp}</span>
-      <div className="dsh-channels-cfg__labelRow">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.readOnlyCard}</span>
-      </div>
-      <div className="dsh-channels-cfg__readOnly">
-        {readOnly.map(field => (
-          <div className="dsh-channels-cfg__kv" key={field.key}>
-            <span className="dsh-channels-cfg__kvKey">{field.label}</span>
-            <span className="dsh-channels-cfg__kvValue">{field.value}</span>
-            {field.help === undefined ? null : <span className="dsh-channels-cfg__help">{field.help}</span>}
-          </div>
-        ))}
-        <div className="dsh-channels-cfg__kv">
-          <span className="dsh-channels-cfg__kvKey">{PANEL_COPY.overlayPath}</span>
-          <span className="dsh-channels-cfg__kvValue dsh-channels-cfg__mono">{panel.status.overlayPath}</span>
-          <span className="dsh-channels-cfg__help">{PANEL_COPY.overlayPathHelp}</span>
-        </div>
-        <div className="dsh-channels-cfg__kv">
-          <span className="dsh-channels-cfg__kvKey">{PANEL_COPY.version}</span>
-          <span className="dsh-channels-cfg__kvValue dsh-channels-cfg__mono">{panel.status.version}</span>
-        </div>
-      </div>
-      <div className="dsh-channels-cfg__actions">
-        <button
-          type="button"
-          className="dsh-channels-cfg__btn"
-          onClick={onClear}
-          disabled={overridden === 0 || busy !== null || locked}
-        >
-          {busy === 'clear' ? PANEL_COPY.clearing : PANEL_COPY.clear}
-        </button>
-        <span className="dsh-channels-cfg__help">
-          {overridden === 0 ? PANEL_COPY.noOverrides : `${PANEL_COPY.overridden} ${overridden} 项`}
-        </span>
-      </div>
-    </section>
+    <div className="dsh-channels-cfg__tabBody">
+      <FieldSections
+        form={form}
+        groups={TAB_FIELD_GROUPS.advanced}
+        extra={{
+          analyze: (
+            <CredentialRow
+              label={PANEL_COPY.analyzeTokenLabel}
+              summary={PANEL_COPY.analyzeTokenSummary}
+              state={tokenState}
+              value={analyzeToken.value}
+              secret
+              placeholder={PANEL_COPY.analyzeTokenPlaceholder}
+              issue={analyzeToken.issues.find(item => item.key === 'analyzeToken')}
+              busy={analyzeToken.busy}
+              disabled={analyzeToken.busy !== null || analyzeToken.locked || !tokenState.writable}
+              onChange={analyzeToken.onChange}
+              onSave={analyzeToken.onSave}
+              onClear={analyzeToken.onClear}
+            />
+          ),
+        }}
+      />
+      <Section title={PANEL_COPY.overlayTitle}>
+        <Row
+          label={PANEL_COPY.overlayPath}
+          summary={<span className="dsh-channels-cfg__mono">{panel.status.overlayPath}</span>}
+          details={(
+            <>
+              {PANEL_COPY.overlayPathHelp}
+              {' '}
+              {overridden === 0 ? PANEL_COPY.noOverrides : fillCopy(PANEL_COPY.overlayCount, { n: overridden })}
+            </>
+          )}
+          control={(
+            <button
+              type="button"
+              className="dsh-channels-cfg__btn dsh-channels-cfg__btn--danger"
+              onClick={onClear}
+              disabled={overridden === 0 || busy !== null || locked}
+            >
+              {busy === 'clear' ? PANEL_COPY.clearing : PANEL_COPY.clear}
+            </button>
+          )}
+        />
+      </Section>
+    </div>
   )
 }

package/src/client/panel/connection-tab.tsx

@@ -1,20 +1,19 @@
 /**
- * 「连接」tab：按 Host 派生的生命周期阶段渲染连接引导。
+ * 「连接」tab：按 Host 派生的生命周期阶段渲染。
  *
- * - unconfigured：onboarding 三步 + 凭据卡（不渲染可用的「连接」按钮）
- * - idle：连接信息卡 + 「连接飞书」
- * - error：连接信息卡 + 最近一次连接失败 + 「重试」
- * - connected：连接信息卡 + 「重启飞书连接」+ 凭据卡
- * - connecting：禁用按钮显示「连接中…」
- * - 已连接且权限自检完成：权限自检卡（缺失权限红字 + 开发者后台深链）
+ * - unconfigured：上手三步 + 应用凭据
+ * - idle / error / connecting / connected：状态块（当前阶段的唯一操作 + 运行数字）
+ * - 连接后：自检（权限缺口可展开、斜杠指令面板同步结果）
+ * - 有需重连才生效的已保存配置：顶部「重启连接」横幅
  *
  * @module dsh-channels/client/panel/connection-tab
  */
 
-import { PANEL_COPY } from '../../settings/contract.ts'
+import { useState } from 'react'
+import { fillCopy, PANEL_COPY } from '../../settings/contract.ts'
 import type { ChannelStatusWire, PanelWire, ScopeCheckWire, SlashCommandSyncWire } from '../../settings/contract.ts'
-import { CredentialsCard } from './credentials-card.tsx'
-import { connectionStateLabel, fieldLabel, formatUptime, phaseBadge, TabHelp } from './shared.tsx'
+import { CredentialsSection } from './credentials-card.tsx'
+import { fieldLabel, phaseBadge, phaseSummary, Pill, Row, Section } from './shared.tsx'
 import type { BusyAction, CredentialsView } from './shared.tsx'
 
 export interface ConnectionTabProps {
@@ -27,24 +26,30 @@ export interface ConnectionTabProps {
 
 export function ConnectionTab(props: ConnectionTabProps): JSX.Element {
   const { panel, status, busy, credentials, onReconnect } = props
+  const checks = status.scopeCheck !== undefined || status.slashCommandSync !== undefined
   return (
     <div className="dsh-channels-cfg__tabBody">
-      <TabHelp text={PANEL_COPY.connectionTabHelp} />
       {panel.config.restartPendingKeys.length === 0
         ? null
         : <RestartBanner panel={panel} busy={busy} locked={status.busy} onReconnect={onReconnect} />}
       {status.phase === 'unconfigured'
-        ? <OnboardingCard status={status} />
-        : <ConnectionInfoCard status={status} busy={busy} onReconnect={onReconnect} />}
-      {status.scopeCheck === undefined ? null : <ScopeCheckCard check={status.scopeCheck} />}
-      {status.slashCommandSync === undefined ? null : <SlashCommandSyncCard sync={status.slashCommandSync} />}
-      <CredentialsCard panel={panel} credentials={credentials} />
+        ? <OnboardingSection status={status} />
+        : <StatusBlock status={status} busy={busy} onReconnect={onReconnect} />}
+      {checks
+        ? (
+            <Section title={PANEL_COPY.checksTitle}>
+              {status.scopeCheck === undefined ? null : <ScopeCheckRow check={status.scopeCheck} />}
+              {status.slashCommandSync === undefined ? null : <SlashCommandSyncRow sync={status.slashCommandSync} />}
+            </Section>
+          )
+        : null}
+      <CredentialsSection panel={panel} credentials={credentials} />
     </div>
   )
 }
 
 /** First-run guide: create the app, fill the credentials, save and wait. */
-function OnboardingCard(props: { status: ChannelStatusWire }): JSX.Element {
+function OnboardingSection(props: { status: ChannelStatusWire }): JSX.Element {
   const { status } = props
   const steps = [
     { title: PANEL_COPY.onboardingStep1Title, text: PANEL_COPY.onboardingStep1Text },
@@ -52,21 +57,17 @@ function OnboardingCard(props: { status: ChannelStatusWire }): JSX.Element {
     { title: PANEL_COPY.onboardingStep3Title, text: PANEL_COPY.onboardingStep3Text },
   ]
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.onboardingTitle}</span>
-        <span className="dsh-channels-cfg__badge dsh-channels-cfg__badge--muted">
-          {PANEL_COPY.phaseUnconfigured}
-        </span>
+    <div className="dsh-channels-cfg__hero">
+      <div className="dsh-channels-cfg__heroTop">
+        <strong>{PANEL_COPY.onboardingTitle}</strong>
       </div>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.onboardingIntro}</span>
       <ol className="dsh-channels-cfg__steps">
         {steps.map((step, index) => (
           <li className="dsh-channels-cfg__step" key={step.title}>
             <span className="dsh-channels-cfg__stepIndex">{index + 1}</span>
             <span className="dsh-channels-cfg__stepBody">
               <span className="dsh-channels-cfg__stepTitle">{step.title}</span>
-              <span className="dsh-channels-cfg__help">{step.text}</span>
+              <span className="dsh-channels-cfg__rowSummary">{step.text}</span>
             </span>
           </li>
         ))}
@@ -74,19 +75,16 @@ function OnboardingCard(props: { status: ChannelStatusWire }): JSX.Element {
       {status.missingConfig.length === 0
         ? null
         : (
-            <div className="dsh-channels-cfg__banner">
-              <strong>{PANEL_COPY.missingConfig}：</strong>
-              <span>{status.missingConfig.join('、')}</span>
-            </div>
+            <span className="dsh-channels-cfg__rowSummary">
+              {PANEL_COPY.missingConfig}：{status.missingConfig.join('、')}
+            </span>
           )}
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.statusHintUnconfigured}</span>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.onboardingDocsHint}</span>
-    </section>
+    </div>
   )
 }
 
-/** Runtime facts plus the one lifecycle action available in the current phase. */
-function ConnectionInfoCard(props: {
+/** Phase, the one lifecycle action available in it, and the runtime counters. */
+function StatusBlock(props: {
   status: ChannelStatusWire
   busy: BusyAction | null
   onReconnect: () => void
@@ -96,163 +94,149 @@ function ConnectionInfoCard(props: {
   // `status.busy` covers a connection attempt started outside this panel; the
   // local busy flag covers the panel's own action. Either way the button waits.
   const actionBusy = busy !== null || status.busy
-  const connection = connectionStateLabel(status.connection?.state)
-  const facts = [
-    { label: PANEL_COPY.statusCard, value: badge.text },
-    { label: PANEL_COPY.connectionStateLabel, value: connection.text },
-    { label: PANEL_COPY.botOpenId, value: status.botOpenIdTail ?? PANEL_COPY.unknownValue },
-    { label: PANEL_COPY.uptime, value: formatUptime(status.uptimeMs) },
+  const stats = [
     { label: PANEL_COPY.routeCount, value: String(status.routeCount) },
     { label: PANEL_COPY.liveAgentCount, value: String(status.liveAgentCount) },
     { label: PANEL_COPY.inflightTurnCount, value: String(status.inflightTurnCount) },
+    { label: PANEL_COPY.botOpenId, value: status.botOpenIdTail ?? PANEL_COPY.unknownValue, mono: true },
   ]
+  let action: JSX.Element | null = null
+  if (status.phase === 'connecting') {
+    action = <button type="button" className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary" disabled>{PANEL_COPY.connecting}</button>
+  } else if (status.phase === 'idle' || status.phase === 'error') {
+    action = (
+      <button type="button" className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary" onClick={onReconnect} disabled={actionBusy}>
+        {busy === 'reconnect' ? PANEL_COPY.connecting : status.phase === 'idle' ? PANEL_COPY.connect : PANEL_COPY.retry}
+      </button>
+    )
+  } else if (status.phase === 'connected') {
+    action = (
+      <button type="button" className="dsh-channels-cfg__btn" onClick={onReconnect} disabled={actionBusy}>
+        {busy === 'reconnect' ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect}
+      </button>
+    )
+  }
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.connectionInfo}</span>
-        <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${status.configured ? 'ok' : 'bad'}`}>
-          {status.configured ? PANEL_COPY.configuredBadge : PANEL_COPY.unconfiguredBadge}
-        </span>
+    <div className="dsh-channels-cfg__hero">
+      <div className="dsh-channels-cfg__heroTop">
+        <Pill tone={badge.tone} dot>{badge.text}</Pill>
+        <strong>{phaseSummary(status.phase)}</strong>
+        <span className="dsh-channels-cfg__spacer" />
+        {action}
       </div>
       {status.lastStartError === undefined
         ? null
         : (
             <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--error">
-              <strong>{PANEL_COPY.lastError}</strong>
-              <span className="dsh-channels-cfg__mono">{status.lastStartError}</span>
+              {PANEL_COPY.lastError}：<span className="dsh-channels-cfg__mono">{status.lastStartError}</span>
             </div>
           )}
-      <div className="dsh-channels-cfg__facts">
-        {facts.map(fact => (
-          <div className="dsh-channels-cfg__fact" key={fact.label}>
-            <span className="dsh-channels-cfg__factLabel">{fact.label}</span>
-            <span className="dsh-channels-cfg__factValue">{fact.value}</span>
-          </div>
-        ))}
-      </div>
+      {status.phase === 'connected'
+        ? (
+            <div className="dsh-channels-cfg__stats">
+              {stats.map(stat => (
+                <div className="dsh-channels-cfg__stat" key={stat.label}>
+                  <span>{stat.label}</span>
+                  <strong className={stat.mono === true ? 'dsh-channels-cfg__mono' : undefined}>{stat.value}</strong>
+                </div>
+              ))}
+            </div>
+          )
+        : null}
       {status.reasons.length === 0
         ? null
         : (
-            <span className={`dsh-channels-cfg__help${status.level === 'unhealthy' ? ' dsh-channels-cfg__reasonBad' : ''}`}>
+            <span className={`dsh-channels-cfg__rowSummary${status.level === 'unhealthy' ? ' dsh-channels-cfg__textBad' : ''}`}>
               {PANEL_COPY.healthReasons}：{status.reasons.join('；')}
             </span>
           )}
-      <div className="dsh-channels-cfg__actions">
-        {status.phase === 'connecting'
-          ? (
-              <button type="button" className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary" disabled>
-                {PANEL_COPY.connecting}
-              </button>
-            )
-          : null}
-        {status.phase === 'idle'
-          ? (
-              <button
-                type="button"
-                className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
-                onClick={onReconnect}
-                disabled={actionBusy}
-              >
-                {busy === 'reconnect' ? PANEL_COPY.connecting : PANEL_COPY.connect}
-              </button>
-            )
-          : null}
-        {status.phase === 'error'
-          ? (
-              <button
-                type="button"
-                className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
-                onClick={onReconnect}
-                disabled={actionBusy}
-              >
-                {busy === 'reconnect' ? PANEL_COPY.connecting : PANEL_COPY.retry}
-              </button>
-            )
-          : null}
-        {status.phase === 'connected'
-          ? (
-              <>
-                <button
-                  type="button"
-                  className="dsh-channels-cfg__btn dsh-channels-cfg__btn--danger"
-                  onClick={onReconnect}
-                  disabled={actionBusy}
-                >
-                  {busy === 'reconnect' ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect}
-                </button>
-                <span className="dsh-channels-cfg__help">{PANEL_COPY.restartWarning}</span>
-              </>
-            )
-          : null}
-      </div>
-    </section>
+    </div>
+  )
+}
+
+/** Status icon in front of one check row. */
+function CheckIcon(props: { tone: 'ok' | 'warn' | 'bad' }): JSX.Element {
+  return (
+    <span className={`dsh-channels-cfg__checkIcon dsh-channels-cfg__checkIcon--${props.tone}`} aria-hidden="true">
+      {props.tone === 'ok' ? '✓' : '!'}
+    </span>
   )
 }
 
-/** Post-connect scope self-check: missing scopes in red, each with a console deep link. */
-function ScopeCheckCard(props: { check: ScopeCheckWire }): JSX.Element {
+/** Post-connect scope self-check: the gap count, expandable to each scope with its console link. */
+function ScopeCheckRow(props: { check: ScopeCheckWire }): JSX.Element {
   const { check } = props
+  const [open, setOpen] = useState(false)
+  if (check.state === 'ok') {
+    return <Row leading={<CheckIcon tone="ok" />} label={PANEL_COPY.scopeCheckOk} />
+  }
+  if (check.state === 'error') {
+    return (
+      <Row
+        leading={<CheckIcon tone="bad" />}
+        label={PANEL_COPY.scopeCheckError}
+        summary={<span className="dsh-channels-cfg__mono">{check.error}</span>}
+      />
+    )
+  }
+  const required = check.missing.filter(item => item.level === 'required').length
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.scopeCheckTitle}</span>
-      </div>
-      {check.state === 'ok'
-        ? <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--ok">{PANEL_COPY.scopeCheckOk}</div>
-        : null}
-      {check.state === 'error'
-        ? (
-            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--error">
-              <strong>{PANEL_COPY.scopeCheckError}</strong>
-              <span className="dsh-channels-cfg__mono">{check.error}</span>
-            </div>
-          )
-        : null}
-      {check.state === 'missing'
+    <>
+      <Row
+        leading={<CheckIcon tone={required > 0 ? 'bad' : 'warn'} />}
+        label={required > 0
+          ? fillCopy(PANEL_COPY.scopeCheckMissingRequired, { n: required })
+          : fillCopy(PANEL_COPY.scopeCheckMissing, { n: check.missing.length })}
+        summary={required > 0 ? PANEL_COPY.scopeCheckPublish : PANEL_COPY.scopeCheckMissingOptional}
+        control={(
+          <div className="dsh-channels-cfg__inputRow">
+            <button type="button" className="dsh-channels-cfg__more" aria-expanded={open} onClick={() => setOpen(!open)}>
+              {open ? PANEL_COPY.collapse : PANEL_COPY.expand}
+            </button>
+            <a className="dsh-channels-cfg__btn" href={check.consoleUrl} target="_blank" rel="noreferrer noopener">
+              {PANEL_COPY.scopeCheckOpenAll}
+            </a>
+          </div>
+        )}
+      />
+      {open
         ? (
-            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--error">
-              <strong>{PANEL_COPY.scopeCheckMissing}</strong>
-              <ul className="dsh-channels-cfg__scopeList">
-                {check.missing.map(item => (
-                  <li key={item.scopes.join(',')}>
-                    <span>[{item.level === 'required' ? PANEL_COPY.scopeCheckRequired : PANEL_COPY.scopeCheckOptional}] </span>
-                    <span className="dsh-channels-cfg__mono">{item.scopes.join(' / ')}</span>
-                    <span>：{item.purpose} </span>
-                    <a href={item.consoleUrl} target="_blank" rel="noreferrer noopener">{PANEL_COPY.scopeCheckOpenOne}</a>
-                  </li>
-                ))}
-              </ul>
-              <a href={check.consoleUrl} target="_blank" rel="noreferrer noopener">{PANEL_COPY.scopeCheckOpenAll}</a>
-            </div>
+            <ul className="dsh-channels-cfg__scopeList">
+              {check.missing.map(item => (
+                <li key={item.scopes.join(',')}>
+                  <code className="dsh-channels-cfg__mono">{item.scopes.join(' / ')}</code>
+                  {item.level === 'required' ? <Pill tone="bad">{PANEL_COPY.scopeCheckRequired}</Pill> : null}
+                  <span>{item.purpose}</span>
+                  <a className="dsh-channels-cfg__link" href={item.consoleUrl} target="_blank" rel="noreferrer noopener">
+                    {PANEL_COPY.scopeCheckOpenOne}
+                  </a>
+                </li>
+              ))}
+            </ul>
           )
         : null}
-    </section>
+    </>
   )
 }
 
-/** Post-connect native slash-command panel sync: counts on success, the Feishu reason on failure. */
-function SlashCommandSyncCard(props: { sync: SlashCommandSyncWire }): JSX.Element {
+/** Post-connect native slash-command panel sync: the command count, or the Feishu reason. */
+function SlashCommandSyncRow(props: { sync: SlashCommandSyncWire }): JSX.Element {
   const { sync } = props
-  return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.slashCommandSyncTitle}</span>
-      </div>
-      {sync.state === 'ok'
-        ? (
-            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--ok">
-              <span>{PANEL_COPY.slashCommandSyncOk} </span>
-              <span>{PANEL_COPY.slashCommandSyncTotal} {sync.total} · {PANEL_COPY.slashCommandSyncCreated} {sync.created} · {PANEL_COPY.slashCommandSyncUpdated} {sync.updated} · {PANEL_COPY.slashCommandSyncRemoved} {sync.removed}</span>
-            </div>
-          )
-        : (
-            <div className="dsh-channels-cfg__notice dsh-channels-cfg__notice--error">
-              <strong>{PANEL_COPY.slashCommandSyncError}</strong>
-              <span className="dsh-channels-cfg__mono">{sync.error}</span>
-            </div>
-          )}
-    </section>
-  )
+  return sync.state === 'ok'
+    ? (
+        <Row
+          leading={<CheckIcon tone="ok" />}
+          label={PANEL_COPY.slashCommandSyncTitle}
+          summary={fillCopy(PANEL_COPY.slashCommandSyncOk, { total: sync.total })}
+        />
+      )
+    : (
+        <Row
+          leading={<CheckIcon tone="warn" />}
+          label={PANEL_COPY.slashCommandSyncTitle}
+          summary={<>{PANEL_COPY.slashCommandSyncError}：<span className="dsh-channels-cfg__mono">{sync.error}</span></>}
+        />
+      )
 }
 
 /** Config saved but only applied on the next connect: offer the one-click restart. */
@@ -268,16 +252,15 @@ function RestartBanner(props: {
     .join('、')
   return (
     <div className="dsh-channels-cfg__banner">
-      <span>{PANEL_COPY.restartBanner}{keys}</span>
+      <span className="dsh-channels-cfg__bannerText">{PANEL_COPY.restartBanner}{keys}</span>
       <button
         type="button"
-        className="dsh-channels-cfg__btn dsh-channels-cfg__btn--danger"
+        className="dsh-channels-cfg__btn"
         onClick={onReconnect}
         disabled={busy !== null || locked}
       >
         {busy === 'reconnect' ? PANEL_COPY.reconnecting : PANEL_COPY.reconnect}
       </button>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.restartWarning}</span>
     </div>
   )
 }