@modesto_ma/dsh-channels 0.5.0-beta.4 → 0.5.0-beta.6

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>
   )
 }

package/src/client/panel/credentials-card.tsx

@@ -1,16 +1,106 @@
 /**
- * 飞书应用凭据编辑器：值经 Host 的 DSH 凭据服务写入本机凭据库，面板只显示
- * 「已配置 / 未配置」，两个方向都不回显已存值。保存动作由页面外壳持有
- * （凭据保存独立于配置 draft）。
+ * 凭据行：值经 Host 的 DSH 凭据服务写入本机凭据库，面板只显示「已配置 /
+ * 未配置」，两个方向都不回显已存值。已配置时只显示「更换 / 移除」，点「更换」
+ * 才出现输入框。保存动作由页面外壳持有（凭据保存独立于配置 draft）。
  *
  * @module dsh-channels/client/panel/credentials-card
  */
 
+import { useEffect, useRef, useState } from 'react'
 import { PANEL_COPY } from '../../settings/contract.ts'
-import type { CredentialField, CredentialRefWire, PanelWire } from '../../settings/contract.ts'
-import type { CredentialsView } from './shared.tsx'
+import type { CredentialRefWire, FieldIssueWire, PanelWire } from '../../settings/contract.ts'
+import { Pill, Row, Section } from './shared.tsx'
+import type { BusyAction, CredentialsView } from './shared.tsx'
 
