feat(copilot): integrate GitHub Copilot provider with dynamic model list / 集成 GitHub Copilot provider 与动态模型列表 (#239)

* feat(copilot): integrate GitHub Copilot provider with dynamic model list 集成 GitHub Copilot provider 与动态模型列表 EN: - New copilot-models service: fetch live model list from GitHub /models API - Filter noise IDs (accounts/, text-embedding, rerank prefixes) - Pass through preview/disabled metadata to frontend - Cache isolated per OAuth token (FNV-1a hash key) to prevent cross-account leak - Multi-source token resolution: env > apps.json > gh CLI - ModelSelector renders PREVIEW (orange) and UNAVAILABLE (gray, non-selectable) badges with tooltips - ProviderFormModal exposes Copilot OAuth login entry - New CopilotLoginModal component: guides gh auth login device flow - ProviderCard hides delete button for OAuth-only builtin providers (copilot/codex/nous) since their credentials live outside auth.json ZH: - 新增 copilot-models 服务：从 GitHub /models live API 拉取模型列表 - 噪音 ID 过滤（accounts/、text-embedding、rerank 前缀） - preview/disabled 元数据透传至前端 - 缓存按 OAuth token 隔离（FNV-1a hash key），避免切换 profile 串账号 - 多源 token 解析优先级：env > apps.json > gh CLI - ModelSelector 渲染 PREVIEW（橙色）/ UNAVAILABLE（灰色、不可选）badge，附 tooltip - ProviderFormModal 提供 Copilot OAuth 登录入口 - 新增 CopilotLoginModal 组件：引导 gh auth login 设备流程 - ProviderCard 对 OAuth-only builtin（copilot/codex/nous）隐藏删除按钮其凭证不在 auth.json，删除按钮原本无效 Tests / 测试: new copilot-models suite (cache isolation, noise filter, preview/disabled passthrough) + copilot-login-modal — 24/24 passed. Pre-existing sessions-db-lineage failure on upstream/main is unrelated. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor(copilot): switch to explicit opt-in per maintainer feedback 回应 PR #239 review：上一版会自动把系统级 GitHub OAuth 凭证（VS Code Copilot 插件、gh CLI 登录态）当作 hermes provider 拉到列表里，对未在 hermes 中注册过 Copilot 的用户造成困扰。本次改为显式 opt-in：用户必须通过 Add Provider 主动添加，删除时按 token 来源决定是否清 ~/.hermes/.env，并避免误清理 VS Code / gh CLI 用户的全局凭证。 Address PR #239 review feedback. Previously Copilot would silently appear in the provider list whenever the host had any GitHub OAuth token (VS Code plugin, gh CLI login). This caused confusion for users who never explicitly registered Copilot in hermes. Now Copilot requires explicit opt-in via Add Provider; on delete we only clear ~/.hermes/.env when the token actually originated there, leaving VS Code / gh CLI credentials untouched. What changed - 新增 ~/.hermes-web-ui/config.json 的 copilotEnabled flag 控制可见性 - 即便能解析到 token，未启用时也不在列表中显示 - resolveCopilotOAuthTokenWithSource 区分 token 来源（env / gh-cli / apps-json） - ProviderFormModal 增加 GitHub Copilot 入口；无 token 时进 device flow modal - CopilotLoginModal 重写为 in-app device flow 状态机（不再要求用户在终端跑 gh） - 删除 Copilot 时仅 source='env' 才清 ~/.hermes/.env，并自动 fallback 默认模型 - 老用户升级兼容：若 default 仍指向已禁用的 copilot，后端清空 default 让前端兜底 API - POST /api/hermes/copilot-auth/check-token - POST /api/hermes/copilot-auth/enable - POST /api/hermes/copilot-auth/disable - POST /api/hermes/copilot-auth/start (device flow) - POST /api/hermes/copilot-auth/poll (device flow) Tests - tests/server/copilot-auth-controller.test.ts (11 cases) - tests/server/copilot-device-flow.test.ts (12 cases) - tests/client/copilot-login-modal.test.ts 重写覆盖状态机 Follow-ups (留作后续 PR) - device flow session 未绑定 profile，登录中切 profile 会写到错的 .env - copilot device-code 接口的 expires_in 字段未使用，硬编码 15 分钟超时 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-04-26 22:51:35 +08:00
parent b07a8fc76f
commit 610f3eb9d0
30 changed files with 2264 additions and 16 deletions
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+import { NModal, NButton, NSpin, useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { startCopilotLogin, pollCopilotLogin } from '@/api/hermes/copilot-auth'
+import { copyToClipboard } from '@/utils/clipboard'
+
+const { t } = useI18n()
+const emit = defineEmits<{ close: []; success: [] }>()
+const message = useMessage()
+
+const showModal = ref(true)
+const status = ref<'idle' | 'loading' | 'waiting' | 'approved' | 'expired' | 'error'>('idle')
+const userCode = ref('')
+const verificationUrl = ref('')
+const sessionId = ref('')
+const errorMessage = ref('')
+let pollTimer: ReturnType<typeof setTimeout> | null = null
+
+async function startLogin() {
+  status.value = 'loading'
+  errorMessage.value = ''
+
+  try {
+    const data = await startCopilotLogin()
+    userCode.value = data.user_code
+    verificationUrl.value = data.verification_url
+    sessionId.value = data.session_id
+    status.value = 'waiting'
+    startPolling()
+  } catch (err: any) {
+    status.value = 'error'
+    const msg = err?.message || ''
+    try {
+      const match = msg.match(/\{[\s\S]*\}$/)
+      if (match) {
+        const body = JSON.parse(match[0])
+        errorMessage.value = body.error || msg
+      } else {
+        errorMessage.value = msg
+      }
+    } catch {
+      errorMessage.value = msg
+    }
+    message.error(errorMessage.value)
+  }
+}
+
+function startPolling() {
+  stopPolling()
+  pollTimer = setTimeout(async () => {
+    try {
+      const result = await pollCopilotLogin(sessionId.value)
+      if (result.status === 'pending') {
+        startPolling()
+      } else if (result.status === 'approved') {
+        status.value = 'approved'
+        message.success(t('models.copilotApproved'))
+        setTimeout(() => {
+          showModal.value = false
+          setTimeout(() => emit('success'), 200)
+        }, 1000)
+      } else if (result.status === 'expired') {
+        status.value = 'expired'
+      } else if (result.status === 'denied') {
+        status.value = 'error'
+        errorMessage.value = t('models.copilotDenied')
+      } else if (result.status === 'error') {
+        status.value = 'error'
+        errorMessage.value = result.error || 'Unknown error'
+      }
+    } catch {
+      startPolling()
+    }
+  }, 3000)
+}
+
+function stopPolling() {
+  if (pollTimer) {
+    clearTimeout(pollTimer)
+    pollTimer = null
+  }
+}
+
+function handleClose() {
+  stopPolling()
+  showModal.value = false
+  setTimeout(() => emit('close'), 200)
+}
+
+async function copyCode() {
+  const ok = await copyToClipboard(userCode.value)
+  if (ok) message.success(t('models.copilotCopyCode'))
+  else message.error(t('models.copilotCopyCode') + ' ✗')
+}
+
+function openLink() {
+  window.open(verificationUrl.value, '_blank')
+}
+
+function retry() {
+  status.value = 'idle'
+  userCode.value = ''
+  verificationUrl.value = ''
+  sessionId.value = ''
+  errorMessage.value = ''
+  startLogin()
+}
+
+onUnmounted(() => {
+  stopPolling()
+})
+
+// Auto-start when modal opens
+startLogin()
+</script>
+
+<template>
+  <NModal
+    v-model:show="showModal"
+    preset="card"
+    :title="t('models.copilotLoginTitle')"
+    :style="{ width: 'min(440px, calc(100vw - 32px))' }"
+    :mask-closable="status !== 'waiting'"
+    @after-leave="emit('close')"
+  >
+    <div class="copilot-login">
+      <!-- Idle / Loading -->
+      <div v-if="status === 'idle' || status === 'loading'" class="copilot-login__state">
+        <NSpin size="small" />
+      </div>
+
+      <!-- Waiting for authorization -->
+      <div v-else-if="status === 'waiting'" class="copilot-login__state">
+        <p class="copilot-login__hint">{{ t('models.copilotWaiting') }}</p>
+        <div class="copilot-login__code" @click="copyCode">
+          <span class="copilot-login__code-text">{{ userCode }}</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
+        </div>
+        <NButton type="primary" block @click="openLink">
+          <template #icon>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+          </template>
+          {{ t('models.copilotOpenLink') }}
+        </NButton>
+      </div>
+
+      <!-- Approved -->
+      <div v-else-if="status === 'approved'" class="copilot-login__state copilot-login__state--success">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
+        <p>{{ t('models.copilotApproved') }}</p>
+      </div>
+
+      <!-- Expired -->
+      <div v-else-if="status === 'expired'" class="copilot-login__state">
+        <p class="copilot-login__error">{{ t('models.copilotExpired') }}</p>
+        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="status === 'error'" class="copilot-login__state">
+        <p class="copilot-login__error">{{ errorMessage }}</p>
+        <NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="modal-footer">
+        <NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
+      </div>
+    </template>
+  </NModal>
+</template>
+
+<style scoped lang="scss">
+.copilot-login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.copilot-login__state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  min-height: 120px;
+  justify-content: center;
+  width: 100%;
+}
+
+.copilot-login__hint {
+  font-size: 14px;
+  color: var(--n-text-color, inherit);
+  text-align: center;
+  line-height: 1.6;
+}
+
+.copilot-login__code {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border: 1px solid var(--n-border-color, #e0e0e6);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  background: var(--n-color, #fafafa);
+
+  &:hover {
+    border-color: var(--n-primary-color, #18a058);
+  }
+}
+
+.copilot-login__code-text {
+  font-size: 28px;
+  font-weight: 700;
+  font-family: monospace;
+  letter-spacing: 4px;
+  color: var(--n-text-color, inherit);
+}
+
+.copilot-login__state--success {
+  color: #18a058;
+
+  svg {
+    stroke: #18a058;
+  }
+}
+
+.copilot-login__error {
+  color: #d03050;
+  text-align: center;
+  font-size: 13px;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
@@ -3,29 +3,65 @@ import { ref, computed } from 'vue'
 import { NButton, useMessage, useDialog } from 'naive-ui'
 import type { AvailableModelGroup } from '@/api/hermes/system'
 import { useModelsStore } from '@/stores/hermes/models'
+import { useAppStore } from '@/stores/hermes/app'
+import { useChatStore } from '@/stores/hermes/chat'
+import { checkCopilotToken, disableCopilot } from '@/api/hermes/copilot-auth'
 import { useI18n } from 'vue-i18n'

 const props = defineProps<{ provider: AvailableModelGroup }>()

 const { t } = useI18n()
 const modelsStore = useModelsStore()
+const appStore = useAppStore()
+const chatStore = useChatStore()
 const message = useMessage()
 const dialog = useDialog()

 const isCustom = computed(() => props.provider.provider.startsWith('custom:'))
+const isCopilot = computed(() => props.provider.provider === 'copilot')
 const displayName = computed(() => props.provider.label)
 const deleting = ref(false)

 async function handleDelete() {
+  let copilotMsg = ''
+  if (isCopilot.value) {
+    // 提前查 source，让用户清楚移除会不会影响 VS Code/gh CLI 等其他工具的登录态
+    try {
+      const status = await checkCopilotToken()
+      if (status.source === 'env') copilotMsg = t('models.copilotDeleteHintEnv')
+      else if (status.source === 'gh-cli') copilotMsg = t('models.copilotDeleteHintGhCli')
+      else if (status.source === 'apps-json') copilotMsg = t('models.copilotDeleteHintAppsJson')
+    } catch { /* ignore — fall back to generic confirm copy */ }
+  }
  dialog.warning({
    title: t('models.deleteProvider'),
-    content: t('models.deleteConfirm', { name: displayName.value }),
+    content: isCopilot.value && copilotMsg
+      ? `${t('models.deleteConfirm', { name: displayName.value })}\n\n${copilotMsg}`
+      : t('models.deleteConfirm', { name: displayName.value }),
    positiveText: t('common.delete'),
    negativeText: t('common.cancel'),
    onPositiveClick: async () => {
      deleting.value = true
      try {
-        await modelsStore.removeProvider(props.provider.provider)
+        if (isCopilot.value) {
+          // Copilot 走显式 opt-in 模型：disable 把 enabled 置 false，
+          // 仅当 token 来自 ~/.hermes/.env 时才清掉，gh-cli / apps.json 不动。
+          await disableCopilot()
+          // 服务端会在默认模型属于 copilot 时清掉 model.default，这里再清理本地
+          // 会话级 model/provider，避免 Chat 页继续显示已下架的 copilot 模型。
+          chatStore.clearProviderFromSessions('copilot')
+          await Promise.all([modelsStore.fetchProviders(), appStore.loadModels()])
+        } else {
+          await modelsStore.removeProvider(props.provider.provider)
+        }
+        // 删完之后若已没有默认模型，自动从剩余 provider 里挑一个，避免 chat 页
+        // "无默认模型"的尴尬态。与 hermes CLI `model` 子命令的隐含行为对齐。
+        if (!appStore.selectedModel && appStore.modelGroups.length > 0) {
+          const first = appStore.modelGroups.find(g => g.models.length > 0)
+          if (first) {
+            await appStore.switchModel(first.models[0], first.provider)
+          }
+        }
        message.success(t('models.providerDeleted'))
      } catch (e: any) {
        message.error(e.message)
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref, watch, computed, onMounted } from 'vue'
-import { NModal, NForm, NFormItem, NInput, NInputNumber, NButton, NSelect, NRadioGroup, NRadioButton, useMessage } from 'naive-ui'
+import { NModal, NForm, NFormItem, NInput, NInputNumber, NButton, NSelect, NRadioGroup, NRadioButton, useMessage, useDialog } from 'naive-ui'
 import { useModelsStore } from '@/stores/hermes/models'
 import { useI18n } from 'vue-i18n'
 import CodexLoginModal from './CodexLoginModal.vue'
 import NousLoginModal from './NousLoginModal.vue'
+import CopilotLoginModal from './CopilotLoginModal.vue'
+import { checkCopilotToken, enableCopilot, type CopilotTokenSource } from '@/api/hermes/copilot-auth'

 const { t } = useI18n()

@@ -15,12 +17,15 @@ const emit = defineEmits<{

 const modelsStore = useModelsStore()
 const message = useMessage()
+const dialog = useDialog()

 const showModal = ref(true)
 const loading = ref(false)
 const fetchingModels = ref(false)
 const showCodexLogin = ref(false)
 const showNousLogin = ref(false)
+const showCopilotLogin = ref(false)
+const copilotChecking = ref(false)

 const providerType = ref<'preset' | 'custom'>('preset')
 const selectedPreset = ref<string | null>(null)
@@ -36,6 +41,7 @@ const modelOptions = ref<Array<{ label: string; value: string }>>([])

 const CODEX_KEY = 'openai-codex'
 const NOUS_KEY = 'nous'
+const COPILOT_KEY = 'copilot'
 const ALIBABA_CODING_KEY = 'alibaba-coding-plan'
 const ALIBABA_CODING_REGIONS = {
  intl: 'https://coding-intl.dashscope.aliyuncs.com/v1',
@@ -44,6 +50,7 @@ const ALIBABA_CODING_REGIONS = {

 const isCodex = computed(() => selectedPreset.value === CODEX_KEY)
 const isNous = computed(() => selectedPreset.value === NOUS_KEY)
+const isCopilot = computed(() => selectedPreset.value === COPILOT_KEY)
 const isAlibabaCoding = computed(() => selectedPreset.value === ALIBABA_CODING_KEY)
 const alibabaCodingRegion = ref<'intl' | 'cn'>('intl')

@@ -73,6 +80,10 @@ watch(selectedPreset, (val) => {
        formData.value.model = group.models[0]
      }
    }
+    if (val === COPILOT_KEY) {
+      // 判断是否已能解析到 token：有 → 弹简单确认；无 → 走 in-app device flow
+      void triggerCopilotAdd()
+    }
  }
 })

@@ -150,6 +161,12 @@ async function handleSave() {
    return
  }

+  // Copilot: 走 token-aware 的添加流程（已有 token → 确认窗；否则 device flow）
+  if (isCopilot.value) {
+    void triggerCopilotAdd()
+    return
+  }
+
  if (!formData.value.base_url.trim()) {
    message.warning(t('models.baseUrlRequired'))
    return
@@ -199,6 +216,68 @@ async function handleNousSuccess() {
  emit('saved')
 }

+async function handleCopilotSuccess() {
+  showCopilotLogin.value = false
+  message.success(t('models.providerAdded'))
+  emit('saved')
+}
+
+function copilotSourceLabel(source: CopilotTokenSource): string {
+  if (source === 'env') return t('models.copilotAddSourceEnv')
+  if (source === 'gh-cli') return t('models.copilotAddSourceGhCli')
+  if (source === 'apps-json') return t('models.copilotAddSourceAppsJson')
+  return ''
+}
+
+async function triggerCopilotAdd() {
+  if (copilotChecking.value) return
+  copilotChecking.value = true
+  try {
+    const status = await checkCopilotToken()
+    if (status.has_token) {
+      // 已能解析到 token：弹确认窗，用户点 [添加] → enable + saved
+      const sourceText = copilotSourceLabel(status.source)
+      dialog.success({
+        title: t('models.copilotAddDetectedTitle'),
+        content: sourceText
+          ? `${t('models.copilotAddDetected')}\n\n${sourceText}`
+          : t('models.copilotAddDetected'),
+        positiveText: t('common.add'),
+        negativeText: t('common.cancel'),
+        onPositiveClick: async () => {
+          try {
+            await enableCopilot()
+            message.success(t('models.providerAdded'))
+            emit('saved')
+          } catch (e: any) {
+            message.error(e?.message ?? String(e))
+          }
+        },
+        onNegativeClick: () => {
+          selectedPreset.value = null
+        },
+        onClose: () => {
+          selectedPreset.value = null
+        },
+      })
+    } else {
+      // 无 token：device flow
+      showCopilotLogin.value = true
+    }
+  } catch (e: any) {
+    message.error(e?.message ?? String(e))
+    selectedPreset.value = null
+  } finally {
+    copilotChecking.value = false
+  }
+}
+
+function handleCopilotClose() {
+  showCopilotLogin.value = false
+  // 用户取消 Copilot 引导时，清空选择避免卡在无 api_key 状态
+  selectedPreset.value = null
+}
+
 function handleClose() {
  showModal.value = false
  setTimeout(() => emit('close'), 200)
@@ -211,7 +290,7 @@ function handleClose() {
    preset="card"
    :title="t('models.addProvider')"
    :style="{ width: 'min(520px, calc(100vw - 32px))' }"
-    :mask-closable="!loading && !showCodexLogin && !showNousLogin"
+    :mask-closable="!loading && !showCodexLogin && !showNousLogin && !showCopilotLogin"
    @after-leave="emit('close')"
  >
    <NForm label-placement="top">
@@ -326,6 +405,12 @@ function handleClose() {
      @close="showNousLogin = false"
      @success="handleNousSuccess"
    />
+
+    <CopilotLoginModal
+      v-if="showCopilotLogin"
+      @close="handleCopilotClose"
+      @success="handleCopilotSuccess"
+    />
  </NModal>
 </template>

@@ -57,6 +57,8 @@ function isGroupCollapsed(provider: string) {
 }

 function handleSelect(model: string, provider: string) {
+  const meta = appStore.modelGroups.find(g => g.provider === provider)?.model_meta?.[model]
+  if (meta?.disabled) return
  appStore.switchModel(model, provider)
  showModal.value = false
  searchQuery.value = ''
@@ -65,6 +67,9 @@ function handleSelect(model: string, provider: string) {
 function handleCustomSubmit() {
  const model = customInput.value.trim()
  if (!model || !customProvider.value) return
+  // 拦截 disabled 模型，避免 custom input 绕过列表里的灰显限制
+  const meta = appStore.modelGroups.find(g => g.provider === customProvider.value)?.model_meta?.[model]
+  if (meta?.disabled) return
  appStore.switchModel(model, customProvider.value)
  showModal.value = false
  searchQuery.value = ''
@@ -122,10 +127,16 @@ function openModal() {
              v-for="model in group.models"
              :key="model"
              class="model-item"
-              :class="{ active: model === appStore.selectedModel && group.provider === appStore.selectedProvider }"
+              :class="{
+                active: model === appStore.selectedModel && group.provider === appStore.selectedProvider,
+                disabled: !!group.model_meta?.[model]?.disabled,
+              }"
+              :title="group.model_meta?.[model]?.disabled ? t('models.disabledTooltip') : ''"
              @click="handleSelect(model, group.provider)"
            >
              <span class="model-item-name">{{ model }}</span>
+              <span v-if="group.model_meta?.[model]?.preview" class="model-badge-preview">{{ t('models.previewBadge') }}</span>
+              <span v-if="group.model_meta?.[model]?.disabled" class="model-badge-disabled">{{ t('models.disabledBadge') }}</span>
              <span v-if="customModelSet.has(model)" class="model-badge-custom">{{ t('models.customBadge') }}</span>
              <svg v-if="model === appStore.selectedModel && group.provider === appStore.selectedProvider" class="model-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12" />
@@ -285,6 +296,16 @@ function openModal() {
    color: $accent-primary;
    font-weight: 500;
  }
+
+  &.disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: transparent;
+      color: $text-secondary;
+    }
+  }
 }

 .model-item-name {
@@ -313,6 +334,31 @@ function openModal() {
  letter-spacing: 0.03em;
 }

+.model-badge-preview {
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 600;
+  color: #fff;
+  background: #d97706;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  letter-spacing: 0.03em;
+}
+
+.model-badge-disabled {
+  flex-shrink: 0;
+  font-size: 9px;
+  font-weight: 600;
+  color: $text-muted;
+  background: transparent;
+  border: 1px solid $border-color;
+  padding: 0 5px;
+  border-radius: 3px;
+  margin-right: 4px;
+  letter-spacing: 0.03em;
+}
+
 .model-empty {
  padding: 24px 0;
  text-align: center;