bingocode 1.0.1 → 1.0.3

package/desktop/src/pages/Settings.tsx

@@ -0,0 +1,1448 @@
+import { useState, useEffect, useMemo, useRef, type ReactNode } from 'react'
+import { useSettingsStore } from '../stores/settingsStore'
+import { useProviderStore } from '../stores/providerStore'
+import { useTranslation } from '../i18n'
+import { Modal } from '../components/shared/Modal'
+import { Input } from '../components/shared/Input'
+import { Button } from '../components/shared/Button'
+import type { PermissionMode, EffortLevel, ThemeMode } from '../types/settings'
+import type { Locale } from '../i18n'
+import { PROVIDER_PRESETS } from '../config/providerPresets'
+import type { ProviderPreset } from '../config/providerPresets'
+import type { SavedProvider, UpdateProviderInput, ProviderTestResult, ModelMapping, ApiFormat } from '../types/provider'
+import { AdapterSettings } from './AdapterSettings'
+import { useAgentStore } from '../stores/agentStore'
+import { useSessionStore } from '../stores/sessionStore'
+import type { AgentDefinition, AgentSource } from '../api/agents'
+import { MarkdownRenderer } from '../components/markdown/MarkdownRenderer'
+import { useSkillStore } from '../stores/skillStore'
+import { SkillList } from '../components/skills/SkillList'
+import { SkillDetail } from '../components/skills/SkillDetail'
+import { ComputerUseSettings } from './ComputerUseSettings'
+import { useUIStore, type SettingsTab } from '../stores/uiStore'
+import { ClaudeOfficialLogin } from '../components/settings/ClaudeOfficialLogin'
+import { useUpdateStore } from '../stores/updateStore'
+
+export function Settings() {
+  const [activeTab, setActiveTab] = useState<SettingsTab>('providers')
+  const pendingSettingsTab = useUIStore((s) => s.pendingSettingsTab)
+  const t = useTranslation()
+
+  useEffect(() => {
+    if (!pendingSettingsTab) return
+    setActiveTab(pendingSettingsTab)
+    useUIStore.getState().setPendingSettingsTab(null)
+  }, [pendingSettingsTab])
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden bg-[var(--color-surface)]">
+      <div className="flex-1 flex overflow-hidden">
+        {/* Tab navigation */}
+        <div className="w-[180px] border-r border-[var(--color-border)] py-3 flex-shrink-0 flex flex-col">
+          <div className="flex-1">
+            <TabButton icon="dns" label={t('settings.tab.providers')} active={activeTab === 'providers'} onClick={() => setActiveTab('providers')} />
+            <TabButton icon="shield" label={t('settings.tab.permissions')} active={activeTab === 'permissions'} onClick={() => setActiveTab('permissions')} />
+            <TabButton icon="tune" label={t('settings.tab.general')} active={activeTab === 'general'} onClick={() => setActiveTab('general')} />
+            <TabButton icon="chat" label={t('settings.tab.adapters')} active={activeTab === 'adapters'} onClick={() => setActiveTab('adapters')} />
+            <TabButton icon="smart_toy" label={t('settings.tab.agents')} active={activeTab === 'agents'} onClick={() => setActiveTab('agents')} />
+            <TabButton icon="auto_awesome" label={t('settings.tab.skills')} active={activeTab === 'skills'} onClick={() => setActiveTab('skills')} />
+            <TabButton icon="mouse" label={t('settings.tab.computerUse')} active={activeTab === 'computerUse'} onClick={() => setActiveTab('computerUse')} />
+          </div>
+          <div className="border-t border-[var(--color-border)]/40 pt-1">
+            <TabButton icon="info" label={t('settings.tab.about')} active={activeTab === 'about'} onClick={() => setActiveTab('about')} />
+          </div>
+        </div>
+
+        {/* Tab content */}
+        <div className="flex-1 overflow-y-auto px-8 py-6">
+          {activeTab === 'providers' && <ProviderSettings />}
+          {activeTab === 'permissions' && <PermissionSettings />}
+          {activeTab === 'general' && <GeneralSettings />}
+          {activeTab === 'adapters' && <AdapterSettings />}
+          {activeTab === 'agents' && <AgentsSettings />}
+          {activeTab === 'skills' && <SkillSettings />}
+          {activeTab === 'computerUse' && <ComputerUseSettings />}
+          {activeTab === 'about' && <AboutSettings />}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function TabButton({ icon, label, active, onClick }: { icon: string; label: string; active: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full flex items-center gap-2.5 px-4 py-2.5 text-sm text-left transition-colors ${
+        active
+          ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)] font-medium'
+          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+      }`}
+    >
+      <span className="material-symbols-outlined text-[18px]">{icon}</span>
+      {label}
+    </button>
+  )
+}
+
+// ─── Provider Settings ──────────────────────────────────────
+
+function ProviderSettings() {
+  const { providers, activeId, isLoading, fetchProviders, deleteProvider, activateProvider, activateOfficial, testProvider } = useProviderStore()
+  const fetchSettings = useSettingsStore((s) => s.fetchAll)
+  const t = useTranslation()
+  const [editingProvider, setEditingProvider] = useState<SavedProvider | null>(null)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [testResults, setTestResults] = useState<Record<string, { loading: boolean; result?: ProviderTestResult }>>({})
+
+  useEffect(() => { fetchProviders() }, [fetchProviders])
+
+  const handleDelete = async (provider: SavedProvider) => {
+    if (activeId === provider.id) return
+    if (!window.confirm(t('settings.providers.confirmDelete', { name: provider.name }))) return
+    await deleteProvider(provider.id).catch(console.error)
+  }
+
+  const handleTest = async (provider: SavedProvider) => {
+    setTestResults((r) => ({ ...r, [provider.id]: { loading: true } }))
+    try {
+      const result = await testProvider(provider.id)
+      setTestResults((r) => ({ ...r, [provider.id]: { loading: false, result } }))
+    } catch {
+      setTestResults((r) => ({ ...r, [provider.id]: { loading: false, result: { connectivity: { success: false, latencyMs: 0, error: t('settings.providers.requestFailed') } } } }))
+    }
+  }
+
+  const handleActivate = async (id: string) => {
+    await activateProvider(id)
+    await fetchSettings()
+  }
+
+  const handleActivateOfficial = async () => {
+    await activateOfficial()
+    await fetchSettings()
+  }
+
+  const isOfficialActive = activeId === null
+
+  return (
+    <div className="max-w-2xl">
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <h2 className="text-base font-semibold text-[var(--color-text-primary)]">{t('settings.providers.title')}</h2>
+          <p className="text-sm text-[var(--color-text-tertiary)] mt-0.5">{t('settings.providers.description')}</p>
+        </div>
+        <Button size="sm" onClick={() => setShowCreateModal(true)}>
+          <span className="material-symbols-outlined text-[16px]">add</span>
+          {t('settings.providers.addProvider')}
+        </Button>
+      </div>
+
+      {/* Official provider — always visible at top */}
+      <div
+        className={`relative flex flex-col rounded-xl border transition-all mb-2 ${
+          isOfficialActive
+            ? 'border-[var(--color-brand)] bg-[var(--color-surface-container)] shadow-[var(--shadow-focus-ring)]'
+            : 'border-[var(--color-border)] hover:border-[var(--color-border-focus)] cursor-pointer'
+        }`}
+      >
+        <div
+          className="flex items-center gap-4 px-4 py-3.5"
+          onClick={() => !isOfficialActive && handleActivateOfficial()}
+        >
+          <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${isOfficialActive ? 'bg-[var(--color-success)]' : 'bg-[var(--color-text-tertiary)]'}`} />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-[var(--color-text-primary)]">{t('settings.providers.officialName')}</span>
+              {isOfficialActive && (
+                <span className="px-1.5 py-0.5 text-[10px] font-bold rounded border border-[var(--color-brand)]/18 bg-[var(--color-brand)]/14 text-[var(--color-brand)] leading-none">{t('common.active')}</span>
+              )}
+            </div>
+            <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5">{t('settings.providers.officialDesc')}</div>
+          </div>
+        </div>
+
+        {isOfficialActive && (
+          <div className="px-4 pb-4 pt-3 border-t border-[var(--color-border-separator)]">
+            <ClaudeOfficialLogin />
+          </div>
+        )}
+      </div>
+
+      {/* Saved providers */}
+      {isLoading && providers.length === 0 ? (
+        <div className="flex justify-center py-8">
+          <div className="animate-spin w-5 h-5 border-2 border-[var(--color-brand)] border-t-transparent rounded-full" />
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {providers.map((provider) => {
+            const isActive = activeId === provider.id
+            const test = testResults[provider.id]
+            const preset = PROVIDER_PRESETS.find((p) => p.id === provider.presetId)
+            return (
+              <div
+                key={provider.id}
+                className={`relative flex items-center gap-4 px-4 py-3.5 rounded-xl border transition-all group ${
+                  isActive
+                    ? 'border-[var(--color-brand)] bg-[var(--color-surface-container)] shadow-[var(--shadow-focus-ring)]'
+                    : 'border-[var(--color-border)] hover:border-[var(--color-border-focus)]'
+                }`}
+              >
+                <span className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${isActive ? 'bg-[var(--color-success)]' : 'bg-[var(--color-text-tertiary)]'}`} />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-[var(--color-text-primary)] truncate">{provider.name}</span>
+                    {preset && preset.id !== 'custom' && (
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)] leading-none">{preset.name}</span>
+                    )}
+                    {provider.apiFormat && provider.apiFormat !== 'anthropic' && (
+                      <span className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-[var(--color-surface-container-high)] text-[var(--color-warning)] leading-none">
+                        {provider.apiFormat === 'openai_chat' ? 'OpenAI Chat' : 'OpenAI Responses'}
+                      </span>
+                    )}
+                    {isActive && (
+                      <span className="px-1.5 py-0.5 text-[10px] font-bold rounded border border-[var(--color-brand)]/18 bg-[var(--color-brand)]/14 text-[var(--color-brand)] leading-none">{t('common.active')}</span>
+                    )}
+                  </div>
+                  <div className="text-xs text-[var(--color-text-tertiary)] truncate mt-0.5">
+                    {provider.baseUrl} &middot; {provider.models.main}
+                  </div>
+                  {test && !test.loading && test.result && (
+                    <div className="text-xs mt-1 flex flex-col gap-0.5">
+                      <span className={test.result.connectivity.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}>
+                        {test.result.connectivity.success
+                          ? t('settings.providers.connectivityOk', { latency: String(test.result.connectivity.latencyMs) })
+                          : t('settings.providers.connectivityFailed', { error: test.result.connectivity.error || '' })}
+                      </span>
+                      {test.result.proxy && (
+                        <span className={test.result.proxy.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}>
+                          {test.result.proxy.success
+                            ? t('settings.providers.proxyOk', { latency: String(test.result.proxy.latencyMs) })
+                            : t('settings.providers.proxyFailed', { error: test.result.proxy.error || '' })}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+                  {!isActive && (
+                    <Button variant="ghost" size="sm" onClick={() => handleActivate(provider.id)}>{t('settings.providers.activate')}</Button>
+                  )}
+                  <Button variant="ghost" size="sm" onClick={() => handleTest(provider)} loading={test?.loading}>{t('settings.providers.test')}</Button>
+                  <Button variant="ghost" size="sm" onClick={() => setEditingProvider(provider)}>{t('settings.providers.edit')}</Button>
+                  {!isActive && (
+                    <Button variant="ghost" size="sm" onClick={() => handleDelete(provider)} className="text-[var(--color-error)] hover:text-[var(--color-error)]">{t('common.delete')}</Button>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Create Modal — conditionally rendered so state resets on close */}
+      {showCreateModal && (
+        <ProviderFormModal open={true} onClose={() => setShowCreateModal(false)} mode="create" />
+      )}
+
+      {/* Edit Modal */}
+      {editingProvider && (
+        <ProviderFormModal key={editingProvider.id} open={true} onClose={() => setEditingProvider(null)} mode="edit" provider={editingProvider} />
+      )}
+    </div>
+  )
+}
+
+// ─── Provider Form Modal ──────────────────────────────────────
+
+type ProviderFormProps = {
+  open: boolean
+  onClose: () => void
+  mode: 'create' | 'edit'
+  provider?: SavedProvider
+}
+
+function requirePreset(preset: ProviderPreset | undefined): ProviderPreset {
+  if (!preset) {
+    throw new Error('Provider presets are not configured')
+  }
+  return preset
+}
+
+function ProviderFormModal({ open, onClose, mode, provider }: ProviderFormProps) {
+  const { createProvider, updateProvider, testConfig } = useProviderStore()
+  const fetchSettings = useSettingsStore((s) => s.fetchAll)
+  const t = useTranslation()
+
+  const availablePresets = PROVIDER_PRESETS.filter((p) => p.id !== 'official')
+  const fallbackPreset = requirePreset(
+    availablePresets[availablePresets.length - 1] ?? PROVIDER_PRESETS[0],
+  )
+  const initialPreset = requirePreset(
+    provider
+      ? availablePresets.find((p) => p.id === provider.presetId) ?? fallbackPreset
+      : availablePresets[0] ?? fallbackPreset,
+  )
+
+  const [selectedPreset, setSelectedPreset] = useState<ProviderPreset>(initialPreset)
+  const [name, setName] = useState(provider?.name ?? initialPreset.name)
+  const [baseUrl, setBaseUrl] = useState(provider?.baseUrl ?? initialPreset.baseUrl)
+  const [apiFormat, setApiFormat] = useState<ApiFormat>(provider?.apiFormat ?? initialPreset.apiFormat ?? 'anthropic')
+  const [apiKey, setApiKey] = useState('')
+  const [notes, setNotes] = useState(provider?.notes ?? '')
+  const [models, setModels] = useState<ModelMapping>(provider?.models ?? { ...initialPreset.defaultModels })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [testResult, setTestResult] = useState<ProviderTestResult | null>(null)
+  const [isTesting, setIsTesting] = useState(false)
+  const [settingsJson, setSettingsJson] = useState('')
+  const [settingsJsonError, setSettingsJsonError] = useState<string | null>(null)
+  const jsonPastedRef = useRef(false)
+
+  // Load current settings.json and merge provider env vars
+  useEffect(() => {
+    // Skip if JSON was just populated by user paste
+    if (jsonPastedRef.current) {
+      jsonPastedRef.current = false
+      return
+    }
+    import('../api/settings').then(({ settingsApi }) => {
+      settingsApi.getUser().then((settings) => {
+        const needsProxy = apiFormat !== 'anthropic'
+        const merged = {
+          ...settings,
+          env: {
+            ...((settings.env as Record<string, string>) || {}),
+            ANTHROPIC_BASE_URL: needsProxy ? 'http://127.0.0.1:3456/proxy' : baseUrl,
+            ANTHROPIC_AUTH_TOKEN: needsProxy ? 'proxy-managed' : (apiKey || '(your API key)'),
+            ANTHROPIC_MODEL: models.main,
+            ANTHROPIC_DEFAULT_HAIKU_MODEL: models.haiku,
+            ANTHROPIC_DEFAULT_SONNET_MODEL: models.sonnet,
+            ANTHROPIC_DEFAULT_OPUS_MODEL: models.opus,
+          },
+        }
+        setSettingsJson(JSON.stringify(merged, null, 2))
+      }).catch(() => {
+        setSettingsJson(JSON.stringify({}, null, 2))
+      })
+    })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedPreset.id])
+
+  const handlePresetChange = (preset: ProviderPreset) => {
+    setSelectedPreset(preset)
+    setName(preset.name)
+    setBaseUrl(preset.baseUrl)
+    setApiFormat(preset.apiFormat ?? 'anthropic')
+    setModels({ ...preset.defaultModels })
+    setTestResult(null)
+  }
+
+  const isCustom = selectedPreset.id === 'custom'
+  const canSubmit = name.trim() && baseUrl.trim() && (mode === 'edit' || apiKey.trim()) && models.main.trim() && !settingsJsonError
+
+  const handleSubmit = async () => {
+    if (!canSubmit) return
+    setIsSubmitting(true)
+    try {
+      // Write the edited settings.json first (for all presets including official)
+      if (settingsJson.trim()) {
+        try {
+          const parsed = JSON.parse(settingsJson)
+          const { settingsApi } = await import('../api/settings')
+          await settingsApi.updateUser(parsed)
+        } catch {
+          // JSON validation already prevents this
+        }
+      }
+
+      if (mode === 'create') {
+        await createProvider({
+          presetId: selectedPreset.id,
+          name: name.trim(),
+          apiKey: apiKey.trim(),
+          baseUrl: baseUrl.trim(),
+          apiFormat,
+          models,
+          notes: notes.trim() || undefined,
+        })
+      } else if (provider) {
+        const input: UpdateProviderInput = {
+          name: name.trim(),
+          baseUrl: baseUrl.trim(),
+          apiFormat,
+          models,
+          notes: notes.trim() || undefined,
+        }
+        if (apiKey.trim()) input.apiKey = apiKey.trim()
+        await updateProvider(provider.id, input)
+      }
+      await fetchSettings()
+      onClose()
+    } catch (err) {
+      console.error('Failed to save provider:', err)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleTest = async () => {
+    if (!baseUrl.trim() || !models.main.trim()) return
+    setIsTesting(true)
+    setTestResult(null)
+    try {
+      let result: ProviderTestResult
+      if (mode === 'edit' && provider && !apiKey.trim()) {
+        result = await useProviderStore.getState().testProvider(provider.id, {
+          baseUrl: baseUrl.trim(),
+          modelId: models.main.trim(),
+          apiFormat,
+        })
+      } else {
+        if (!apiKey.trim()) return
+        result = await testConfig({ baseUrl: baseUrl.trim(), apiKey: apiKey.trim(), modelId: models.main.trim(), apiFormat })
+      }
+      setTestResult(result)
+    } catch {
+      setTestResult({ connectivity: { success: false, latencyMs: 0, error: t('settings.providers.requestFailed') } })
+    } finally {
+      setIsTesting(false)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={mode === 'create' ? t('settings.providers.addTitle') : t('settings.providers.editTitle')}
+      width={720}
+      footer={
+        <>
+          <Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button>
+          <Button onClick={handleSubmit} disabled={!canSubmit} loading={isSubmitting}>
+            {mode === 'create' ? t('common.add') : t('common.save')}
+          </Button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        {/* Preset chips */}
+        {mode === 'create' && (
+          <div>
+            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.preset')}</label>
+            <div className="flex flex-wrap gap-2">
+              {availablePresets.map((preset) => (
+                <button
+                  key={preset.id}
+                  onClick={() => handlePresetChange(preset)}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-full border transition-all ${
+                    selectedPreset.id === preset.id
+                      ? 'border-[var(--color-brand)] bg-[var(--color-surface-container-high)] text-[var(--color-brand)] shadow-[var(--shadow-focus-ring)]'
+                      : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)]'
+                  }`}
+                >
+                  {preset.name}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <Input label={t('settings.providers.name')} required value={name} onChange={(e) => setName(e.target.value)} placeholder={t('settings.providers.namePlaceholder')} />
+
+        <Input label={t('settings.providers.notes')} value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={t('settings.providers.notesPlaceholder')} />
+
+        {/* Base URL */}
+        {isCustom || mode === 'edit' ? (
+          <Input label={t('settings.providers.baseUrl')} required value={baseUrl} onChange={(e) => setBaseUrl(e.target.value)} placeholder={t('settings.providers.baseUrlPlaceholder')} />
+        ) : (
+          <div>
+            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.baseUrl')}</label>
+            <div className="text-xs text-[var(--color-text-tertiary)] px-3 py-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] border border-[var(--color-border)]">
+              {baseUrl}
+            </div>
+          </div>
+        )}
+
+        {/* API Format */}
+        {(isCustom || mode === 'edit') ? (
+          <div>
+            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.apiFormat')}</label>
+            <select
+              value={apiFormat}
+              onChange={(e) => setApiFormat(e.target.value as ApiFormat)}
+              className="w-full text-sm px-3 py-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] border border-[var(--color-border)] text-[var(--color-text-primary)] outline-none focus:border-[var(--color-border-focus)]"
+            >
+              <option value="anthropic">{t('settings.providers.apiFormatAnthropic')}</option>
+              <option value="openai_chat">{t('settings.providers.apiFormatOpenaiChat')}</option>
+              <option value="openai_responses">{t('settings.providers.apiFormatOpenaiResponses')}</option>
+            </select>
+            {apiFormat !== 'anthropic' && (
+              <p className="text-[11px] text-[var(--color-text-tertiary)] mt-1">{t('settings.providers.proxyHint')}</p>
+            )}
+          </div>
+        ) : apiFormat !== 'anthropic' ? (
+          <div>
+            <label className="text-sm font-medium text-[var(--color-text-primary)] mb-1 block">{t('settings.providers.apiFormat')}</label>
+            <div className="text-xs text-[var(--color-text-tertiary)] px-3 py-2 rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] border border-[var(--color-border)]">
+              {apiFormat === 'openai_chat' ? t('settings.providers.apiFormatOpenaiChat') : t('settings.providers.apiFormatOpenaiResponses')}
+            </div>
+          </div>
+        ) : null}
+
+        <Input
+          label={mode === 'edit' ? t('settings.providers.apiKeyKeep') : t('settings.providers.apiKey')}
+          required={mode === 'create'}
+          type="password"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder={mode === 'edit' ? '****' : 'sk-...'}
+        />
+
+        {/* Model Mapping */}
+        <div>
+          <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.modelMapping')}</label>
+          <div className="grid grid-cols-2 gap-2">
+            <Input label={t('settings.providers.mainModel')} required value={models.main} onChange={(e) => setModels({ ...models, main: e.target.value })} placeholder="Model ID" />
+            <Input label={t('settings.providers.haikuModel')} value={models.haiku} onChange={(e) => setModels({ ...models, haiku: e.target.value })} placeholder={t('settings.providers.sameAsMain')} />
+            <Input label={t('settings.providers.sonnetModel')} value={models.sonnet} onChange={(e) => setModels({ ...models, sonnet: e.target.value })} placeholder={t('settings.providers.sameAsMain')} />
+            <Input label={t('settings.providers.opusModel')} value={models.opus} onChange={(e) => setModels({ ...models, opus: e.target.value })} placeholder={t('settings.providers.sameAsMain')} />
+          </div>
+        </div>
+
+        {/* Test connection */}
+        <div className="flex items-center gap-3">
+          <Button variant="secondary" size="sm" onClick={handleTest} loading={isTesting} disabled={!baseUrl.trim() || !models.main.trim()}>
+            {t('settings.providers.testConnection')}
+          </Button>
+          {testResult && (
+            <div className="flex flex-col gap-0.5">
+              <span className={`text-xs ${testResult.connectivity.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}`}>
+                {testResult.connectivity.success
+                  ? t('settings.providers.connectivityOk', { latency: String(testResult.connectivity.latencyMs) })
+                  : t('settings.providers.connectivityFailed', { error: testResult.connectivity.error || '' })}
+              </span>
+              {testResult.proxy && (
+                <span className={`text-xs ${testResult.proxy.success ? 'text-[var(--color-success)]' : 'text-[var(--color-error)]'}`}>
+                  {testResult.proxy.success
+                    ? t('settings.providers.proxyOk', { latency: String(testResult.proxy.latencyMs) })
+                    : t('settings.providers.proxyFailed', { error: testResult.proxy.error || '' })}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Settings JSON — editable, shown for all presets including official */}
+        <div>
+          <label className="text-sm font-medium text-[var(--color-text-primary)] mb-2 block">{t('settings.providers.settingsJson')}</label>
+          <textarea
+            value={settingsJson}
+            onChange={(e) => {
+              const raw = e.target.value
+              setSettingsJson(raw)
+              try {
+                const parsed = JSON.parse(raw)
+                setSettingsJsonError(null)
+                // Auto-fill form fields from parsed JSON env
+                const env = parsed.env as Record<string, string> | undefined
+                if (env) {
+                  if (env.ANTHROPIC_BASE_URL) {
+                    setBaseUrl(env.ANTHROPIC_BASE_URL)
+                    // Auto-switch to matching preset or Custom
+                    if (mode === 'create') {
+                      const matchedPreset = availablePresets.find((p) => p.id !== 'custom' && p.baseUrl === env.ANTHROPIC_BASE_URL)
+                      const targetPreset = requirePreset(
+                        matchedPreset ?? availablePresets.find((p) => p.id === 'custom'),
+                      )
+                      if (targetPreset.id !== selectedPreset.id) {
+                        jsonPastedRef.current = true
+                        setSelectedPreset(targetPreset)
+                      }
+                    }
+                  }
+                  if (env.ANTHROPIC_AUTH_TOKEN && env.ANTHROPIC_AUTH_TOKEN !== '(your API key)') setApiKey(env.ANTHROPIC_AUTH_TOKEN)
+                  const newModels: Partial<ModelMapping> = {}
+                  if (env.ANTHROPIC_MODEL) newModels.main = env.ANTHROPIC_MODEL
+                  if (env.ANTHROPIC_DEFAULT_HAIKU_MODEL) newModels.haiku = env.ANTHROPIC_DEFAULT_HAIKU_MODEL
+                  if (env.ANTHROPIC_DEFAULT_SONNET_MODEL) newModels.sonnet = env.ANTHROPIC_DEFAULT_SONNET_MODEL
+                  if (env.ANTHROPIC_DEFAULT_OPUS_MODEL) newModels.opus = env.ANTHROPIC_DEFAULT_OPUS_MODEL
+                  if (Object.keys(newModels).length > 0) {
+                    setModels((prev) => ({ ...prev, ...newModels }))
+                  }
+                }
+              } catch (err) {
+                setSettingsJsonError(err instanceof Error ? err.message : 'Invalid JSON')
+              }
+            }}
+            rows={16}
+            spellCheck={false}
+            className={`w-full text-xs px-3 py-3 rounded-[var(--radius-md)] bg-[var(--color-surface-container-low)] border font-mono leading-relaxed resize-y text-[var(--color-text-secondary)] outline-none ${
+              settingsJsonError
+                ? 'border-[var(--color-error)] focus:border-[var(--color-error)]'
+                : 'border-[var(--color-border)] focus:border-[var(--color-border-focus)]'
+            }`}
+          />
+          {settingsJsonError && (
+            <p className="text-[11px] text-[var(--color-error)] mt-1">{t('settings.providers.jsonError', { error: settingsJsonError })}</p>
+          )}
+          <p className="text-[11px] text-[var(--color-text-tertiary)] mt-1">{t('settings.providers.settingsJsonDesc')}</p>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+
+// ─── Permission Settings ──────────────────────────────────────
+
+function PermissionSettings() {
+  const { permissionMode, setPermissionMode } = useSettingsStore()
+  const t = useTranslation()
+
+  const MODES: Array<{ mode: PermissionMode; icon: string; label: string; desc: string }> = [
+    { mode: 'default', icon: 'verified_user', label: t('settings.permissions.default'), desc: t('settings.permissions.defaultDesc') },
+    { mode: 'acceptEdits', icon: 'edit_note', label: t('settings.permissions.acceptEdits'), desc: t('settings.permissions.acceptEditsDesc') },
+    { mode: 'plan', icon: 'architecture', label: t('settings.permissions.plan'), desc: t('settings.permissions.planDesc') },
+    { mode: 'bypassPermissions', icon: 'bolt', label: t('settings.permissions.bypass'), desc: t('settings.permissions.bypassDesc') },
+  ]
+
+  return (
+    <div className="max-w-xl">
+      <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-1">{t('settings.permissions.title')}</h2>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-4">{t('settings.permissions.description')}</p>
+
+      <div className="flex flex-col gap-2">
+        {MODES.map(({ mode, icon, label, desc }) => {
+          const isSelected = permissionMode === mode
+          return (
+            <button
+              key={mode}
+              onClick={() => setPermissionMode(mode)}
+              className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-all text-left ${
+                isSelected
+                  ? 'border-[var(--color-brand)] bg-[var(--color-surface-container)] shadow-[var(--shadow-focus-ring)]'
+                  : 'border-[var(--color-border)] hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)]'
+              }`}
+            >
+              <span className="material-symbols-outlined text-[20px] text-[var(--color-text-secondary)]">{icon}</span>
+              <div className="flex-1">
+                <div className="text-sm font-semibold text-[var(--color-text-primary)]">{label}</div>
+                <div className="text-xs text-[var(--color-text-tertiary)]">{desc}</div>
+              </div>
+              {isSelected && (
+                <span className="material-symbols-outlined text-[18px] text-[var(--color-brand)]" style={{ fontVariationSettings: "'FILL' 1" }}>
+                  check_circle
+                </span>
+              )}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+// ─── General Settings ──────────────────────────────────────
+
+function GeneralSettings() {
+  const { effortLevel, setEffort, locale, setLocale, theme, setTheme } = useSettingsStore()
+  const t = useTranslation()
+
+  const EFFORT_LABELS: Record<EffortLevel, string> = {
+    low: t('settings.general.effort.low'),
+    medium: t('settings.general.effort.medium'),
+    high: t('settings.general.effort.high'),
+    max: t('settings.general.effort.max'),
+  }
+
+  const LANGUAGES: Array<{ value: Locale; label: string }> = [
+    { value: 'en', label: 'English' },
+    { value: 'zh', label: '中文' },
+  ]
+
+  const THEMES: Array<{ value: ThemeMode; label: string }> = [
+    { value: 'light', label: t('settings.general.appearance.light') },
+    { value: 'dark', label: t('settings.general.appearance.dark') },
+  ]
+
+  return (
+    <div className="max-w-xl">
+      {/* Appearance selector */}
+      <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-1">{t('settings.general.appearanceTitle')}</h2>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.appearanceDescription')}</p>
+      <div className="flex gap-2 mb-8">
+        {THEMES.map(({ value, label }) => (
+          <button
+            key={value}
+            onClick={() => void setTheme(value)}
+            className={`flex-1 py-2 text-xs font-semibold rounded-lg border transition-all ${
+              theme === value
+                ? 'bg-[image:var(--gradient-btn-primary)] text-[var(--color-btn-primary-fg)] border-transparent shadow-[var(--shadow-button-primary)]'
+                : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* Language selector */}
+      <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-1">{t('settings.general.languageTitle')}</h2>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.languageDescription')}</p>
+      <div className="flex gap-2 mb-8">
+        {LANGUAGES.map(({ value, label }) => (
+          <button
+            key={value}
+            onClick={() => setLocale(value)}
+            className={`flex-1 py-2 text-xs font-semibold rounded-lg border transition-all ${
+              locale === value
+                ? 'bg-[var(--color-brand)] text-white border-[var(--color-brand)]'
+                : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+            }`}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* Effort Level */}
+      <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-1">{t('settings.general.effortTitle')}</h2>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-3">{t('settings.general.effortDescription')}</p>
+      <div className="flex gap-2">
+        {(['low', 'medium', 'high', 'max'] as EffortLevel[]).map((level) => (
+          <button
+            key={level}
+            onClick={() => setEffort(level)}
+            className={`flex-1 py-2 text-xs font-semibold rounded-lg border transition-all ${
+              effortLevel === level
+                ? 'bg-[var(--color-brand)] text-white border-[var(--color-brand)]'
+                : 'border-[var(--color-border)] text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)]'
+            }`}
+          >
+            {EFFORT_LABELS[level]}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Agents Settings ──────────────────────────────────────
+
+const AGENT_COLORS: Record<string, string> = {
+  red: '#ef4444',
+  orange: '#f97316',
+  yellow: '#eab308',
+  green: '#22c55e',
+  blue: '#3b82f6',
+  purple: '#a855f7',
+  pink: '#ec4899',
+  cyan: '#06b6d4',
+}
+
+const AGENT_SOURCE_ORDER: AgentSource[] = [
+  'userSettings',
+  'projectSettings',
+  'localSettings',
+  'policySettings',
+  'plugin',
+  'flagSettings',
+  'built-in',
+]
+
+function AgentsSettings() {
+  const {
+    activeAgents,
+    allAgents,
+    isLoading,
+    error,
+    selectedAgent,
+    fetchAgents,
+    selectAgent,
+  } = useAgentStore()
+  const sessions = useSessionStore((s) => s.sessions)
+  const activeSessionId = useSessionStore((s) => s.activeSessionId)
+  const t = useTranslation()
+
+  const activeSession = sessions.find((s) => s.id === activeSessionId)
+  const currentWorkDir = activeSession?.workDir || undefined
+
+  useEffect(() => {
+    void fetchAgents(currentWorkDir)
+  }, [fetchAgents, currentWorkDir])
+
+  const groupedAgents = useMemo(() => {
+    const groups: Partial<Record<AgentSource, AgentDefinition[]>> = {}
+    for (const agent of allAgents) {
+      ;(groups[agent.source] ??= []).push(agent)
+    }
+    return groups
+  }, [allAgents])
+
+  const sourceCount = AGENT_SOURCE_ORDER.filter((source) => (groupedAgents[source] ?? []).length > 0).length
+
+  if (selectedAgent) {
+    return (
+      <div className="w-full min-w-0">
+        <AgentDetailView agent={selectedAgent} onBack={() => selectAgent(null)} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full min-w-0">
+      {isLoading && allAgents.length === 0 ? (
+        <div className="flex justify-center py-12">
+          <div className="animate-spin w-5 h-5 border-2 border-[var(--color-brand)] border-t-transparent rounded-full" />
+        </div>
+      ) : error ? (
+        <div className="text-center py-12 px-4">
+          <span className="material-symbols-outlined text-[40px] text-[var(--color-error)] mb-3 block">error_outline</span>
+          <p className="text-sm text-[var(--color-error)] mb-2">{error}</p>
+          <button
+            onClick={() => void fetchAgents(currentWorkDir)}
+            className="text-xs text-[var(--color-text-accent)] hover:underline"
+          >
+            {t('common.retry')}
+          </button>
+        </div>
+      ) : allAgents.length === 0 ? (
+        <div className="text-center py-12 px-4 rounded-2xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
+          <span className="material-symbols-outlined text-[40px] text-[var(--color-text-tertiary)] mb-3 block">smart_toy</span>
+          <p className="text-sm text-[var(--color-text-secondary)] mb-1">{t('settings.agents.empty')}</p>
+          <p className="text-xs text-[var(--color-text-tertiary)]">{t('settings.agents.emptyHint')}</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-6 min-w-0">
+          <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-hidden">
+            <div className="grid gap-4 px-5 py-5 min-w-0 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,1fr)] xl:items-end">
+              <div className="min-w-0">
+                <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
+                  {t('settings.agents.browserEyebrow')}
+                </div>
+                <div className="flex items-center gap-3 mb-2">
+                  <span className="material-symbols-outlined text-[22px] text-[var(--color-brand)]">
+                    smart_toy
+                  </span>
+                  <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">
+                    {t('settings.agents.browserTitle')}
+                  </h3>
+                </div>
+                <p className="text-sm leading-6 text-[var(--color-text-secondary)] max-w-3xl">
+                  {t('settings.agents.description')}
+                </p>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3 min-w-0 sm:grid-cols-3">
+                <SummaryCard
+                  label={t('settings.agents.summary.totalAgents')}
+                  value={String(allAgents.length)}
+                  icon="smart_toy"
+                />
+                <SummaryCard
+                  label={t('settings.agents.summary.activeAgents')}
+                  value={String(activeAgents.length)}
+                  icon="bolt"
+                />
+                <SummaryCard
+                  label={t('settings.agents.summary.sources')}
+                  value={String(sourceCount)}
+                  icon="layers"
+                  className="col-span-2 sm:col-span-1"
+                />
+              </div>
+            </div>
+          </section>
+
+          <div className={`grid gap-4 ${sourceCount >= 2 ? 'xl:grid-cols-2' : ''}`}>
+            {AGENT_SOURCE_ORDER.map((source) => {
+              const group = groupedAgents[source]
+              if (!group?.length) return null
+
+              const sourceLabel = t(`settings.agents.source.${source}`)
+              return (
+                <section
+                  key={source}
+                  className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden min-w-0"
+                >
+                  <div className="flex items-start justify-between gap-3 px-5 py-4 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)]">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 mb-1 flex-wrap">
+                        <span className={`inline-flex h-7 w-7 items-center justify-center rounded-full ${getAgentSourceAccentClass(source)}`}>
+                          <span className="material-symbols-outlined text-[16px]">
+                            {getAgentSourceIcon(source)}
+                          </span>
+                        </span>
+                        <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
+                          {sourceLabel}
+                        </h4>
+                        <span className="text-xs text-[var(--color-text-tertiary)]">
+                          {group.length}
+                        </span>
+                      </div>
+                      <p className="text-xs leading-5 text-[var(--color-text-tertiary)]">
+                        {t('settings.agents.groupHint', {
+                          source: sourceLabel,
+                          count: String(group.length),
+                        })}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col p-2">
+                    {group.map((agent) => (
+                      <button
+                        key={`${agent.source}-${agent.agentType}`}
+                        onClick={() => selectAgent(agent)}
+                        className="group rounded-xl border border-transparent px-3 py-3 text-left transition-all hover:border-[var(--color-border-focus)] hover:bg-[var(--color-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface)]"
+                      >
+                        <div className="flex items-start gap-3">
+                          <span
+                            className="mt-0.5 flex-shrink-0 inline-flex items-center justify-center"
+                            style={{ color: getAgentDotColor(agent.color) }}
+                          >
+                            <span className="material-symbols-outlined text-[18px]">smart_toy</span>
+                          </span>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 flex-wrap">
+                              <span className="text-sm font-bold text-[var(--color-text-primary)] break-all">
+                                {agent.agentType}
+                              </span>
+                              {agent.modelDisplay && (
+                                <MetaPill>{agent.modelDisplay}</MetaPill>
+                              )}
+                              <MetaPill>{sourceLabel}</MetaPill>
+                              <MetaPill>
+                                {agent.isActive
+                                  ? t('settings.agents.status.active')
+                                  : t('settings.agents.status.available')}
+                              </MetaPill>
+                              {agent.overriddenBy && (
+                                <MetaPill>
+                                  {t('settings.agents.overriddenBy', {
+                                    source: t(`settings.agents.source.${agent.overriddenBy}`),
+                                  })}
+                                </MetaPill>
+                              )}
+                            </div>
+                            <div className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)] break-words [&_.prose]:text-xs [&_.prose]:leading-5 [&_.prose]:text-[var(--color-text-secondary)]">
+                              <MarkdownRenderer
+                                content={agent.description || t('settings.agents.noDescription')}
+                              />
+                            </div>
+                            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-[var(--color-text-tertiary)]">
+                              <span>
+                                {agent.tools?.length
+                                  ? t('settings.agents.toolCount', { count: String(agent.tools.length) })
+                                  : t('settings.agents.noTools')}
+                              </span>
+                              {agent.baseDir && (
+                                <span className="break-all">{agent.baseDir}</span>
+                              )}
+                            </div>
+                          </div>
+                          <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)] opacity-60 transition-transform group-hover:translate-x-0.5 group-hover:opacity-100">
+                            chevron_right
+                          </span>
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </section>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AgentDetailView({ agent, onBack }: { agent: AgentDefinition; onBack: () => void }) {
+  const t = useTranslation()
+  const sourceLabel = t(`settings.agents.source.${agent.source}`)
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4 min-w-0">
+      <div>
+        <button
+          onClick={onBack}
+          className="inline-flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]"
+        >
+          <span className="material-symbols-outlined text-[16px]">arrow_back</span>
+          {t('settings.agents.backToList')}
+        </button>
+      </div>
+
+      <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] overflow-hidden">
+        <div className="grid gap-4 px-5 py-5 lg:grid-cols-[minmax(0,1.5fr)_minmax(280px,0.9fr)] lg:items-start">
+          <div className="min-w-0">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)] mb-2">
+              {t('settings.agents.entryEyebrow')}
+            </div>
+            <div className="flex flex-wrap items-center gap-2 mb-2">
+              <span
+                className="h-3 w-3 rounded-full flex-shrink-0"
+                style={{ backgroundColor: getAgentDotColor(agent.color) }}
+              />
+              <h3 className="text-[22px] font-semibold leading-tight text-[var(--color-text-primary)] break-all">
+                {agent.agentType}
+              </h3>
+              <MetaPill>{sourceLabel}</MetaPill>
+              {agent.modelDisplay && <MetaPill>{agent.modelDisplay}</MetaPill>}
+              <MetaPill>
+                {agent.isActive
+                  ? t('settings.agents.status.active')
+                  : t('settings.agents.status.available')}
+              </MetaPill>
+              {agent.overriddenBy && (
+                <MetaPill>
+                  {t('settings.agents.overriddenByShort', {
+                    source: t(`settings.agents.source.${agent.overriddenBy}`),
+                  })}
+                </MetaPill>
+              )}
+            </div>
+            <div className="max-w-4xl text-sm leading-6 text-[var(--color-text-secondary)]">
+              <MarkdownRenderer
+                content={agent.description || t('settings.agents.noDescription')}
+              />
+            </div>
+            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-2 text-xs text-[var(--color-text-tertiary)]">
+              <span>
+                {agent.tools?.length
+                  ? t('settings.agents.toolCount', { count: String(agent.tools.length) })
+                  : t('settings.agents.noTools')}
+              </span>
+              {agent.baseDir && <span className="break-all">{agent.baseDir}</span>}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-2">
+            <DetailStat
+              label={t('settings.agents.summary.source')}
+              value={sourceLabel}
+              icon="layers"
+            />
+            <DetailStat
+              label={t('settings.agents.summary.model')}
+              value={agent.modelDisplay || '—'}
+              icon="psychology"
+            />
+            <DetailStat
+              label={t('settings.agents.summary.tools')}
+              value={String(agent.tools?.length ?? 0)}
+              icon="build"
+            />
+            <DetailStat
+              label={t('settings.agents.summary.status')}
+              value={agent.isActive ? t('settings.agents.status.active') : t('settings.agents.status.available')}
+              icon="bolt"
+            />
+          </div>
+        </div>
+      </section>
+
+      {agent.tools && agent.tools.length > 0 && (
+        <section className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] px-5 py-4">
+          <div className="flex items-center gap-2 mb-3">
+            <span className="material-symbols-outlined text-[18px] text-[var(--color-text-tertiary)]">
+              build
+            </span>
+            <h4 className="text-sm font-semibold text-[var(--color-text-primary)]">
+              {t('settings.agents.tools')}
+            </h4>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {agent.tools.map((tool) => (
+              <MetaPill key={tool}>{tool}</MetaPill>
+            ))}
+          </div>
+        </section>
+      )}
+
+      <section className="flex flex-1 min-h-0 min-w-0 overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]">
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex flex-wrap items-center justify-between gap-2 border-b border-[var(--color-border)] bg-[var(--color-surface-container-low)] px-4 py-3">
+            <div className="min-w-0">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="text-xs font-mono text-[var(--color-text-secondary)] break-all">
+                  {agent.baseDir || sourceLabel}
+                </span>
+              </div>
+              <div className="mt-1 text-[11px] text-[var(--color-text-tertiary)]">
+                {t('settings.agents.promptHint')}
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="rounded-full bg-[var(--color-surface)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)] border border-[var(--color-border)]">
+                {t('settings.agents.systemPrompt')}
+              </span>
+            </div>
+          </div>
+
+          <div className="min-h-0 flex-1 overflow-y-auto bg-[var(--color-surface-container-lowest)]">
+            {agent.systemPrompt ? (
+              <div className="px-6 py-5 lg:px-8">
+                <MarkdownRenderer
+                  content={agent.systemPrompt}
+                  variant="document"
+                  className="mx-auto max-w-[72ch]"
+                />
+              </div>
+            ) : (
+              <div className="px-6 py-10 text-center">
+                <span className="material-symbols-outlined text-[32px] text-[var(--color-text-tertiary)] mb-2 block">
+                  article
+                </span>
+                <p className="text-sm text-[var(--color-text-tertiary)]">
+                  {t('settings.agents.noSystemPrompt')}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function getAgentDotColor(color?: string) {
+  return color && AGENT_COLORS[color] ? AGENT_COLORS[color] : 'var(--color-text-tertiary)'
+}
+
+function getAgentSourceIcon(source: AgentSource) {
+  switch (source) {
+    case 'userSettings':
+      return 'person'
+    case 'projectSettings':
+      return 'folder'
+    case 'localSettings':
+      return 'folder_lock'
+    case 'policySettings':
+      return 'shield'
+    case 'plugin':
+      return 'extension'
+    case 'flagSettings':
+      return 'terminal'
+    case 'built-in':
+      return 'inventory_2'
+  }
+}
+
+function getAgentSourceAccentClass(source: AgentSource) {
+  switch (source) {
+    case 'userSettings':
+      return 'bg-[var(--color-primary-fixed)] text-[var(--color-brand)]'
+    case 'projectSettings':
+      return 'bg-[var(--color-success-container)] text-[var(--color-success)]'
+    case 'localSettings':
+      return 'bg-[var(--color-info-container)] text-[var(--color-info)]'
+    case 'policySettings':
+      return 'bg-[var(--color-warning-container)] text-[var(--color-warning)]'
+    case 'plugin':
+      return 'bg-[var(--color-warning-container)] text-[var(--color-warning)]'
+    case 'flagSettings':
+      return 'bg-[var(--color-error)]/10 text-[var(--color-error)]'
+    case 'built-in':
+      return 'bg-[var(--color-surface-container-high)] text-[var(--color-text-tertiary)]'
+  }
+}
+
+function MetaPill({ children }: { children: ReactNode }) {
+  return (
+    <span className="rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--color-text-tertiary)]">
+      {children}
+    </span>
+  )
+}
+
+function SummaryCard({
+  label,
+  value,
+  icon,
+  className = '',
+}: {
+  label: string
+  value: string
+  icon: string
+  className?: string
+}) {
+  return (
+    <div className={`rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3 min-w-0 ${className}`}>
+      <div className="flex items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-[var(--color-text-tertiary)] min-w-0">
+        <span className="material-symbols-outlined text-[14px] flex-shrink-0">{icon}</span>
+        <span className="truncate">{label}</span>
+      </div>
+      <div className="mt-2 text-lg font-semibold text-[var(--color-text-primary)] truncate">
+        {value}
+      </div>
+    </div>
+  )
+}
+
+function DetailStat({
+  label,
+  value,
+  icon,
+}: {
+  label: string
+  value: string
+  icon: string
+}) {
+  return (
+    <div className="rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
+      <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-[var(--color-text-tertiary)]">
+        <span className="material-symbols-outlined text-[14px]">{icon}</span>
+        <span>{label}</span>
+      </div>
+      <div className="mt-2 text-base font-semibold text-[var(--color-text-primary)] break-all">
+        {value}
+      </div>
+    </div>
+  )
+}
+// ─── Skill Settings ──────────────────────────────────────
+
+function SkillSettings() {
+  const selectedSkill = useSkillStore((s) => s.selectedSkill)
+  const t = useTranslation()
+
+  if (selectedSkill) {
+    return (
+      <div className="w-full min-w-0">
+        <SkillDetail />
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full min-w-0">
+      <h2 className="text-base font-semibold text-[var(--color-text-primary)] mb-1">
+        {t('settings.skills.title')}
+      </h2>
+      <p className="text-sm text-[var(--color-text-tertiary)] mb-4">
+        {t('settings.skills.description')}
+      </p>
+      <SkillList />
+    </div>
+  )
+}
+
+// ─── About Settings ──────────────────────────────────────
+
+const GITHUB_REPO = 'https://github.com/NanmiCoder/cc-haha'
+const AUTHOR_GITHUB = 'https://github.com/NanmiCoder'
+const SOCIAL_LINKS = [
+  { name: 'Bilibili', icon: '/icons/bilibili.svg', url: 'https://space.bilibili.com/434377496', label: '程序员阿江-Relakkes' },
+  { name: 'Douyin', icon: '/icons/douyin.svg', url: 'https://www.douyin.com/user/MS4wLjABAAAATJPY7LAlaa5X-c8uNdWkvz0jUGgpw4eeXIwu_8BhvqE', label: '程序员阿江-Relakkes' },
+  { name: 'Xiaohongshu', icon: '/icons/xiaohongshu.svg', url: 'https://www.xiaohongshu.com/user/profile/5f58bd990000000001003753', label: '程序员阿江-Relakkes' },
+] as const
+
+function AboutSettings() {
+  const t = useTranslation()
+  const [version, setVersion] = useState('')
+  const updateStatus = useUpdateStore((s) => s.status)
+  const availableVersion = useUpdateStore((s) => s.availableVersion)
+  const releaseNotes = useUpdateStore((s) => s.releaseNotes)
+  const progressPercent = useUpdateStore((s) => s.progressPercent)
+  const error = useUpdateStore((s) => s.error)
+  const checkedAt = useUpdateStore((s) => s.checkedAt)
+  const checkForUpdates = useUpdateStore((s) => s.checkForUpdates)
+  const installUpdate = useUpdateStore((s) => s.installUpdate)
+  const initialize = useUpdateStore((s) => s.initialize)
+
+  useEffect(() => {
+    import('@tauri-apps/api/app').then((mod) => mod.getVersion()).then(setVersion).catch(() => setVersion('0.1.0'))
+  }, [])
+
+  useEffect(() => {
+    void initialize()
+  }, [initialize])
+
+  const openUrl = (url: string) => {
+    import('@tauri-apps/plugin-shell').then((mod) => mod.open(url)).catch(() => window.open(url, '_blank'))
+  }
+
+  const checkedAtText =
+    checkedAt
+      ? new Date(checkedAt).toLocaleString(undefined, {
+          hour: '2-digit',
+          minute: '2-digit',
+          month: 'short',
+          day: 'numeric',
+        })
+      : null
+
+  const updateDescription =
+    updateStatus === 'checking'
+      ? t('update.checking')
+      : updateStatus === 'downloading'
+        ? t('update.progress', { progress: String(progressPercent) })
+        : updateStatus === 'restarting'
+          ? t('update.restarting')
+          : updateStatus === 'available' && availableVersion
+            ? t('update.newVersion', { version: availableVersion })
+            : updateStatus === 'up-to-date'
+              ? t('update.upToDate', { version: version || t('update.currentVersionUnknown') })
+              : error
+                ? t('update.failed', { error })
+                : t('update.idle')
+
+  return (
+    <div className="w-full min-w-0 max-w-lg mx-auto flex flex-col items-center py-6">
+      {/* Logo + App Name + Version */}
+      <img src="/app-icon.jpg" alt="Claude Code Haha" className="w-20 h-20 rounded-2xl shadow-md mb-4" />
+      <h1 className="text-xl font-bold text-[var(--color-text-primary)]">Claude Code Haha</h1>
+      {version && (
+        <span className="text-xs text-[var(--color-text-tertiary)] mt-1">{t('settings.about.version')} {version}</span>
+      )}
+
+      {/* GitHub Repo */}
+      <div className="mt-6 w-full">
+        <button
+          onClick={() => openUrl(GITHUB_REPO)}
+          className="w-full flex items-center gap-3 px-4 py-3 rounded-xl border border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
+        >
+          <img src="/icons/github.svg" alt="GitHub" className="w-5 h-5 opacity-70" />
+          <div className="flex-1 text-left">
+            <div className="text-sm font-medium text-[var(--color-text-primary)]">NanmiCoder/cc-haha</div>
+            <div className="text-xs text-[var(--color-text-tertiary)]">{t('settings.about.starHint')}</div>
+          </div>
+          <span className="material-symbols-outlined text-[16px] text-[var(--color-text-tertiary)]">open_in_new</span>
+        </button>
+      </div>
+
+      <div className="mt-4 w-full rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-container-low)] p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <div className="text-sm font-medium text-[var(--color-text-primary)]">{t('settings.about.updates')}</div>
+            <div className="text-xs text-[var(--color-text-tertiary)] mt-1">
+              {t('settings.about.updatesDesc')}
+            </div>
+          </div>
+          <Button
+            size="sm"
+            variant="secondary"
+            onClick={() => void checkForUpdates()}
+            loading={updateStatus === 'checking'}
+          >
+            {t('update.checkNow')}
+          </Button>
+        </div>
+
+        <div className="mt-4 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-3">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <div className="text-xs uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
+                {t('settings.about.version')}
+              </div>
+              <div className="text-sm font-medium text-[var(--color-text-primary)] mt-1">
+                {version || t('update.currentVersionUnknown')}
+              </div>
+            </div>
+
+            {availableVersion && (
+              <div className="text-right">
+                <div className="text-xs uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
+                  {t('update.availableLabel')}
+                </div>
+                <div className="text-sm font-medium text-[var(--color-text-primary)] mt-1">
+                  {availableVersion}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <p className={`mt-3 text-sm ${error ? 'text-[var(--color-error)]' : 'text-[var(--color-text-secondary)]'}`}>
+            {updateDescription}
+          </p>
+
+          {checkedAtText && (
+            <p className="mt-1 text-xs text-[var(--color-text-tertiary)]">
+              {t('update.checkedAt', { time: checkedAtText })}
+            </p>
+          )}
+
+          {(updateStatus === 'downloading' || updateStatus === 'restarting') && (
+            <div className="mt-3">
+              <div className="h-1.5 bg-[var(--color-surface-container-low)] rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-[var(--color-text-accent)] transition-all duration-300"
+                  style={{ width: `${Math.min(progressPercent, 100)}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          {releaseNotes && availableVersion && (
+            <div className="mt-3 rounded-lg bg-[var(--color-surface-container-low)] px-3 py-2">
+              <div className="text-[11px] uppercase tracking-[0.14em] text-[var(--color-text-tertiary)]">
+                {t('update.releaseNotes')}
+              </div>
+              <p className="mt-1 text-xs leading-5 text-[var(--color-text-secondary)] whitespace-pre-wrap">
+                {releaseNotes}
+              </p>
+            </div>
+          )}
+
+          {availableVersion && (
+            <div className="mt-3 flex justify-end">
+              <Button
+                size="sm"
+                onClick={() => void installUpdate()}
+                loading={updateStatus === 'downloading' || updateStatus === 'restarting'}
+                disabled={updateStatus === 'checking'}
+              >
+                {updateStatus === 'restarting' ? t('update.restarting') : t('update.now')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="w-full border-t border-[var(--color-border)]/40 my-6" />
+
+      {/* Author */}
+      <div className="w-full">
+        <h3 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">{t('settings.about.author')}</h3>
+        <button
+          onClick={() => openUrl(AUTHOR_GITHUB)}
+          className="w-full flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
+        >
+          <img src="/icons/github.svg" alt="GitHub" className="w-4 h-4 opacity-60" />
+          <span className="text-sm text-[var(--color-text-primary)]">程序员阿江-Relakkes</span>
+          <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">GitHub</span>
+        </button>
+      </div>
+
+      {/* Social Media */}
+      <div className="w-full mt-4">
+        <h3 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-3">{t('settings.about.socialMedia')}</h3>
+        <div className="flex flex-col gap-0.5">
+          {SOCIAL_LINKS.map((link) => (
+            <button
+              key={link.name}
+              onClick={() => openUrl(link.url)}
+              className="w-full flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
+            >
+              <img src={link.icon} alt={link.name} className="w-4 h-4 opacity-60" />
+              <span className="text-sm text-[var(--color-text-primary)]">{link.label}</span>
+              <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">{link.name}</span>
+            </button>
+          ))}
+          <button
+            onClick={() => openUrl('mailto:relakkes@gmail.com')}
+            className="w-full flex items-center gap-3 px-4 py-2.5 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer"
+          >
+            <span className="material-symbols-outlined text-[16px] opacity-60">mail</span>
+            <span className="text-sm text-[var(--color-text-primary)]">relakkes@gmail.com</span>
+            <span className="text-xs text-[var(--color-text-tertiary)] ml-auto">Email</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}