-export function CredentialsCard(props: {
+/** One credential slot as a setting row with its own input and actions. */
+export function CredentialRow(props: {
+  label: string
+  summary?: string
+  state: CredentialRefWire
+  value: string
+  secret: boolean
+  placeholder: string
+  issue?: FieldIssueWire
+  busy: BusyAction | null
+  disabled: boolean
+  onChange: (value: string) => void
+  onSave: () => void
+  onClear: () => void
+}): JSX.Element {
+  const { label, summary, state, value, secret, placeholder, issue, busy, disabled, onChange, onSave, onClear } = props
+  const [editing, setEditing] = useState(false)
+  // Close the replace input once a credential save finishes (the shell clears the value).
+  const previousBusy = useRef(busy)
+  useEffect(() => {
+    if (previousBusy.current === 'credentials' && busy === null) setEditing(false)
+    previousBusy.current = busy
+  }, [busy])
+  const showInput = !state.configured || editing || value !== ''
+  const source = `${PANEL_COPY.credentialStore} · ${state.ref}${state.source === undefined ? '' : ` · ${state.source}`}`
+  return (
+    <Row
+      label={label}
+      tags={(
+        <Pill tone={state.configured ? 'ok' : 'muted'}>
+          {state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing}
+        </Pill>
+      )}
+      summary={summary === undefined ? <span className="dsh-channels-cfg__mono">{source}</span> : summary}
+      error={issue?.message ?? (state.writable ? undefined : PANEL_COPY.credentialReadOnly)}
+      control={showInput
+        ? (
+            <div className="dsh-channels-cfg__inputRow">
+              <input
+                type={secret ? 'password' : 'text'}
+                className={`dsh-channels-cfg__input dsh-channels-cfg__input--text${issue === undefined ? '' : ' dsh-channels-cfg__input--invalid'}`}
+                value={value}
+                placeholder={placeholder}
+                autoComplete="new-password"
+                aria-label={label}
+                disabled={disabled}
+                onChange={event => onChange(event.target.value)}
+              />
+              <button
+                type="button"
+                className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
+                disabled={disabled || value.trim() === ''}
+                onClick={onSave}
+              >
+                {busy === 'credentials' ? PANEL_COPY.savingCredentials : PANEL_COPY.saveCredentials}
+              </button>
+              {state.configured
+                ? (
+                    <button
+                      type="button"
+                      className="dsh-channels-cfg__btn dsh-channels-cfg__btn--ghost"
+                      disabled={busy !== null}
+                      onClick={() => {
+                        setEditing(false)
+                        onChange('')
+                      }}
+                    >
+                      {PANEL_COPY.cancel}
+                    </button>
+                  )
+                : null}
+            </div>
+          )
+        : (
+            <div className="dsh-channels-cfg__inputRow">
+              <button type="button" className="dsh-channels-cfg__btn" disabled={disabled} onClick={() => setEditing(true)}>
+                {PANEL_COPY.replaceCredential}
+              </button>
+              <button type="button" className="dsh-channels-cfg__btn dsh-channels-cfg__btn--remove" disabled={disabled} onClick={onClear}>
+                {busy === 'credentials-clear' ? PANEL_COPY.removingCredential : PANEL_COPY.removeCredential}
+              </button>
+            </div>
+          )}
+    />
+  )
+}
+
+/** The Feishu application pair (App ID / App Secret). */
+export function CredentialsSection(props: {
   panel: PanelWire
   credentials: CredentialsView
 }): JSX.Element {
@@ -18,87 +108,34 @@ export function CredentialsCard(props: {
   const { appId, appSecret, issues, busy, locked, onAppIdChange, onAppSecretChange, onSave, onClear } = credentials
   const appIdState = panel.config.credentials.appId
   const appSecretState = panel.config.credentials.appSecret
-  const configured = appIdState.configured && appSecretState.configured
-  const writable = appIdState.writable || appSecretState.writable
-  const disabled = busy !== null || locked || !writable
-  const pending = appId.trim() !== '' || appSecret.trim() !== ''
-
-  const row = (
-    field: CredentialField,
-    label: string,
-    state: CredentialRefWire,
-    value: string,
-    type: 'text' | 'password',
-    placeholder: string,
-    onChange: (next: string) => void,
-  ): JSX.Element => {
-    const issue = issues.find(item => item.key === field)
-    const inputClass = `dsh-channels-cfg__input${issue === undefined ? '' : ' dsh-channels-cfg__input--invalid'}`
-    return (
-      <div className="dsh-channels-cfg__field" key={field}>
-        <div className="dsh-channels-cfg__labelRow">
-          <span className="dsh-channels-cfg__label">{label}</span>
-          <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${state.configured ? 'ok' : 'bad'}`}>
-            {state.configured ? PANEL_COPY.credentialConfigured : PANEL_COPY.credentialMissing}
-          </span>
-        </div>
-        <div className="dsh-channels-cfg__cred">
-          <input
-            type={type}
-            className={inputClass}
-            value={value}
-            placeholder={placeholder}
-            autoComplete="new-password"
-            aria-label={label}
-            disabled={disabled}
-            onChange={event => onChange(event.target.value)}
-          />
-          {state.configured
-            ? (
-                <button
-                  type="button"
-                  className="dsh-channels-cfg__btn"
-                  disabled={disabled}
-                  onClick={() => onClear(field)}
-                >
-                  {busy === 'credentials-clear' ? PANEL_COPY.removingCredential : PANEL_COPY.removeCredential}
-                </button>
-              )
-            : null}
-        </div>
-        <span className="dsh-channels-cfg__help">
-          {PANEL_COPY.credentialsRef}：<span className="dsh-channels-cfg__mono">{state.ref}</span>
-          {state.source === undefined ? '' : ` · ${state.source}`}
-        </span>
-        {issue === undefined ? null : <span className="dsh-channels-cfg__fieldError">{issue.message}</span>}
-      </div>
-    )
-  }
-
   return (
-    <section className="dsh-channels-cfg__card">
-      <div className="dsh-channels-cfg__cardHead">
-        <span className="dsh-channels-cfg__cardTitle">{PANEL_COPY.credentialsCard}</span>
-        <span className={`dsh-channels-cfg__badge dsh-channels-cfg__badge--${configured ? 'ok' : 'muted'}`}>
-          {configured ? PANEL_COPY.configuredBadge : PANEL_COPY.unconfiguredBadge}
-        </span>
-      </div>
-      <span className="dsh-channels-cfg__help">{PANEL_COPY.credentialsCardHelp}</span>
-      {row('appId', PANEL_COPY.appIdLabel, appIdState, appId, 'text', PANEL_COPY.appIdPlaceholder, onAppIdChange)}
-      {row('appSecret', PANEL_COPY.appSecretLabel, appSecretState, appSecret, 'password', PANEL_COPY.appSecretPlaceholder, onAppSecretChange)}
-      {writable ? null : <span className="dsh-channels-cfg__fieldError">{PANEL_COPY.credentialReadOnly}</span>}
-      <div className="dsh-channels-cfg__footer">
-        <button
-          type="button"
-          className="dsh-channels-cfg__btn dsh-channels-cfg__btn--primary"
-          onClick={onSave}
-          disabled={disabled || !pending}
-        >
-          {busy === 'credentials' ? PANEL_COPY.savingCredentials : PANEL_COPY.saveCredentials}
-        </button>
-        <span className="dsh-channels-cfg__spacer" />
-        <span className="dsh-channels-cfg__help">{PANEL_COPY.credentialsPendingHint}</span>
-      </div>
-    </section>
+    <Section title={PANEL_COPY.credentialsTitle} footnote={PANEL_COPY.credentialsHint}>
+      <CredentialRow
+        label={PANEL_COPY.appIdLabel}
+        state={appIdState}
+        value={appId}
+        secret={false}
+        placeholder={PANEL_COPY.appIdPlaceholder}
+        issue={issues.find(item => item.key === 'appId')}
+        busy={busy}
+        disabled={busy !== null || locked || !appIdState.writable}
+        onChange={onAppIdChange}
+        onSave={onSave}
+        onClear={() => onClear('appId')}
+      />
+      <CredentialRow
+        label={PANEL_COPY.appSecretLabel}
+        state={appSecretState}
+        value={appSecret}
+        secret
+        placeholder={PANEL_COPY.appSecretPlaceholder}
+        issue={issues.find(item => item.key === 'appSecret')}
+        busy={busy}
+        disabled={busy !== null || locked || !appSecretState.writable}
+        onChange={onAppSecretChange}
+        onSave={onSave}
+        onClear={() => onClear('appSecret')}
+      />
+    </Section>
   )
 }