Settings.tsx

import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
import { ArrowLeft, Check, X, Eye, EyeOff, Star, RefreshCw, Download, RotateCw, GitPullRequest, DownloadCloud, Keyboard, RotateCcw, Terminal as TerminalIcon, Palette, BookOpen, Code2, GitBranch, Plus, Trash2, LifeBuoy, Bug, Lightbulb, FlaskConical, Copy, CopyCheck, ExternalLink, CalendarDays, FileText, FolderOpen } from 'lucide-react'
import { openReportIssue } from './ReportIssueScreen'
import { HARNESS_ISSUES_URL, HARNESS_RELEASES_URL, harnessReleaseNotesUrl } from '../../shared/constants'
import { useSettings, useUpdater, useRepoConfigs, useHooks } from '../store'
import { useBackend } from '../backend'
import type { UpdaterStatus, MergeStrategy, RepoConfig } from '../types'
import { DEFAULT_HOTKEYS, ACTION_LABELS, bindingToString, eventToBinding, resolveHotkeys, type Action, type HotkeyBinding } from '../hotkeys'
import { Tooltip } from './Tooltip'
import { AGENT_REGISTRY, agentDisplayName, CLAUDE_MODELS, CODEX_MODELS } from '../../shared/agent-registry'
import { AgentIcon } from './AgentIcon'
import { InterfaceToggle } from './InterfaceToggle'
import { BUILT_IN_THEMES_BY_MODE, type ThemeOption } from '../themes'
import { SEMANTIC_KEYS } from '../theme-apply'
import type { CustomTheme } from '../../shared/state/settings'
import { QRCodeSVG } from 'qrcode.react'

interface SettingsProps {
  onClose: () => void
  onOpenGuide: () => void
  onOpenMyWeek: () => void
  initialSection?: SectionId
}

type SectionId = 'appearance' | 'agent' | 'worktrees' | 'editor' | 'github' | 'hotkeys' | 'updates' | 'support' | 'experimental'
type SubSectionId = 'agent-general' | 'agent-claude' | 'agent-codex'

interface SubSection {
  id: SubSectionId
  label: string
}

interface Section {
  id: SectionId
  label: string
  icon: React.ComponentType<{ size?: number; className?: string }>
  children?: SubSection[]
}

const SECTIONS: Section[] = [
  { id: 'appearance', label: 'Appearance', icon: Palette },
  { id: 'agent', label: 'Agent', icon: TerminalIcon, children: [
    { id: 'agent-general', label: 'General' },
    { id: 'agent-claude', label: 'Claude' },
    { id: 'agent-codex', label: 'Codex' }
  ]},
  { id: 'worktrees', label: 'Worktrees', icon: GitBranch },
  { id: 'editor', label: 'Editor', icon: Code2 },
  { id: 'github', label: 'GitHub', icon: GitPullRequest },
  { id: 'hotkeys', label: 'Hotkeys', icon: Keyboard },
  { id: 'updates', label: 'Updates', icon: DownloadCloud },
  { id: 'support', label: 'Support', icon: LifeBuoy },
  { id: 'experimental', label: 'Experimental', icon: FlaskConical }
]

export function Settings({ onClose, onOpenGuide, onOpenMyWeek, initialSection }: SettingsProps): JSX.Element {
  const backend = useBackend()
  const [activeSection, setActiveSection] = useState<SectionId>(initialSection ?? 'appearance')
  const [activeSubSection, setActiveSubSection] = useState<SubSectionId | null>(null)
  const scrollRef = useRef<HTMLDivElement>(null)
  const sectionRefs = useRef<Record<SectionId, HTMLElement | null>>({
    appearance: null,
    agent: null,
    worktrees: null,
    editor: null,
    github: null,
    hotkeys: null,
    updates: null,
    support: null,
    experimental: null
  })
  const subSectionRefs = useRef<Record<SubSectionId, HTMLElement | null>>({
    'agent-general': null,
    'agent-claude': null,
    'agent-codex': null
  })
  const isProgrammaticScroll = useRef(false)

  const scrollToSection = useCallback((id: SectionId) => {
    setActiveSection(id)
    const section = SECTIONS.find((s) => s.id === id)
    setActiveSubSection(section?.children?.[0]?.id ?? null)
    isProgrammaticScroll.current = true
    const el = sectionRefs.current[id]
    if (el && scrollRef.current) {
      scrollRef.current.scrollTo({ top: el.offsetTop - 24, behavior: 'smooth' })
    }
  }, [])

  const scrollToSubSection = useCallback((id: SubSectionId) => {
    setActiveSubSection(id)
    isProgrammaticScroll.current = true
    const el = subSectionRefs.current[id]
    if (el && scrollRef.current) {
      scrollRef.current.scrollTo({ top: el.offsetTop - 24, behavior: 'smooth' })
    }
  }, [])

  // Honor `initialSection` once the section refs are wired up.
  useEffect(() => {
    if (!initialSection) return
    const el = sectionRefs.current[initialSection]
    if (el && scrollRef.current) {
      scrollRef.current.scrollTo({ top: el.offsetTop - 24 })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    const container = scrollRef.current
    if (!container) return

    const onScrollEnd = (): void => { isProgrammaticScroll.current = false }

    const onScroll = (): void => {
      if (isProgrammaticScroll.current) return
      const scrollTop = container.scrollTop
      let current: SectionId = 'appearance'
      for (const section of SECTIONS) {
        const el = sectionRefs.current[section.id]
        if (el && el.offsetTop - 48 <= scrollTop) {
          current = section.id
        }
      }
      setActiveSection(current)

      const currentSection = SECTIONS.find((s) => s.id === current)
      if (currentSection?.children) {
        let currentSub: SubSectionId | null = currentSection.children[0].id
        for (const child of currentSection.children) {
          const el = subSectionRefs.current[child.id]
          if (el && el.offsetTop - 48 <= scrollTop) {
            currentSub = child.id
          }
        }
        setActiveSubSection(currentSub)
      } else {
        setActiveSubSection(null)
      }
    }

    container.addEventListener('scroll', onScroll)
    container.addEventListener('scrollend', onScrollEnd)
    return () => {
      container.removeEventListener('scroll', onScroll)
      container.removeEventListener('scrollend', onScrollEnd)
    }
  }, [])

  // GitHub state
  const [token, setToken] = useState('')
  const [showToken, setShowToken] = useState(false)
  const [saving, setSaving] = useState(false)
  const [tokenResult, setTokenResult] = useState<{ ok: boolean; message: string } | null>(null)
  const [showPatForm, setShowPatForm] = useState(false)

  // Updates state — updaterStatus lives in the main-process store
  const [version, setVersion] = useState<string>('')
  const updaterStatus = useUpdater().status
  const [checking, setChecking] = useState(false)

  // All long-lived settings live in the main-process store; this hook
  // re-renders Settings whenever any client updates any of them.
  const settings = useSettings()
  const {
    themeMode,
    themeLight,
    themeDark,
    customThemes,
    hotkeys: hotkeyOverrides,
    defaultAgent,
    claudeCommand,
    codexCommand,
    harnessMcpEnabled,
    claudeEnvVars,
    codexEnvVars,
    nameClaudeSessions,
    claudeModel,
    codexModel,
    terminalFontFamily,
    terminalFontSize,
    editor: editorId,
    worktreeBase,
    mergeStrategy,
    hasGithubToken: settingsHasToken,
    githubAuthSource: authSource,
    harnessStarred,
    worktreeScripts,
    shareClaudeSettings,
    autoUpdateEnabled,
    harnessSystemPromptEnabled,
    harnessSystemPrompt,
    harnessSystemPromptMain,
    prReviewPrompt,
    claudeTuiFullscreen,
    browserToolsEnabled,
    browserToolsMode,
    wsTransportEnabled,
    wsTransportPort,
    wsTransportHost,
    defaultClaudeTabType,
    jsonModeChatDensity,
    jsonModeSendOnEnter,
    jsonModeDefaultPermissionMode,
    autoSleepMinutes,
    autoApprovePermissions,
    autoApproveSteerInstructions,
    snoozeDefaultDays,
    expandedDiagnosticLoggingEnabled
  } = settings
  const setupScript = worktreeScripts.setup
  const teardownScript = worktreeScripts.teardown

  const [rebindingAction, setRebindingAction] = useState<Action | null>(null)
  const [defaultClaudeCommand, setDefaultClaudeCommand] = useState<string>('')
  const [claudeSaveResult, setClaudeSaveResult] = useState<{ ok: boolean; message: string } | null>(null)
  // Alias settings.hasGithubToken to the legacy local name so existing JSX
  // stays unchanged.
  const hasToken = settingsHasToken

  // Claude env var state. Stored as an ordered list of [key, value] pairs so
  // the user can edit a blank row without it collapsing in a Record. Seeded
  // from settings on mount; edits live locally until "Save" dispatches through
  // the setter IPC.
  const [claudeEnvRows, setClaudeEnvRows] = useState<{ key: string; value: string }[]>(() =>
    Object.entries(claudeEnvVars).map(([key, value]) => ({ key, value }))
  )
  const [envSaveResult, setEnvSaveResult] = useState<{ ok: boolean; message: string } | null>(null)
  const [revealedEnvRows, setRevealedEnvRows] = useState<Set<number>>(new Set())

  // Custom Claude endpoint helper — drafts for ANTHROPIC_BASE_URL/_AUTH_TOKEN.
  // Saves by patching claudeEnvRows + persisting via setClaudeEnvVars, so the
  // env-vars editor below shares one source of truth with this helper.
  const [litellmBaseUrl, setLitellmBaseUrl] = useState<string>(
    () => claudeEnvVars['ANTHROPIC_BASE_URL'] ?? ''
  )
  const [litellmAuthToken, setLitellmAuthToken] = useState<string>(
    () => claudeEnvVars['ANTHROPIC_AUTH_TOKEN'] ?? ''
  )
  const [litellmAuthRevealed, setLitellmAuthRevealed] = useState(false)
  const [litellmSaveResult, setLitellmSaveResult] = useState<{ ok: boolean; message: string } | null>(null)

  const [codexCommandDraft, setCodexCommandDraft] = useState<string>(codexCommand)
  useEffect(() => { setCodexCommandDraft(codexCommand) }, [codexCommand])
  const [codexSaveResult, setCodexSaveResult] = useState<{ ok: boolean; message: string } | null>(null)
  const [codexEnvRows, setCodexEnvRows] = useState<{ key: string; value: string }[]>(() =>
    Object.entries(codexEnvVars).map(([key, value]) => ({ key, value }))
  )
  const [codexEnvSaveResult, setCodexEnvSaveResult] = useState<{ ok: boolean; message: string } | null>(null)
  const [codexRevealedEnvRows, setCodexRevealedEnvRows] = useState<Set<number>>(new Set())

  const [systemPromptDraft, setSystemPromptDraft] = useState<string>(harnessSystemPrompt)
  useEffect(() => { setSystemPromptDraft(harnessSystemPrompt) }, [harnessSystemPrompt])
  const [systemPromptMainDraft, setSystemPromptMainDraft] = useState<string>(harnessSystemPromptMain)
  useEffect(() => { setSystemPromptMainDraft(harnessSystemPromptMain) }, [harnessSystemPromptMain])
  const [systemPromptSaveResult, setSystemPromptSaveResult] = useState<{ ok: boolean; message: string } | null>(null)

  const [prReviewPromptDraft, setPrReviewPromptDraft] = useState<string>(prReviewPrompt)
  useEffect(() => { setPrReviewPromptDraft(prReviewPrompt) }, [prReviewPrompt])
  const [prReviewPromptSaveResult, setPrReviewPromptSaveResult] = useState<{ ok: boolean; message: string } | null>(null)

  const [defaultTerminalFontFamily, setDefaultTerminalFontFamily] = useState<string>('')
  const [availableEditors, setAvailableEditors] = useState<{ id: string; name: string }[]>([])
  const [scriptsSaveResult, setScriptsSaveResult] = useState<{ ok: boolean; message: string } | null>(null)

  // Per-repo scope state for scopable worktree settings. scopeRepoRoot === null
  // means the controls bind to global config; otherwise they bind to the
  // repo-scoped .harness.json at that repoRoot. The configs map itself
  // lives in the main-process store.
  const repoConfigs = useRepoConfigs()
  const repoList = useMemo(() => Object.keys(repoConfigs), [repoConfigs])
  const [scopeRepoRoot, setScopeRepoRoot] = useState<string | null>(null)

  // Hooks consent — drives the copy in the "Status hooks" card below.
  const { consent: hooksConsent } = useHooks()

  // WS transport: wsInfo reflects the live server (null when off or not
  // yet started after enabling — the server only binds at app launch).
  const [wsInfo, setWsInfo] = useState<{ port: number; token: string; host: string } | null>(null)
  const [showWsToken, setShowWsToken] = useState(false)
  const [wsUrlCopied, setWsUrlCopied] = useState(false)
  // True after the user rotates the token in this session. The running
  // servers still use the old token until the app relaunches, so we
  // surface a relaunch hint — same pattern as changing port/host.
  const [wsTokenRotated, setWsTokenRotated] = useState(false)
  const [wsPortDraft, setWsPortDraft] = useState<string>(String(wsTransportPort))
  useEffect(() => { setWsPortDraft(String(wsTransportPort)) }, [wsTransportPort])

  // LAN addresses for QR-code / scannable URL generation. A machine can
  // have several (WiFi + ethernet + VPN), so we surface a picker when
  // more than one is present and default to the first.
  const [lanAddresses, setLanAddresses] = useState<Array<{ iface: string; address: string }>>([])
  const [selectedLanAddress, setSelectedLanAddress] = useState<string | null>(null)

  const [debugLogError, setDebugLogError] = useState<string | null>(null)

  // Constants and non-settings state load once; live settings are already
  // hydrated via useSettings() above.
  useEffect(() => {
    void backend.getVersion().then(setVersion).catch(() => setVersion(''))
    backend.getDefaultClaudeCommand().then(setDefaultClaudeCommand)
    backend.getDefaultTerminalFontFamily().then(setDefaultTerminalFontFamily)
    backend.getAvailableEditors().then(setAvailableEditors)
    backend.getWsTransportInfo().then(setWsInfo)
    backend.getLanAddresses().then((addrs) => {
      setLanAddresses(addrs)
      if (addrs.length > 0) setSelectedLanAddress(addrs[0].address)
    })
  }, [])

  useEffect(() => {
    backend.getWsTransportInfo().then(setWsInfo)
  }, [wsTransportEnabled])

  // Whenever claudeEnvVars in the store changes (e.g. another window saved),
  // re-seed the local editable rows. Local edits between loads are lost —
  // same as before the migration, where Settings only read on mount.
  useEffect(() => {
    setClaudeEnvRows(Object.entries(claudeEnvVars).map(([key, value]) => ({ key, value })))
    setLitellmBaseUrl(claudeEnvVars['ANTHROPIC_BASE_URL'] ?? '')
    setLitellmAuthToken(claudeEnvVars['ANTHROPIC_AUTH_TOKEN'] ?? '')
  }, [claudeEnvVars])

  const updateRepoConfig = useCallback(
    async (repoRoot: string, patch: Record<string, unknown>) => {
      // Main dispatches repoConfigs/changed after saveRepoConfig commits;
      // useRepoConfigs() re-renders us automatically.
      await backend.setRepoConfig(repoRoot, patch)
    },
    []
  )

  const repoBasename = useCallback((repoRoot: string): string => {
    const parts = repoRoot.split('/').filter(Boolean)
    return parts[parts.length - 1] || repoRoot
  }, [])

  const [setupDraft, setSetupDraft] = useState<string>('')
  const [teardownDraft, setTeardownDraft] = useState<string>('')

  // Editable draft for the Claude command input. Hydrated from the store and
  // re-synced whenever the store value changes (e.g. another window edited it).
  // The `Save` button commits the draft via the setter IPC.
  const [claudeCommandDraft, setClaudeCommandDraft] = useState<string>(claudeCommand)
  useEffect(() => {
    setClaudeCommandDraft(claudeCommand)
  }, [claudeCommand])

  const handleSelectThemeMode = useCallback((mode: 'light' | 'dark' | 'system') => {
    void backend.setThemeMode(mode)
  }, [backend])

  const handleSelectLightTheme = useCallback((id: string) => {
    void backend.setThemeLight(id)
  }, [backend])

  const handleSelectDarkTheme = useCallback((id: string) => {
    void backend.setThemeDark(id)
  }, [backend])

  const handleTerminalFontFamilyChange = useCallback((value: string) => {
    void backend.setTerminalFontFamily(value)
  }, [])

  const handleResetTerminalFontFamily = useCallback(() => {
    void backend.setTerminalFontFamily(defaultTerminalFontFamily)
  }, [defaultTerminalFontFamily])

  const handleTerminalFontSizeChange = useCallback((value: number) => {
    if (!Number.isFinite(value)) return
    const clamped = Math.max(8, Math.min(48, Math.round(value)))
    void backend.setTerminalFontSize(clamped)
  }, [])

  const [autoSleepDraft, setAutoSleepDraft] = useState<string>(
    String(autoSleepMinutes)
  )
  useEffect(() => {
    setAutoSleepDraft(String(autoSleepMinutes))
  }, [autoSleepMinutes])
  const commitAutoSleepMinutes = useCallback(() => {
    const n = Number(autoSleepDraft)
    if (!Number.isFinite(n) || n < 0) {
      setAutoSleepDraft(String(autoSleepMinutes))
      return
    }
    const clamped = Math.max(0, Math.min(24 * 60, Math.floor(n)))
    if (clamped !== autoSleepMinutes) {
      void backend.setAutoSleepMinutes(clamped)
    } else {
      setAutoSleepDraft(String(clamped))
    }
  }, [autoSleepDraft, autoSleepMinutes])

  const handleSelectEditor = useCallback(async (id: string) => {
    await backend.setEditor(id)
  }, [])

  const handleSelectWorktreeBase = useCallback(async (mode: 'remote' | 'local') => {
    await backend.setWorktreeBase(mode)
  }, [])

  const handleSelectMergeStrategy = useCallback(
    async (strategy: MergeStrategy) => {
      if (scopeRepoRoot) {
        await updateRepoConfig(scopeRepoRoot, { mergeStrategy: strategy })
      } else {
        await backend.setMergeStrategy(strategy)
      }
    },
    [scopeRepoRoot, updateRepoConfig]
  )

  // Resolve what each control should display for the active scope.
  const scopedRepoCfg = scopeRepoRoot ? repoConfigs[scopeRepoRoot] || {} : null
  const displayedMergeStrategy: MergeStrategy = scopedRepoCfg
    ? (scopedRepoCfg.mergeStrategy || mergeStrategy)
    : mergeStrategy
  const scopedMergeStrategyIsOverride = !!(scopedRepoCfg && scopedRepoCfg.mergeStrategy)
  const displayedSetupScript = scopedRepoCfg
    ? (scopedRepoCfg.setupCommand ?? '')
    : setupScript
  const displayedTeardownScript = scopedRepoCfg
    ? (scopedRepoCfg.teardownCommand ?? '')
    : teardownScript
  const scopedSetupIsOverride = !!(scopedRepoCfg && scopedRepoCfg.setupCommand)
  const scopedTeardownIsOverride = !!(scopedRepoCfg && scopedRepoCfg.teardownCommand)

  // Reset the scoped script drafts whenever the active scope (or persisted
  // value for that scope) changes, so the textareas show what's on disk.
  useEffect(() => {
    setSetupDraft(displayedSetupScript)
    setTeardownDraft(displayedTeardownScript)
  }, [scopeRepoRoot, displayedSetupScript, displayedTeardownScript])

  const handleSaveWorktreeScripts = useCallback(async () => {
    if (scopeRepoRoot) {
      await updateRepoConfig(scopeRepoRoot, {
        setupCommand: setupDraft.trim() || null,
        teardownCommand: teardownDraft.trim() || null
      })
    } else {
      await backend.setWorktreeScripts({ setup: setupDraft, teardown: teardownDraft })
    }
    setScriptsSaveResult({ ok: true, message: 'Saved' })
    setTimeout(() => setScriptsSaveResult(null), 2000)
  }, [scopeRepoRoot, setupDraft, teardownDraft, updateRepoConfig])

  const handleResetSetupToGlobal = useCallback(async () => {
    if (!scopeRepoRoot) return
    await updateRepoConfig(scopeRepoRoot, { setupCommand: null })
    setSetupDraft('')
  }, [scopeRepoRoot, updateRepoConfig])

  const handleResetTeardownToGlobal = useCallback(async () => {
    if (!scopeRepoRoot) return
    await updateRepoConfig(scopeRepoRoot, { teardownCommand: null })
    setTeardownDraft('')
  }, [scopeRepoRoot, updateRepoConfig])

  const handleResetMergeStrategyToGlobal = useCallback(async () => {
    if (!scopeRepoRoot) return
    await updateRepoConfig(scopeRepoRoot, { mergeStrategy: null })
  }, [scopeRepoRoot, updateRepoConfig])

  // Repos that override a given key — used to decorate global-scope controls
  // with a "Overridden in N repo(s)" badge.
  const reposOverridingKey = useCallback(
    (key: keyof RepoConfig): string[] => {
      return repoList.filter((r) => {
        const cfg = repoConfigs[r]
        if (!cfg) return false
        const v = cfg[key]
        return typeof v === 'string' ? v.length > 0 : v != null
      })
    },
    [repoList, repoConfigs]
  )

  const handleSave = useCallback(async () => {
    setSaving(true)
    setTokenResult(null)
    try {
      const res = await backend.setGithubToken(token)
      if (res.ok) {
        const message = res.username ? `Connected as @${res.username}` : 'Token saved'
        setTokenResult({ ok: true, message })
        setToken('')
      } else {
        setTokenResult({ ok: false, message: `Invalid token: ${res.error || 'unknown error'}` })
      }
    } finally {
      setSaving(false)
    }
  }, [token])

  const handleClear = useCallback(async () => {
    await backend.clearGithubToken()
    setTokenResult({ ok: true, message: 'Token removed' })
  }, [])

  const handleCheckForUpdates = useCallback(async () => {
    setChecking(true)
    try {
      // Main dispatches the resulting updater/statusChanged event itself —
      // we just await the call so we know when to clear the spinner.
      await backend.checkForUpdates()
    } finally {
      setChecking(false)
    }
  }, [])

  const handleRestart = useCallback(() => {
    backend.quitAndInstall()
  }, [])

  // Capture a key press while rebinding
  useEffect(() => {
    if (!rebindingAction) return

    const handler = (e: KeyboardEvent): void => {
      e.preventDefault()
      e.stopPropagation()

      if (e.key === 'Escape') {
        setRebindingAction(null)
        return
      }

      const binding = eventToBinding(e)
      if (!binding) return // ignore pure modifier presses

      const shortcut = bindingToString(binding)
      const next = { ...(hotkeyOverrides || {}), [rebindingAction]: shortcut }
      void backend.setHotkeyOverrides(next)
      setRebindingAction(null)
    }

    window.addEventListener('keydown', handler, true)
    return () => window.removeEventListener('keydown', handler, true)
  }, [rebindingAction, hotkeyOverrides])

  useEffect(() => {
    const handler = (e: KeyboardEvent): void => {
      if (e.key !== 'Escape') return
      if (e.defaultPrevented) return
      onClose()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [onClose])

  const resolvedHotkeys = resolveHotkeys(hotkeyOverrides || undefined)

  const handleResetHotkey = useCallback(async (action: Action) => {
    const next = { ...(hotkeyOverrides || {}) }
    delete next[action]
    await backend.setHotkeyOverrides(next)
  }, [hotkeyOverrides])

  const handleResetAllHotkeys = useCallback(async () => {
    await backend.resetHotkeyOverrides()
  }, [])

  const handleSaveClaudeCommand = useCallback(async () => {
    setClaudeSaveResult(null)
    await backend.setClaudeCommand(claudeCommandDraft)
    setClaudeSaveResult({ ok: true, message: 'Saved · new tabs will use this command' })
  }, [claudeCommandDraft])

  const handleToggleHarnessMcp = useCallback(async (enabled: boolean) => {
    await backend.setHarnessMcpEnabled(enabled)
  }, [])

  const handleToggleAutoApprovePermissions = useCallback(async (enabled: boolean) => {
    await backend.setAutoApprovePermissions(enabled)
  }, [])

  const [autoApproveSteerDraft, setAutoApproveSteerDraft] = useState<string>(autoApproveSteerInstructions)
  useEffect(() => {
    setAutoApproveSteerDraft(autoApproveSteerInstructions)
  }, [autoApproveSteerInstructions])
  const [autoApproveSteerSaveResult, setAutoApproveSteerSaveResult] = useState<
    { ok: boolean; message: string } | null
  >(null)
  const handleSaveAutoApproveSteer = useCallback(async () => {
    setAutoApproveSteerSaveResult(null)
    await backend.setAutoApproveSteerInstructions(autoApproveSteerDraft)
    setAutoApproveSteerSaveResult({ ok: true, message: 'Saved · used on next auto-review' })
  }, [autoApproveSteerDraft])

  const handleToggleAutoUpdate = useCallback(async (enabled: boolean) => {
    await backend.setAutoUpdateEnabled(enabled)
  }, [])

  const handleToggleWsTransport = useCallback(async (enabled: boolean) => {
    await backend.setWsTransportEnabled(enabled)
  }, [])

  const handleSaveWsPort = useCallback(async () => {
    const parsed = Number.parseInt(wsPortDraft, 10)
    if (!Number.isFinite(parsed)) return
    await backend.setWsTransportPort(parsed)
  }, [wsPortDraft])

  const handleSelectWsHost = useCallback(async (host: string) => {
    await backend.setWsTransportHost(host)
  }, [])

  // Build the display URL from the live server when it's running; fall back
  // to the configured host/port (with a blank token) so the user can see
  // roughly what the URL *will* be after restart.
  const effectiveWsHost = wsInfo?.host ?? wsTransportHost
  const effectiveWsPort = wsInfo?.port ?? wsTransportPort
  const effectiveWsToken = wsInfo?.token ?? ''
  const wsUrl = `http://${effectiveWsHost}:${effectiveWsPort}/?token=${effectiveWsToken}`
  const wsUrlMasked = `http://${effectiveWsHost}:${effectiveWsPort}/?token=${'•'.repeat(8)}`

  // URL aimed at a phone/other device: substitutes the machine's actual
  // LAN IP for 0.0.0.0 so scanning the QR actually resolves. Only usable
  // once the server is running (needs the real token).
  const scannableLanUrl = selectedLanAddress && wsInfo
    ? `http://${selectedLanAddress}:${wsInfo.port}/?token=${wsInfo.token}`
    : null

  const handleCopyWsUrl = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(wsUrl)
      setWsUrlCopied(true)
      setTimeout(() => setWsUrlCopied(false), 1500)
    } catch {
      // clipboard writes can reject when the window isn't focused
    }
  }, [wsUrl])

  const handleOpenWsUrl = useCallback(() => {
    backend.openExternal(wsUrl)
  }, [wsUrl])

  // The WS server is only constructed at app launch, so any divergence
  // between config and the live wsInfo surfaces as "relaunch required".
  const wsNeedsRestart = ((): string | null => {
    if (wsTransportEnabled && !wsInfo) return 'Quit and relaunch Harness to start the server.'
    if (!wsTransportEnabled && wsInfo) return 'Server is still running — quit and relaunch Harness to stop it.'
    if (wsInfo && wsTransportEnabled) {
      if (wsInfo.port !== wsTransportPort) return `Quit and relaunch Harness to switch to port ${wsTransportPort}.`
      if (wsInfo.host !== wsTransportHost) return 'Quit and relaunch Harness to rebind the server.'
      if (wsTokenRotated) return 'Token rotated — quit and relaunch Harness. Any pinned/bookmarked URLs will need to be replaced.'
    }
    return null
  })()

  const handleRotateWsToken = useCallback(async () => {
    const ok = window.confirm(
      'Rotate the web-client auth token?\n\nAll existing URLs — bookmarks, home-screen pins, open browser tabs — will stop working after you quit and relaunch Harness. You will need to re-share the new URL with any device you want to reconnect.'
    )
    if (!ok) return
    await backend.rotateWsToken()
    setWsTokenRotated(true)
  }, [])

  const handleSaveSystemPrompt = useCallback(async () => {
    await backend.setHarnessSystemPrompt(systemPromptDraft)
    await backend.setHarnessSystemPromptMain(systemPromptMainDraft)
    setSystemPromptSaveResult({ ok: true, message: 'Saved · new sessions will use this prompt' })
    setTimeout(() => setSystemPromptSaveResult(null), 2000)
  }, [systemPromptDraft, systemPromptMainDraft])

  const handleResetSystemPrompt = useCallback(async () => {
    await backend.setHarnessSystemPrompt('')
    await backend.setHarnessSystemPromptMain('')
    setSystemPromptSaveResult({ ok: true, message: 'Reset to defaults' })
    setTimeout(() => setSystemPromptSaveResult(null), 2000)
  }, [])

  const handleSavePrReviewPrompt = useCallback(async () => {
    await backend.setPrReviewPrompt(prReviewPromptDraft)
    setPrReviewPromptSaveResult({ ok: true, message: 'Saved' })
    setTimeout(() => setPrReviewPromptSaveResult(null), 2000)
  }, [prReviewPromptDraft])

  const handleResetPrReviewPrompt = useCallback(async () => {
    await backend.setPrReviewPrompt('')
    setPrReviewPromptSaveResult({ ok: true, message: 'Reset to default' })
    setTimeout(() => setPrReviewPromptSaveResult(null), 2000)
  }, [])

  const effectiveClaudeCommand = claudeCommandDraft.trim() || defaultClaudeCommand
  const modelPart = claudeModel && !effectiveClaudeCommand.includes('--model') ? ` --model ${claudeModel}` : ''
  const mcpPart = harnessMcpEnabled ? ' --mcp-config <per-session>' : ''
  const previewInner = `${effectiveClaudeCommand}${modelPart}${mcpPart} --session-id <uuid>`
  const commandPreview = `<shell> -ilc "${previewInner}"`

  const handleResetClaudeCommand = useCallback(async () => {
    setClaudeCommandDraft(defaultClaudeCommand)
    await backend.setClaudeCommand(defaultClaudeCommand)
    setClaudeSaveResult({ ok: true, message: 'Reset to default' })
  }, [defaultClaudeCommand])

  const handleAddEnvRow = useCallback(() => {
    setClaudeEnvRows((prev) => [...prev, { key: '', value: '' }])
    setEnvSaveResult(null)
  }, [])

  const handleRemoveEnvRow = useCallback((index: number) => {
    setClaudeEnvRows((prev) => prev.filter((_, i) => i !== index))
    setRevealedEnvRows((prev) => {
      const next = new Set<number>()
      prev.forEach((i) => { if (i < index) next.add(i); else if (i > index) next.add(i - 1) })
      return next
    })
    setEnvSaveResult(null)
  }, [])

  const handleUpdateEnvRow = useCallback((index: number, field: 'key' | 'value', value: string) => {
    setClaudeEnvRows((prev) => prev.map((row, i) => (i === index ? { ...row, [field]: value } : row)))
    setEnvSaveResult(null)
  }, [])

  const handleToggleRevealEnvRow = useCallback((index: number) => {
    setRevealedEnvRows((prev) => {
      const next = new Set(prev)
      if (next.has(index)) next.delete(index); else next.add(index)
      return next
    })
  }, [])

  const handleSaveClaudeEnvVars = useCallback(async () => {
    const vars: Record<string, string> = {}
    const seen = new Set<string>()
    const invalidNames: string[] = []
    const duplicates: string[] = []
    for (const { key, value } of claudeEnvRows) {
      const k = key.trim()
      if (!k) continue
      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(k)) {
        invalidNames.push(k)
        continue
      }
      if (seen.has(k)) {
        duplicates.push(k)
        continue
      }
      seen.add(k)
      vars[k] = value
    }
    if (invalidNames.length > 0) {
      setEnvSaveResult({ ok: false, message: `Invalid name(s): ${invalidNames.join(', ')}` })
      return
    }
    if (duplicates.length > 0) {
      setEnvSaveResult({ ok: false, message: `Duplicate name(s): ${duplicates.join(', ')}` })
      return
    }
    await backend.setClaudeEnvVars(vars)
    setEnvSaveResult({ ok: true, message: 'Saved · new Claude tabs will see these' })
  }, [claudeEnvRows])

  const handleSaveLitellm = useCallback(async () => {
    const url = litellmBaseUrl.trim()
    const token = litellmAuthToken.trim()
    if (!url) {
      setLitellmSaveResult({ ok: false, message: 'Base URL is required' })
      return
    }
    const filtered = claudeEnvRows.filter(({ key }) => {
      const k = key.trim()
      return k !== 'ANTHROPIC_BASE_URL' && k !== 'ANTHROPIC_AUTH_TOKEN'
    })
    const newRows: { key: string; value: string }[] = [
      ...filtered,
      { key: 'ANTHROPIC_BASE_URL', value: url }
    ]
    if (token) newRows.push({ key: 'ANTHROPIC_AUTH_TOKEN', value: token })
    setClaudeEnvRows(newRows)
    const vars: Record<string, string> = {}
    const seen = new Set<string>()
    for (const { key, value } of newRows) {
      const k = key.trim()
      if (!k || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(k) || seen.has(k)) continue
      seen.add(k)
      vars[k] = value
    }
    await backend.setClaudeEnvVars(vars)
    setLitellmSaveResult({ ok: true, message: 'Saved · new Claude tabs will use this endpoint' })
    setEnvSaveResult(null)
  }, [litellmBaseUrl, litellmAuthToken, claudeEnvRows])

  const handleClearLitellm = useCallback(async () => {
    setLitellmBaseUrl('')
    setLitellmAuthToken('')
    const newRows = claudeEnvRows.filter(({ key }) => {
      const k = key.trim()
      return k !== 'ANTHROPIC_BASE_URL' && k !== 'ANTHROPIC_AUTH_TOKEN'
    })
    setClaudeEnvRows(newRows)
    const vars: Record<string, string> = {}
    const seen = new Set<string>()
    for (const { key, value } of newRows) {
      const k = key.trim()
      if (!k || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(k) || seen.has(k)) continue
      seen.add(k)
      vars[k] = value
    }
    await backend.setClaudeEnvVars(vars)
    setLitellmSaveResult({ ok: true, message: 'Cleared' })
    setEnvSaveResult(null)
  }, [claudeEnvRows])

  const handleSaveCodexCommand = useCallback(async () => {
    setCodexSaveResult(null)
    await backend.setCodexCommand(codexCommandDraft)
    setCodexSaveResult({ ok: true, message: 'Saved · new tabs will use this command' })
  }, [codexCommandDraft])

  const handleResetCodexCommand = useCallback(async () => {
    setCodexCommandDraft('codex')
    await backend.setCodexCommand('codex')
    setCodexSaveResult({ ok: true, message: 'Reset to default' })
  }, [])

  const handleSaveCodexEnvVars = useCallback(async () => {
    const vars: Record<string, string> = {}
    const seen = new Set<string>()
    const invalidNames: string[] = []
    const duplicates: string[] = []
    for (const { key, value } of codexEnvRows) {
      const k = key.trim()
      if (!k) continue
      if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(k)) { invalidNames.push(k); continue }
      if (seen.has(k)) { duplicates.push(k); continue }
      seen.add(k)
      vars[k] = value
    }
    if (invalidNames.length > 0) { setCodexEnvSaveResult({ ok: false, message: `Invalid name(s): ${invalidNames.join(', ')}` }); return }
    if (duplicates.length > 0) { setCodexEnvSaveResult({ ok: false, message: `Duplicate name(s): ${duplicates.join(', ')}` }); return }
    await backend.setCodexEnvVars(vars)
    setCodexEnvSaveResult({ ok: true, message: 'Saved · new Codex tabs will see these' })
  }, [codexEnvRows])

  const isOverridden = (action: Action): boolean => {
    if (!hotkeyOverrides || !(action in hotkeyOverrides)) return false
    const defaultStr = bindingToString(DEFAULT_HOTKEYS[action])
    return hotkeyOverrides[action] !== defaultStr
  }

  const renderUpdaterStatus = (): JSX.Element | null => {
    if (!updaterStatus) return null
    switch (updaterStatus.state) {
      case 'checking':
        return (
          <div className="flex items-center gap-2 text-xs text-muted">
            <RefreshCw size={12} className="animate-spin" />
            Checking for updates...
          </div>
        )
      case 'not-available':
        return (
          <div className="flex items-center gap-2 text-xs text-success">
            <Check size={12} />
            You&apos;re up to date
          </div>
        )
      case 'available':
        return (
          <div className="flex items-center gap-2 text-xs text-warning">
            <Download size={12} />
            <span>
              <a
                onClick={() => backend.openExternal(harnessReleaseNotesUrl(updaterStatus.version))}
                className="underline hover:text-fg-bright cursor-pointer"
              >
                Harness {updaterStatus.version}
              </a>{' '}
              available — downloading...
            </span>
          </div>
        )
      case 'downloading':
        return (
          <div className="flex items-center gap-2 text-xs text-warning">
            <Download size={12} />
            <span>
              Downloading{' '}
              <a
                onClick={() => backend.openExternal(harnessReleaseNotesUrl(updaterStatus.version))}
                className="underline hover:text-fg-bright cursor-pointer"
              >
                Harness {updaterStatus.version}
              </a>
              ... {Math.round(updaterStatus.percent)}%
            </span>
          </div>
        )
      case 'downloaded':
        return (
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2 text-xs text-success">
              <Check size={12} />
              <span>
                <a
                  onClick={() => backend.openExternal(harnessReleaseNotesUrl(updaterStatus.version))}
                  className="underline hover:text-fg-bright cursor-pointer"
                >
                  Harness {updaterStatus.version}
                </a>{' '}
                ready to install
              </span>
            </div>
            <button
              onClick={handleRestart}
              className="self-start flex items-center gap-1.5 px-3 py-1.5 bg-success/20 hover:bg-success/30 rounded text-xs text-success transition-colors cursor-pointer"
            >
              <RotateCw size={12} />
              Restart &amp; install
            </button>
          </div>
        )
      case 'error':
        return (
          <div className="flex items-center gap-2 text-xs text-danger">
            <X size={12} />
            {updaterStatus.error}
          </div>
        )
    }
  }

  return (
    <div className="flex flex-col h-full bg-panel">
      {/* Title bar (drag region) */}
      <div className="drag-region h-10 shrink-0 border-b border-border relative">
        <button
          onClick={onClose}
          className="no-drag absolute left-20 top-1/2 -translate-y-1/2 flex items-center gap-1.5 text-xs text-muted hover:text-fg-bright transition-colors cursor-pointer"
        >
          <ArrowLeft size={14} />
          Back
          <kbd className="text-[10px] text-faint bg-bg px-1.5 py-0.5 rounded border border-border font-mono">ESC</kbd>
        </button>
        <span className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 text-sm font-medium text-fg pointer-events-none">
          Settings
        </span>
      </div>

      <div className="flex flex-1 min-h-0">
        {/* Left sidebar */}
        <div className="w-56 border-r border-border bg-panel flex flex-col shrink-0">
          <div className="px-3 py-2">
            <span className="text-xs font-medium text-dim">SECTIONS</span>
          </div>
          {SECTIONS.map((section) => {
            const Icon = section.icon
            const isActive = activeSection === section.id
            const needsAttention = section.id === 'github' && !hasToken && authSource !== 'gh-cli'
            const className = needsAttention
              ? `flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors cursor-pointer ${
                  isActive ? 'bg-info/25 text-info' : 'bg-info/10 text-info hover:bg-info/20'
                }`
              : `flex items-center gap-2 px-3 py-2 text-left text-sm transition-colors cursor-pointer ${
                  isActive
                    ? 'bg-surface text-fg-bright'
                    : 'text-muted hover:bg-panel-raised hover:text-fg-bright'
                }`
            return (
              <div key={section.id}>
                <button
                  onClick={() => scrollToSection(section.id)}
                  className={`w-full ${className}`}
                >
                  <Icon size={14} className="shrink-0" />
                  <span>{section.label}</span>
                </button>
                {section.children && (
                  <div
                    className="overflow-hidden transition-all duration-200"
                    style={{
                      maxHeight: isActive ? `${section.children.length * 36}px` : '0px',
                      opacity: isActive ? 1 : 0
                    }}
                  >
                    {section.children.map((child) => {
                      const isSubActive = activeSubSection === child.id
                      return (
                        <button
                          key={child.id}
                          onClick={() => scrollToSubSection(child.id)}
                          className={`w-full pl-9 pr-3 py-1.5 text-left text-xs transition-colors cursor-pointer ${
                            isSubActive
                              ? 'text-fg-bright bg-surface/60'
                              : 'text-muted hover:text-fg-bright hover:bg-panel-raised'
                          }`}
                        >
                          {child.label}
                        </button>
                      )
                    })}
                  </div>
                )}
              </div>
            )
          })}

          <div className="mt-auto border-t border-border px-3 py-2">
            <span className="text-xs font-medium text-dim">HELP</span>
          </div>
          <button
            onClick={onOpenGuide}
            className="flex items-center gap-2 px-3 py-2 text-left text-sm text-muted hover:bg-panel-raised hover:text-fg-bright transition-colors cursor-pointer"
          >
            <BookOpen size={14} className="shrink-0" />
            <span>Worktree Guide</span>
          </button>
          <button
            onClick={onOpenMyWeek}
            className="flex items-center gap-2 px-3 py-2 text-left text-sm text-muted hover:bg-panel-raised hover:text-fg-bright transition-colors cursor-pointer"
          >
            <CalendarDays size={14} className="shrink-0" />
            <span>My week</span>
          </button>
        </div>

        {/* Main scrollable content */}
        <div ref={scrollRef} className="flex-1 overflow-y-auto">
          <div className="max-w-2xl p-8 space-y-12">
            {/* Appearance section */}
            <section ref={(el) => { sectionRefs.current.appearance = el }} id="appearance">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Appearance</h2>
              <p className="text-sm text-dim mb-4">
                Pick a color theme for the major panels. Takes effect immediately.
              </p>

              {/* Mode picker — native radio inputs styled as a segmented
                   control. Radios give us proper keyboard semantics for free
                   (arrow keys move focus, space activates) */}
              <fieldset className="mb-6">
                <legend className="text-sm font-semibold text-fg-bright mb-2">Mode</legend>
                <div className="grid grid-cols-3 gap-2">
                  {([
                    { id: 'light', label: 'Light' },
                    { id: 'dark', label: 'Dark' },
                    { id: 'system', label: 'Follow system' }
                  ] as const).map((opt) => {
                    const isActive = themeMode === opt.id
                    return (
                      <label
                        key={opt.id}
                        className={`px-3 py-2 rounded-lg border text-sm text-center cursor-pointer transition-colors ${
                          isActive
                            ? 'bg-surface text-fg-bright border-fg'
                            : 'bg-panel-raised text-muted border-border hover:text-fg hover:border-border-strong'
                        }`}
                      >
                        <input
                          type="radio"
                          name="theme-mode"
                          value={opt.id}
                          checked={isActive}
                          onChange={() => handleSelectThemeMode(opt.id)}
                          className="sr-only"
                        />
                        {opt.label}
                      </label>
                    )
                  })}
                </div>
              </fieldset>

              <ThemeModePicker
                title="Light theme"
                hint="Used when mode is Light, or when System resolves to light."
                builtIns={BUILT_IN_THEMES_BY_MODE.light}
                customs={customThemes.filter((t) => t.mode === 'light')}
                activeId={themeLight}
                disabled={themeMode === 'dark'}
                onSelect={handleSelectLightTheme}
              />

              <div className="mt-6" />

              <ThemeModePicker
                title="Dark theme"
                hint="Used when mode is Dark, or when System resolves to dark."
                builtIns={BUILT_IN_THEMES_BY_MODE.dark}
                customs={customThemes.filter((t) => t.mode === 'dark')}
                activeId={themeDark}
                disabled={themeMode === 'light'}
                onSelect={handleSelectDarkTheme}
              />

              <div className="mt-8">
                <h3 className="text-sm font-semibold text-fg-bright mb-1">Custom themes</h3>
                <p className="text-xs text-dim mb-3">
                  Drop <code className="text-fg">{'<name>.json'}</code> files into your themes folder. They show up in the pickers above, filtered by their <code className="text-fg">mode</code>. {customThemes.length === 0 ? 'None loaded yet.' : `${customThemes.length} loaded.`}
                </p>
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={async () => { await backend.openThemesFolder() }}
                    className="px-3 py-1.5 rounded-md border border-border text-sm text-fg bg-panel-raised hover:bg-surface cursor-pointer"
                  >
                    Open themes folder
                  </button>
                  <button
                    type="button"
                    onClick={async () => { await backend.reloadCustomThemes() }}
                    className="px-3 py-1.5 rounded-md border border-border text-sm text-fg bg-panel-raised hover:bg-surface cursor-pointer"
                  >
                    Reload from disk
                  </button>
                </div>
              </div>

              <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-1">Terminal font</h3>
              <p className="text-xs text-dim mb-3">
                Used by every Claude and shell tab. Provide any CSS font-family value
                — install the font on your system first (e.g.{' '}
                <code className="bg-panel-raised px-1 rounded">Hack</code>,{' '}
                <code className="bg-panel-raised px-1 rounded">'JetBrains Mono'</code>,{' '}
                <code className="bg-panel-raised px-1 rounded">'Fira Code'</code>).
                Changes apply immediately to all open terminals.
              </p>

              <div className="bg-panel-raised border border-border rounded-lg p-4 space-y-4">
                <div>
                  <label className="block text-sm font-medium text-fg mb-1">Font family</label>
                  <input
                    type="text"
                    value={terminalFontFamily}
                    onChange={(e) => handleTerminalFontFamilyChange(e.target.value)}
                    spellCheck={false}
                    className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono"
                    placeholder={defaultTerminalFontFamily}
                  />
                  {terminalFontFamily !== defaultTerminalFontFamily && defaultTerminalFontFamily && (
                    <button
                      onClick={handleResetTerminalFontFamily}
                      className="mt-2 flex items-center gap-1 px-2 py-1 text-xs text-dim hover:text-fg transition-colors cursor-pointer"
                    >
                      <RotateCcw size={11} />
                      Reset to default
                    </button>
                  )}
                </div>

                <div>
                  <label className="block text-sm font-medium text-fg mb-1">
                    Font size <span className="text-dim font-normal">({terminalFontSize}px)</span>
                  </label>
                  <input
                    type="range"
                    min={8}
                    max={24}
                    step={1}
                    value={terminalFontSize}
                    onChange={(e) => handleTerminalFontSizeChange(Number(e.target.value))}
                    className="w-full accent-fg cursor-pointer"
                  />
                </div>

                <div
                  className="rounded border border-border-strong bg-panel px-3 py-2 text-fg-bright"
                  style={{
                    fontFamily: terminalFontFamily || defaultTerminalFontFamily,
                    fontSize: `${terminalFontSize}px`,
                    lineHeight: 1.4
                  }}
                >
                  the quick brown fox 0123 =&gt; != &lt;= -&gt;
                </div>
              </div>
            </section>

            {/* Agent section */}
            <section ref={(el) => { sectionRefs.current.agent = el }} id="agent">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Agent</h2>
              <p className="text-sm text-dim mb-4">
                Choose which AI coding agent Harness launches in new tabs.
              </p>

              {/* ── General subsection ── */}
              <div ref={(el) => { subSectionRefs.current['agent-general'] = el }} id="agent-general">
              <div className="bg-panel-raised border border-border rounded-lg p-4 mb-6">
                <label className="block text-sm font-medium text-fg mb-3">Default agent</label>
                <div className="flex gap-2">
                  {AGENT_REGISTRY.map((agent) => (
                    <button
                      key={agent.kind}
                      onClick={() => backend.setDefaultAgent(agent.kind)}
                      className={`flex items-center gap-2 px-4 py-2 rounded text-sm font-medium transition-colors cursor-pointer ${
                        defaultAgent === agent.kind
                          ? 'bg-surface text-fg-bright border border-fg'
                          : 'bg-panel border border-border text-dim hover:text-fg hover:border-border-strong'
                      }`}
                    >
                      <AgentIcon kind={agent.kind} size={14} />
                      {agent.displayName}
                    </button>
                  ))}
                </div>
                <p className="mt-2 text-xs text-faint">
                  New agent tabs will use the selected default. Existing tabs are unaffected.
                </p>

                {defaultAgent === 'claude' && (
                  <div className="mt-4 pt-4 border-t border-border pl-4 border-l-2 border-l-border ml-1">
                    <label className="block text-sm font-medium text-fg mb-2">Interface</label>
                    <p className="text-xs text-dim mb-3">
                      Which interface new Claude tabs spawn in. Switch any
                      existing tab from its right-click menu or the chip in
                      the tab header.
                    </p>
                    <InterfaceToggle
                      value={defaultClaudeTabType}
                      onChange={(value) => { void backend.setDefaultClaudeTabType(value) }}
                    />
                  </div>
                )}
              </div>

              <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-3">
                Status hooks
              </h3>
              <div className="bg-panel-raised border border-border rounded-lg p-4">
                <p className="text-xs text-dim mb-3">
                  Harness installs a small hook at{' '}
                  <code className="bg-panel px-1 rounded">~/.claude/settings.json</code> and{' '}
                  <code className="bg-panel px-1 rounded">~/.codex/hooks.json</code> so it can
                  detect when each agent tab is processing, waiting, or awaiting approval.
                  The hook only emits when <code className="bg-panel px-1 rounded">$HARNESS_TERMINAL_ID</code>{' '}
                  is set — sessions you launch outside Harness are untouched.
                </p>
                <div className="flex items-center gap-2">
                  {hooksConsent === 'accepted' ? (
                    <>
                      <span className="text-xs text-success flex items-center gap-1"><Check size={12} />Installed</span>
                      <button
                        onClick={() => void backend.uninstallHooks()}
                        className="ml-auto px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"
                      >
                        Remove hooks
                      </button>
                    </>
                  ) : (
                    <>
                      <span className="text-xs text-dim">
                        {hooksConsent === 'declined' ? 'Declined' : 'Not installed'}
                      </span>
                      <button
                        onClick={() => void backend.acceptHooks()}
                        className="ml-auto px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"
                      >
                        Install hooks
                      </button>
                    </>
                  )}
                </div>
              </div>
              </div>

              {/* ── Claude subsection ── */}
              <div ref={(el) => { subSectionRefs.current['agent-claude'] = el }} id="agent-claude" className="mt-8">
              <h3 className="text-sm font-semibold text-fg-bright mb-3 flex items-center gap-2">
                Claude Code
                {defaultAgent === 'claude' && <span className="text-[10px] font-normal text-dim bg-panel px-1.5 py-0.5 rounded">default</span>}
              </h3>

              <div className="bg-panel-raised border border-border rounded-lg p-4 mb-4">
                <label className="block text-sm font-medium text-fg mb-1">Model</label>
                <p className="text-xs text-dim mb-2">
                  Appends <code className="bg-panel px-1 rounded">--model</code> to the launch command. Leave on default to let the CLI choose.
                </p>
                <select
                  value={claudeModel || ''}
                  onChange={(e) => { void backend.setClaudeModel(e.target.value || null) }}
                  className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-sm text-fg-bright outline-none focus:border-fg cursor-pointer"
                >
                  <option value="">(Default — let CLI choose)</option>
                  <optgroup label="Current">
                    {CLAUDE_MODELS.filter((m) => m.tier === 'current').map((m) => (
                      <option key={m.id} value={m.id}>{m.displayName}</option>
                    ))}
                  </optgroup>
                  <optgroup label="Legacy">
                    {CLAUDE_MODELS.filter((m) => m.tier === 'legacy').map((m) => (
                      <option key={m.id} value={m.id}>{m.displayName}</option>
                    ))}
                  </optgroup>
                </select>
              </div>

              <div className="bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Launch command</label>
                <p className="text-xs text-dim mb-2">
                  Harness appends <code className="bg-panel px-1 rounded">--session-id &lt;uuid&gt;</code> so each tab has its own stable, resumable session.
                </p>
                <textarea
                  value={claudeCommandDraft}
                  onChange={(e) => setClaudeCommandDraft(e.target.value)}
                  rows={2}
                  spellCheck={false}
                  className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
                  placeholder={defaultClaudeCommand}
                />
                <div className="flex items-center gap-2 mt-3">
                  <button onClick={handleSaveClaudeCommand} disabled={!claudeCommandDraft.trim()} className="px-3 py-1.5 bg-surface hover:bg-surface-hover disabled:opacity-40 rounded text-sm text-fg-bright transition-colors cursor-pointer">Save</button>
                  {claudeCommandDraft !== defaultClaudeCommand && defaultClaudeCommand && (
                    <button onClick={handleResetClaudeCommand} className="flex items-center gap-1 px-3 py-1.5 text-sm text-dim hover:text-fg transition-colors cursor-pointer"><RotateCcw size={12} />Reset</button>
                  )}
                </div>
                {claudeSaveResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${claudeSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {claudeSaveResult.ok ? <Check size={12} /> : <X size={12} />}{claudeSaveResult.message}
                  </div>
                )}

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="block text-xs font-medium text-fg mb-1">Full command preview</label>
                  <div className="bg-panel border border-border rounded px-3 py-2 text-[11px] text-fg-bright font-mono break-all">{commandPreview}</div>
                  <p className="text-[10px] text-dim mt-1">where <code className="bg-panel px-1 rounded">{`<shell>`}</code> is your <code className="bg-panel px-1 rounded">$SHELL</code> (typically <code className="bg-panel px-1 rounded">/bin/bash</code> or <code className="bg-panel px-1 rounded">/bin/zsh</code>).</p>
                </div>

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="flex items-start gap-2 cursor-pointer">
                    <input type="checkbox" checked={harnessMcpEnabled} onChange={(e) => handleToggleHarnessMcp(e.target.checked)} className="mt-0.5 cursor-pointer" />
                    <div className="flex-1">
                      <div className="text-sm text-fg-bright">Enable Harness MCP</div>
                      <div className="text-xs text-dim mt-0.5">
                        Injects <code className="bg-panel px-1 rounded text-[10px]">harness-control</code> MCP server via <code className="bg-panel px-1 rounded text-[10px]">--mcp-config</code>.
                      </div>
                    </div>
                  </label>
                </div>


                <div className="mt-4 pt-3 border-t border-border">
                  <label className="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" checked={nameClaudeSessions} onChange={(e) => { void backend.setNameClaudeSessions(e.target.checked) }} className="accent-current w-4 h-4 cursor-pointer" />
                    <div>
                      <span className="text-sm font-medium text-fg">Name sessions by worktree</span>
                      <p className="text-xs text-dim mt-0.5">Passes <code className="bg-panel px-1 rounded">--name &quot;repo/branch&quot;</code> to Claude.</p>
                    </div>
                  </label>
                </div>

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="flex items-start gap-2 cursor-pointer">
                    <input type="checkbox" checked={claudeTuiFullscreen} onChange={(e) => { void backend.setClaudeTuiFullscreen(e.target.checked) }} className="mt-0.5 cursor-pointer" />
                    <div className="flex-1">
                      <div className="text-sm text-fg-bright">Fullscreen TUI by default</div>
                      <div className="text-xs text-dim mt-0.5">
                        Sets <code className="bg-panel px-1 rounded text-[10px]">CLAUDE_CODE_NO_FLICKER=1</code> so Claude runs in fullscreen TUI mode instead of taking over your scrollback.
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              <div className="mt-4 bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Custom Claude API endpoint</label>
                <p className="text-xs text-dim mb-3">
                  Point Claude at a LiteLLM proxy, AWS Bedrock proxy, or another OpenAI/Anthropic-compatible gateway. Sets the <code className="bg-panel px-1 rounded">ANTHROPIC_BASE_URL</code> and <code className="bg-panel px-1 rounded">ANTHROPIC_AUTH_TOKEN</code> env vars under the hood — leave blank to talk to Anthropic directly.
                </p>
                <div className="space-y-2">
                  <div>
                    <label className="block text-[11px] font-medium text-dim mb-1">Base URL</label>
                    <input
                      type="text"
                      value={litellmBaseUrl}
                      onChange={(e) => { setLitellmBaseUrl(e.target.value); setLitellmSaveResult(null) }}
                      placeholder="http://localhost:4000"
                      spellCheck={false}
                      className="w-full bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono"
                    />
                  </div>
                  <div>
                    <label className="block text-[11px] font-medium text-dim mb-1">Auth token <span className="text-faint">(optional)</span></label>
                    <div className="flex items-center gap-2">
                      <input
                        type={litellmAuthRevealed ? 'text' : 'password'}
                        value={litellmAuthToken}
                        onChange={(e) => { setLitellmAuthToken(e.target.value); setLitellmSaveResult(null) }}
                        placeholder="sk-..."
                        spellCheck={false}
                        className="flex-1 bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono"
                      />
                      <Tooltip label={litellmAuthRevealed ? 'Hide token' : 'Reveal token'}>
                        <button onClick={() => setLitellmAuthRevealed((v) => !v)} className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer">
                          {litellmAuthRevealed ? <EyeOff size={14} /> : <Eye size={14} />}
                        </button>
                      </Tooltip>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2 mt-3">
                  <button onClick={handleSaveLitellm} disabled={!litellmBaseUrl.trim()} className="px-3 py-1.5 bg-surface hover:bg-surface-hover disabled:opacity-40 rounded text-sm text-fg-bright transition-colors cursor-pointer">Save endpoint</button>
                  {(claudeEnvVars['ANTHROPIC_BASE_URL'] || claudeEnvVars['ANTHROPIC_AUTH_TOKEN']) && (
                    <button onClick={handleClearLitellm} className="px-3 py-1.5 text-sm text-dim hover:text-fg transition-colors cursor-pointer">Clear</button>
                  )}
                </div>
                {litellmSaveResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${litellmSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {litellmSaveResult.ok ? <Check size={12} /> : <X size={12} />}{litellmSaveResult.message}
                  </div>
                )}
              </div>

              <div className="mt-4 bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Environment variables</label>
                <p className="text-xs text-dim mb-3">
                  Injected into Claude tabs. Use for <code className="bg-panel px-1 rounded">ANTHROPIC_API_KEY</code> etc.
                </p>
                {claudeEnvRows.length > 0 && (
                  <div className="space-y-2 mb-3">
                    {claudeEnvRows.map((row, index) => {
                      const revealed = revealedEnvRows.has(index)
                      return (
                        <div key={index} className="flex items-center gap-2">
                          <input type="text" value={row.key} onChange={(e) => handleUpdateEnvRow(index, 'key', e.target.value)} placeholder="NAME" spellCheck={false} className="w-44 bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono" />
                          <span className="text-dim text-xs">=</span>
                          <input type={revealed ? 'text' : 'password'} value={row.value} onChange={(e) => handleUpdateEnvRow(index, 'value', e.target.value)} placeholder="value" spellCheck={false} className="flex-1 bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono" />
                          <Tooltip label={revealed ? 'Hide value' : 'Reveal value'}><button onClick={() => handleToggleRevealEnvRow(index)} className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer">{revealed ? <EyeOff size={14} /> : <Eye size={14} />}</button></Tooltip>
                          <Tooltip label="Remove"><button onClick={() => handleRemoveEnvRow(index)} className="p-1.5 text-dim hover:text-danger transition-colors cursor-pointer"><Trash2 size={14} /></button></Tooltip>
                        </div>
                      )
                    })}
                  </div>
                )}
                <div className="flex items-center gap-2">
                  <button onClick={handleAddEnvRow} className="flex items-center gap-1 px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"><Plus size={12} />Add variable</button>
                  <button onClick={handleSaveClaudeEnvVars} className="px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer">Save</button>
                </div>
                {envSaveResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${envSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {envSaveResult.ok ? <Check size={12} /> : <X size={12} />}{envSaveResult.message}
                  </div>
                )}
              </div>

              {/* Chat interface settings — only relevant when running
                  Chat tabs, but always visible so the controls are findable. */}
              <div className="mt-4 bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Chat interface</label>
                <p className="text-xs text-dim mb-3">
                  Behavior for Claude tabs running the Chat interface
                  (inline tool cards, approval flows). No effect on
                  Terminal tabs.
                </p>

                <div className="pt-3 border-t border-border">
                  <label className="block text-xs font-medium text-fg mb-1">
                    Default permission mode for new chats
                  </label>
                  <div className="text-xs text-dim mb-2">
                    New Chat tabs start in this mode. Change per-chat
                    anytime via the statusline picker.
                  </div>
                  <select
                    value={jsonModeDefaultPermissionMode}
                    onChange={(e) => {
                      const v = e.target.value
                      void backend.setJsonModeDefaultPermissionMode(
                        v === 'default' || v === 'plan' ? v : 'acceptEdits'
                      )
                    }}
                    className="bg-panel border border-border-strong rounded px-2 py-1 text-xs text-fg-bright outline-none focus:border-fg cursor-pointer"
                  >
                    <option value="acceptEdits">
                      Accept edits — auto-allow Edit/Write, ask for Bash and other tools
                    </option>
                    <option value="default">
                      Ask every time — surface every tool call for approval
                    </option>
                    <option value="plan">
                      Plan mode — read-only, the agent proposes but doesn't act
                    </option>
                  </select>
                </div>

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="block text-xs font-medium text-fg mb-1">
                    Auto-sleep idle chats after
                  </label>
                  <div className="text-xs text-dim mb-2">
                    A Chat tab waiting for your reply for this long
                    (yellow dot) gets its subprocess torn down to free
                    RAM. Click the tab to wake — history is intact. Set
                    to 0 to disable.
                  </div>
                  <div className="flex items-center gap-2">
                    <input
                      type="number"
                      min={0}
                      max={24 * 60}
                      step={1}
                      value={autoSleepDraft}
                      onChange={(e) => setAutoSleepDraft(e.target.value)}
                      onBlur={commitAutoSleepMinutes}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') {
                          e.currentTarget.blur()
                        }
                      }}
                      className="bg-panel border border-border-strong rounded px-2 py-1 text-xs text-fg-bright outline-none focus:border-fg w-24"
                    />
                    <span className="text-xs text-dim">minutes</span>
                  </div>
                </div>

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="block text-xs font-medium text-fg mb-1">
                    Chat density
                  </label>
                  <div
                    className="text-xs text-dim mb-2"
                    title="Larger text and padding, intended for new users or screen-sharing."
                  >
                    Larger text and padding for new users or
                    screen-sharing.
                  </div>
                  <div className="inline-flex rounded border border-border-strong overflow-hidden">
                    <button
                      type="button"
                      onClick={() => {
                        void backend.setJsonModeChatDensity('compact')
                      }}
                      className={`px-3 py-1 text-xs cursor-pointer transition-colors ${
                        jsonModeChatDensity === 'compact'
                          ? 'bg-accent/20 text-fg-bright'
                          : 'bg-panel text-muted hover:bg-panel-raised'
                      }`}
                    >
                      Compact
                    </button>
                    <button
                      type="button"
                      onClick={() => {
                        void backend.setJsonModeChatDensity('comfy')
                      }}
                      className={`px-3 py-1 text-xs cursor-pointer transition-colors border-l border-border-strong ${
                        jsonModeChatDensity === 'comfy'
                          ? 'bg-accent/20 text-fg-bright'
                          : 'bg-panel text-muted hover:bg-panel-raised'
                      }`}
                    >
                      Comfy
                    </button>
                  </div>
                </div>

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="flex items-start gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={jsonModeSendOnEnter}
                      onChange={(e) => {
                        void backend.setJsonModeSendOnEnter(e.target.checked)
                      }}
                      className="mt-0.5 cursor-pointer"
                    />
                    <div className="flex-1">
                      <div className="text-sm text-fg-bright">
                        Send messages with Enter
                      </div>
                      <div className="text-xs text-dim mt-0.5">
                        Plain Enter sends; Shift+Enter inserts a newline. When
                        off, Cmd/Ctrl+Enter sends.
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              </div>

              {/* ── Codex subsection ── */}
              <div ref={(el) => { subSectionRefs.current['agent-codex'] = el }} id="agent-codex" className="mt-8">
              <h3 className="text-sm font-semibold text-fg-bright mb-3 flex items-center gap-2">
                Codex
                {defaultAgent === 'codex' && <span className="text-[10px] font-normal text-dim bg-panel px-1.5 py-0.5 rounded">default</span>}
              </h3>

              <div className="bg-panel-raised border border-border rounded-lg p-4 mb-4">
                <label className="block text-sm font-medium text-fg mb-1">Model</label>
                <p className="text-xs text-dim mb-2">
                  Appends <code className="bg-panel px-1 rounded">--model</code> to the launch command. Leave on default to let the CLI choose.
                </p>
                <select
                  value={codexModel || ''}
                  onChange={(e) => { void backend.setCodexModel(e.target.value || null) }}
                  className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-sm text-fg-bright outline-none focus:border-fg cursor-pointer"
                >
                  <option value="">(Default — let CLI choose)</option>
                  <optgroup label="Current">
                    {CODEX_MODELS.filter((m) => m.tier === 'current').map((m) => (
                      <option key={m.id} value={m.id}>{m.displayName}</option>
                    ))}
                  </optgroup>
                  <optgroup label="Legacy">
                    {CODEX_MODELS.filter((m) => m.tier === 'legacy').map((m) => (
                      <option key={m.id} value={m.id}>{m.displayName}</option>
                    ))}
                  </optgroup>
                </select>
              </div>

              <div className="bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Launch command</label>
                <p className="text-xs text-dim mb-2">
                  The Codex CLI command. Harness manages session resume automatically.
                </p>
                <textarea
                  value={codexCommandDraft}
                  onChange={(e) => setCodexCommandDraft(e.target.value)}
                  rows={2}
                  spellCheck={false}
                  className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
                  placeholder="codex"
                />
                <div className="flex items-center gap-2 mt-3">
                  <button onClick={handleSaveCodexCommand} disabled={!codexCommandDraft.trim()} className="px-3 py-1.5 bg-surface hover:bg-surface-hover disabled:opacity-40 rounded text-sm text-fg-bright transition-colors cursor-pointer">Save</button>
                  {codexCommandDraft !== 'codex' && (
                    <button onClick={handleResetCodexCommand} className="flex items-center gap-1 px-3 py-1.5 text-sm text-dim hover:text-fg transition-colors cursor-pointer"><RotateCcw size={12} />Reset</button>
                  )}
                </div>
                {codexSaveResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${codexSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {codexSaveResult.ok ? <Check size={12} /> : <X size={12} />}{codexSaveResult.message}
                  </div>
                )}
                {(() => {
                  const effectiveCodexCommand = codexCommandDraft.trim() || 'codex'
                  const codexModelPart = codexModel && !effectiveCodexCommand.includes('--model') && !effectiveCodexCommand.includes('-m ') ? ` --model ${codexModel}` : ''
                  const codexPreviewInner = `${effectiveCodexCommand}${codexModelPart}`
                  return (
                    <div className="mt-4 pt-3 border-t border-border">
                      <label className="block text-xs font-medium text-fg mb-1">Full command preview</label>
                      <div className="bg-panel border border-border rounded px-3 py-2 text-[11px] text-fg-bright font-mono break-all">{`<shell> -ilc "${codexPreviewInner}"`}</div>
                      <p className="text-[10px] text-dim mt-1">where <code className="bg-panel px-1 rounded">{`<shell>`}</code> is your <code className="bg-panel px-1 rounded">$SHELL</code> (typically <code className="bg-panel px-1 rounded">/bin/bash</code> or <code className="bg-panel px-1 rounded">/bin/zsh</code>).</p>
                    </div>
                  )
                })()}
              </div>

              <div className="mt-4 bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Environment variables</label>
                <p className="text-xs text-dim mb-3">
                  Injected into Codex tabs. Use for <code className="bg-panel px-1 rounded">OPENAI_API_KEY</code> etc.
                </p>
                {codexEnvRows.length > 0 && (
                  <div className="space-y-2 mb-3">
                    {codexEnvRows.map((row, index) => {
                      const revealed = codexRevealedEnvRows.has(index)
                      return (
                        <div key={index} className="flex items-center gap-2">
                          <input type="text" value={row.key} onChange={(e) => { setCodexEnvRows((prev) => prev.map((r, i) => (i === index ? { ...r, key: e.target.value } : r))); setCodexEnvSaveResult(null) }} placeholder="NAME" spellCheck={false} className="w-44 bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono" />
                          <span className="text-dim text-xs">=</span>
                          <input type={revealed ? 'text' : 'password'} value={row.value} onChange={(e) => { setCodexEnvRows((prev) => prev.map((r, i) => (i === index ? { ...r, value: e.target.value } : r))); setCodexEnvSaveResult(null) }} placeholder="value" spellCheck={false} className="flex-1 bg-panel border border-border-strong rounded px-2 py-1.5 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono" />
                          <Tooltip label={revealed ? 'Hide value' : 'Reveal value'}><button onClick={() => setCodexRevealedEnvRows((prev) => { const next = new Set(prev); if (next.has(index)) next.delete(index); else next.add(index); return next })} className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer">{revealed ? <EyeOff size={14} /> : <Eye size={14} />}</button></Tooltip>
                          <Tooltip label="Remove"><button onClick={() => { setCodexEnvRows((prev) => prev.filter((_, i) => i !== index)); setCodexEnvSaveResult(null) }} className="p-1.5 text-dim hover:text-danger transition-colors cursor-pointer"><Trash2 size={14} /></button></Tooltip>
                        </div>
                      )
                    })}
                  </div>
                )}
                <div className="flex items-center gap-2">
                  <button onClick={() => { setCodexEnvRows((prev) => [...prev, { key: '', value: '' }]); setCodexEnvSaveResult(null) }} className="flex items-center gap-1 px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"><Plus size={12} />Add variable</button>
                  <button onClick={handleSaveCodexEnvVars} className="px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer">Save</button>
                </div>
                {codexEnvSaveResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${codexEnvSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {codexEnvSaveResult.ok ? <Check size={12} /> : <X size={12} />}{codexEnvSaveResult.message}
                  </div>
                )}
              </div>
              </div>

              {/* ── System prompt subsection ── */}
              <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-3">
                System prompt
              </h3>
              <div className="bg-panel-raised border border-border rounded-lg p-4">
                <label className="flex items-start gap-2 cursor-pointer mb-4">
                  <input
                    type="checkbox"
                    checked={harnessSystemPromptEnabled}
                    onChange={(e) => { void backend.setHarnessSystemPromptEnabled(e.target.checked) }}
                    className="mt-0.5 cursor-pointer"
                  />
                  <div className="flex-1">
                    <div className="text-sm text-fg-bright">Inject Harness context into Claude sessions</div>
                    <div className="text-xs text-dim mt-0.5">
                      Appends <code className="bg-panel px-1 rounded text-[10px]">--append-system-prompt</code> with context about Harness and MCP tools.
                    </div>
                  </div>
                </label>

                {harnessSystemPromptEnabled && (
                  <>
                    <div className="mb-4">
                      <label className="block text-xs font-medium text-fg mb-1">Base prompt</label>
                      <p className="text-[11px] text-dim mb-2">Sent to every Claude session.</p>
                      <textarea
                        value={systemPromptDraft}
                        onChange={(e) => setSystemPromptDraft(e.target.value)}
                        rows={6}
                        spellCheck={false}
                        className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
                      />
                    </div>

                    <div className="mb-4">
                      <label className="block text-xs font-medium text-fg mb-1">Main worktree addition</label>
                      <p className="text-[11px] text-dim mb-2">Appended when Claude is running on the main/primary worktree.</p>
                      <textarea
                        value={systemPromptMainDraft}
                        onChange={(e) => setSystemPromptMainDraft(e.target.value)}
                        rows={4}
                        spellCheck={false}
                        className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
                      />
                    </div>

                    <div className="flex items-center gap-2">
                      <button
                        onClick={handleSaveSystemPrompt}
                        className="px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"
                      >
                        Save
                      </button>
                      <button
                        onClick={handleResetSystemPrompt}
                        className="flex items-center gap-1 px-3 py-1.5 text-sm text-dim hover:text-fg transition-colors cursor-pointer"
                      >
                        <RotateCcw size={12} />
                        Reset to defaults
                      </button>
                    </div>
                    {systemPromptSaveResult && (
                      <div className={`mt-3 text-xs flex items-center gap-1.5 ${systemPromptSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                        {systemPromptSaveResult.ok ? <Check size={12} /> : <X size={12} />}{systemPromptSaveResult.message}
                      </div>
                    )}
                    <p className="mt-3 text-[11px] text-faint">Changes apply to new sessions only.</p>
                  </>
                )}
              </div>
            </section>

            {/* Worktrees section */}
            <section ref={(el) => { sectionRefs.current.worktrees = el }} id="worktrees">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Worktrees</h2>
              <p className="text-sm text-dim mb-4">
                Controls how new worktrees are created from the sidebar.
              </p>

              {repoList.length > 0 && (
                <div className="mb-4">
                  <div className="flex items-center gap-1 text-[11px] text-faint mb-1.5 uppercase tracking-wide">
                    Scope
                  </div>
                  <div className="flex flex-wrap gap-1 bg-panel-raised border border-border rounded p-1">
                    <button
                      onClick={() => setScopeRepoRoot(null)}
                      className={`px-2.5 py-1 rounded text-xs transition-colors cursor-pointer ${
                        scopeRepoRoot === null
                          ? 'bg-surface text-fg-bright'
                          : 'text-dim hover:text-fg'
                      }`}
                    >
                      Global
                    </button>
                    {repoList.map((r) => (
                      <button
                        key={r}
                        onClick={() => setScopeRepoRoot(r)}
                        className={`px-2.5 py-1 rounded text-xs font-mono transition-colors cursor-pointer ${
                          scopeRepoRoot === r
                            ? 'bg-surface text-fg-bright'
                            : 'text-dim hover:text-fg'
                        }`}
                        title={r}
                      >
                        {repoBasename(r)}
                      </button>
                    ))}
                  </div>
                  <p className="text-[11px] text-faint mt-1.5">
                    {scopeRepoRoot
                      ? <>Editing <code className="bg-panel-raised px-1 rounded">.harness.json</code> in <span className="font-mono">{repoBasename(scopeRepoRoot)}</span>. Unset fields inherit from global. You can commit this file to share settings with teammates.</>
                      : 'Editing global settings. Individual repos can override these values via their .harness.json file.'}
                  </p>
                </div>
              )}
              {scopeRepoRoot === null && (
              <div className="space-y-2">
                {(
                  [
                    {
                      id: 'remote' as const,
                      label: 'Branch from the latest remote main',
                      description:
                        'Fetches origin before creating the worktree so you start from the tip of the remote default branch. Falls back to local HEAD if the fetch fails (e.g. offline).'
                    },
                    {
                      id: 'local' as const,
                      label: 'Branch from the current local HEAD',
                      description:
                        "Uses whatever is checked out in the main repo right now. Fastest, but you'll inherit any stale local main or unpushed commits."
                    }
                  ]
                ).map((opt) => {
                  const isActive = worktreeBase === opt.id
                  return (
                    <button
                      key={opt.id}
                      onClick={() => handleSelectWorktreeBase(opt.id)}
                      className={`w-full text-left rounded border px-3 py-2 transition-colors cursor-pointer ${
                        isActive
                          ? 'border-accent bg-panel-raised'
                          : 'border-border hover:border-border-strong'
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        <div
                          className={`w-3 h-3 rounded-full border ${
                            isActive ? 'border-accent bg-accent' : 'border-border-strong'
                          }`}
                        />
                        <span className="text-sm text-fg-bright">{opt.label}</span>
                      </div>
                      <p className="text-xs text-dim mt-1 ml-5">{opt.description}</p>
                    </button>
                  )
                })}
              </div>
              )}

              <div className="flex items-center justify-between mt-6 mb-1">
                <h3 className="text-sm font-semibold text-fg-bright">Default merge strategy</h3>
                {scopeRepoRoot === null && reposOverridingKey('mergeStrategy').length > 0 && (
                  <span className="text-[10px] text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Overridden in {reposOverridingKey('mergeStrategy').map(repoBasename).join(', ')}
                  </span>
                )}
                {scopeRepoRoot !== null && scopedMergeStrategyIsOverride && (
                  <button
                    onClick={handleResetMergeStrategyToGlobal}
                    className="text-[10px] text-dim hover:text-fg underline cursor-pointer"
                  >
                    Reset to global
                  </button>
                )}
              </div>
              <p className="text-xs text-dim mb-3">
                Used when you run "Merge locally" on a worktree. The dropdown on
                that button also writes back to this setting so your most recent
                choice becomes the new default.
              </p>
              <div className="space-y-2">
                {(
                  [
                    {
                      id: 'squash' as const,
                      label: 'Squash',
                      description:
                        "Combine all branch commits into one commit on the base branch. GitHub's \"Squash and merge\"."
                    },
                    {
                      id: 'merge-commit' as const,
                      label: 'Merge commit',
                      description:
                        'Always create a merge commit (--no-ff), preserving the branch as a visible bubble in history.'
                    },
                    {
                      id: 'fast-forward' as const,
                      label: 'Fast-forward only',
                      description:
                        'Only merge if the base can fast-forward (--ff-only). Fails on divergent history.'
                    }
                  ]
                ).map((opt) => {
                  const isActive = displayedMergeStrategy === opt.id
                  return (
                    <button
                      key={opt.id}
                      onClick={() => handleSelectMergeStrategy(opt.id)}
                      className={`w-full text-left rounded border px-3 py-2 transition-colors cursor-pointer ${
                        isActive
                          ? 'border-accent bg-panel-raised'
                          : 'border-border hover:border-border-strong'
                      }`}
                    >
                      <div className="flex items-center gap-2">
                        <div
                          className={`w-3 h-3 rounded-full border ${
                            isActive ? 'border-accent bg-accent' : 'border-border-strong'
                          }`}
                        />
                        <span className="text-sm text-fg-bright">{opt.label}</span>
                      </div>
                      <p className="text-xs text-dim mt-1 ml-5">{opt.description}</p>
                    </button>
                  )
                })}
              </div>

              <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-1">Setup & teardown scripts</h3>
              <p className="text-xs text-dim mb-3">
                Optional shell commands run via a login shell
                (<code className="bg-panel-raised px-1 rounded text-[10px]">zsh -ilc</code>) with
                the worktree as <code className="bg-panel-raised px-1 rounded text-[10px]">cwd</code>.
                Setup runs after a worktree is created; teardown runs before it's removed.
                The env vars{' '}
                <code className="bg-panel-raised px-1 rounded text-[10px]">HARNESS_WORKTREE_PATH</code>,{' '}
                <code className="bg-panel-raised px-1 rounded text-[10px]">HARNESS_BRANCH</code>, and{' '}
                <code className="bg-panel-raised px-1 rounded text-[10px]">HARNESS_REPO_ROOT</code>{' '}
                are available to the command.
              </p>

              <div className="flex items-center justify-between mb-1">
                <label className="block text-xs text-dim">Setup command</label>
                {scopeRepoRoot === null && reposOverridingKey('setupCommand').length > 0 && (
                  <span className="text-[10px] text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Overridden in {reposOverridingKey('setupCommand').map(repoBasename).join(', ')}
                  </span>
                )}
                {scopeRepoRoot !== null && scopedSetupIsOverride && (
                  <button
                    onClick={handleResetSetupToGlobal}
                    className="text-[10px] text-dim hover:text-fg underline cursor-pointer"
                  >
                    Reset to global
                  </button>
                )}
              </div>
              <textarea
                value={setupDraft}
                onChange={(e) => setSetupDraft(e.target.value)}
                placeholder={
                  scopeRepoRoot && setupScript
                    ? `Inherits from global: ${setupScript}`
                    : 'e.g. npm install --legacy-peer-deps'
                }
                rows={3}
                className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-sm text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
              />

              <div className="flex items-center justify-between mt-3 mb-1">
                <label className="block text-xs text-dim">Teardown command</label>
                {scopeRepoRoot === null && reposOverridingKey('teardownCommand').length > 0 && (
                  <span className="text-[10px] text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Overridden in {reposOverridingKey('teardownCommand').map(repoBasename).join(', ')}
                  </span>
                )}
                {scopeRepoRoot !== null && scopedTeardownIsOverride && (
                  <button
                    onClick={handleResetTeardownToGlobal}
                    className="text-[10px] text-dim hover:text-fg underline cursor-pointer"
                  >
                    Reset to global
                  </button>
                )}
              </div>
              <textarea
                value={teardownDraft}
                onChange={(e) => setTeardownDraft(e.target.value)}
                placeholder={
                  scopeRepoRoot && teardownScript
                    ? `Inherits from global: ${teardownScript}`
                    : 'e.g. docker compose down'
                }
                rows={3}
                className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-sm text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
              />

              <div className="flex items-center gap-2 mt-3">
                <button
                  onClick={handleSaveWorktreeScripts}
                  className="px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"
                >
                  Save
                </button>
                {scriptsSaveResult && (
                  <span className={`text-xs flex items-center gap-1.5 ${scriptsSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                    {scriptsSaveResult.ok ? <Check size={12} /> : <X size={12} />}
                    {scriptsSaveResult.message}
                  </span>
                )}
              </div>
              <p className="mt-2 text-[11px] text-faint">
                Failures are logged but don't block the worktree operation. Leave blank to disable.
              </p>

              {scopeRepoRoot === null && (
                <>
                  <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-1">Default snooze duration</h3>
                  <p className="text-xs text-dim mb-3">
                    How many days a worktree snoozes by default. ⌥-click the
                    snooze button to pick a specific date or Never.
                  </p>
                  <div className="flex items-center gap-2">
                    <input
                      type="number"
                      min={1}
                      step={1}
                      value={snoozeDefaultDays}
                      onChange={(e) => {
                        const n = Math.max(1, Math.floor(Number(e.target.value) || 1))
                        void backend.setSnoozeDefaultDays(n)
                      }}
                      className="w-20 bg-panel border border-border-strong rounded px-2 py-1 text-sm text-fg-bright outline-none focus:border-fg"
                    />
                    <span className="text-xs text-dim">days</span>
                  </div>

                  <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-1">Share Claude Code permissions</h3>
                  <p className="text-xs text-dim mb-3">
                    Symlink each worktree's{' '}
                    <code className="bg-panel-raised px-1 rounded text-[10px]">.claude/settings.local.json</code>{' '}
                    to the main worktree's copy so "Don't ask again"
                    permissions granted in any worktree apply everywhere.
                    Only takes effect for worktrees created while enabled
                    (plus a one-shot boot migration of existing ones).
                  </p>
                  <label className="flex items-center gap-3 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={shareClaudeSettings}
                      onChange={(e) => { void backend.setShareClaudeSettings(e.target.checked) }}
                      className="accent-current w-4 h-4 cursor-pointer"
                    />
                    <span className="text-sm text-fg">
                      Share settings.local.json across worktrees
                    </span>
                  </label>

                  <h3 className="text-sm font-semibold text-fg-bright mt-6 mb-1">PR review prompt</h3>
                  <p className="text-xs text-dim mb-3">
                    Default kickoff prompt sent to Claude when you open a PR as a worktree (or when the MCP{' '}
                    <code className="bg-panel-raised px-1 rounded text-[10px]">create_worktree</code> tool is invoked
                    with <code className="bg-panel-raised px-1 rounded text-[10px]">prNumber</code> and no explicit
                    prompt). You can edit the prompt per-PR from the New Worktree screen.
                  </p>
                  <textarea
                    value={prReviewPromptDraft}
                    onChange={(e) => setPrReviewPromptDraft(e.target.value)}
                    rows={5}
                    spellCheck={false}
                    className="w-full bg-panel border border-border-strong rounded px-3 py-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono resize-y"
                  />
                  <div className="flex items-center gap-2 mt-3">
                    <button
                      onClick={handleSavePrReviewPrompt}
                      className="px-3 py-1.5 bg-surface hover:bg-surface-hover rounded text-sm text-fg-bright transition-colors cursor-pointer"
                    >
                      Save
                    </button>
                    <button
                      onClick={handleResetPrReviewPrompt}
                      className="flex items-center gap-1 px-3 py-1.5 text-sm text-dim hover:text-fg transition-colors cursor-pointer"
                    >
                      <RotateCcw size={12} />
                      Reset to default
                    </button>
                  </div>
                  {prReviewPromptSaveResult && (
                    <div className={`mt-3 text-xs flex items-center gap-1.5 ${prReviewPromptSaveResult.ok ? 'text-success' : 'text-danger'}`}>
                      {prReviewPromptSaveResult.ok ? <Check size={12} /> : <X size={12} />}{prReviewPromptSaveResult.message}
                    </div>
                  )}
                </>
              )}

              {scopeRepoRoot !== null && (
                <div className="mt-6 pt-5 border-t border-border">
                  <label className="block text-sm text-fg-bright mb-1">Right-panel visibility</label>
                  <p className="text-xs text-dim">
                    Toggle individual panels from the right-column toolbar in the main window.
                  </p>
                </div>
              )}
            </section>

            {/* Editor section */}
            <section ref={(el) => { sectionRefs.current.editor = el }} id="editor">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Editor</h2>
              <p className="text-sm text-dim mb-4">
                Your preferred code editor. Harness uses this when you click
                "Open in editor" on a worktree, or click the edit icon on a
                changed file. The editor's CLI must be installed and on your
                shell PATH.
              </p>
              <div className="grid grid-cols-2 gap-2 mb-3">
                {availableEditors.map((ed) => {
                  const isActive = editorId === ed.id
                  return (
                    <button
                      key={ed.id}
                      onClick={() => handleSelectEditor(ed.id)}
                      className={`flex items-center gap-2 text-left rounded border px-3 py-2 text-sm transition-colors cursor-pointer ${
                        isActive
                          ? 'border-accent bg-panel-raised text-fg-bright'
                          : 'border-border hover:border-border-strong text-muted hover:text-fg'
                      }`}
                    >
                      <Code2 size={14} className={isActive ? 'text-accent' : 'text-faint'} />
                      <span className="flex-1">{ed.name}</span>
                      {isActive && <Check size={12} className="text-accent" />}
                    </button>
                  )
                })}
              </div>
              <p className="text-[11px] text-faint">
                Harness spawns the editor via a login shell (<code className="bg-panel-raised px-1 rounded text-[10px]">zsh -ilc</code>)
                so homebrew and nvm paths are picked up automatically. If nothing
                happens when you click "Open in editor", check that the selected
                editor's CLI is installed (e.g. VS Code's{' '}
                <code className="bg-panel-raised px-1 rounded text-[10px]">code</code> command,
                installed via <em>Shell Command: Install 'code' command in PATH</em> from
                the command palette).
              </p>
            </section>

            {/* GitHub section */}
            <section ref={(el) => { sectionRefs.current.github = el }} id="github">
              {(() => {
                const authed = hasToken || authSource === 'gh-cli'
                return (
              <>
              <h2 className={`text-lg font-semibold mb-1 ${!authed ? 'text-info' : 'text-fg-bright'}`}>GitHub</h2>
              <p className={`text-sm mb-4 ${!authed ? 'text-info/80' : 'text-dim'}`}>
                Harness fetches PR status and check results from GitHub. If you have the
                {' '}<code className="bg-panel-raised px-1 rounded">gh</code> CLI installed and authenticated,
                it'll be used automatically. Otherwise, paste a personal access token below — it'll be
                encrypted and stored locally using your macOS keychain.
              </p>

              {authed && harnessStarred !== null && (
                <label className="mb-4 flex items-center gap-2 cursor-pointer group">
                  <input
                    type="checkbox"
                    checked={harnessStarred}
                    onChange={(e) => { void backend.setHarnessStarred(e.target.checked) }}
                    className="w-3.5 h-3.5 accent-warning cursor-pointer"
                  />
                  <Star
                    size={14}
                    className={harnessStarred ? 'text-warning fill-warning shrink-0' : 'text-warning shrink-0'}
                  />
                  <span className="text-sm text-fg group-hover:text-fg-bright transition-colors">
                    Star Harness on GitHub
                  </span>
                </label>
              )}

              {authSource === 'gh-cli' && !hasToken && (
                <div className="mb-4 rounded-lg p-4 border bg-success/10 border-success/30">
                  <div className="flex items-center gap-2 text-sm text-success">
                    <Check size={14} />
                    <span>Using <code className="bg-panel-raised px-1 rounded">gh</code> CLI token (auto-detected)</span>
                  </div>
                  {!showPatForm && (
                    <button
                      onClick={() => setShowPatForm(true)}
                      className="mt-3 text-xs text-muted hover:text-fg-bright underline cursor-pointer"
                    >
                      Use a personal access token instead
                    </button>
                  )}
                </div>
              )}

              {(authSource !== 'gh-cli' || hasToken || showPatForm) && (
              <div className={`rounded-lg p-4 border ${!authed ? 'bg-info/10 border-info/30' : 'bg-panel-raised border-border'}`}>
                <label className="block text-sm font-medium text-fg mb-2">
                  Personal Access Token
                </label>

                {hasToken && (
                  <div className="flex items-center gap-2 mb-3 text-xs text-success">
                    <Check size={14} />
                    <span>A token is currently saved {authSource === 'pat' ? '(in use)' : ''}</span>
                  </div>
                )}

                <div className="relative mb-3">
                  <input
                    type={showToken ? 'text' : 'password'}
                    value={token}
                    onChange={(e) => setToken(e.target.value)}
                    placeholder={hasToken ? 'Enter a new token to replace the existing one' : 'ghp_... or github_pat_...'}
                    className="w-full bg-panel border border-border-strong rounded px-3 py-2 pr-10 text-sm text-fg-bright placeholder-faint outline-none focus:border-fg font-mono"
                  />
                  <button
                    onClick={() => setShowToken(!showToken)}
                    className="absolute right-2 top-1/2 -translate-y-1/2 text-dim hover:text-fg transition-colors cursor-pointer"
                  >
                    {showToken ? <EyeOff size={14} /> : <Eye size={14} />}
                  </button>
                </div>

                <div className="flex items-center gap-2">
                  <button
                    onClick={handleSave}
                    disabled={saving || !token.trim()}
                    className="px-3 py-1.5 bg-surface hover:bg-surface-hover disabled:opacity-40 rounded text-sm text-fg-bright transition-colors cursor-pointer"
                  >
                    {saving ? 'Validating...' : 'Save'}
                  </button>
                  {hasToken && (
                    <button
                      onClick={handleClear}
                      className="px-3 py-1.5 text-sm text-danger hover:text-danger transition-colors cursor-pointer"
                    >
                      Remove
                    </button>
                  )}
                </div>

                {tokenResult && (
                  <div className={`mt-3 text-xs flex items-center gap-1.5 ${tokenResult.ok ? 'text-success' : 'text-danger'}`}>
                    {tokenResult.ok ? <Check size={12} /> : <X size={12} />}
                    {tokenResult.message}
                  </div>
                )}
              </div>
              )}

              {(authSource !== 'gh-cli' || hasToken || showPatForm) && (
              <div className="mt-4 text-xs text-dim space-y-2">
                <p>
                  Create a token at{' '}
                  <a
                    onClick={() => backend.openExternal('https://github.com/settings/tokens?type=beta')}
                    className="text-muted hover:text-fg-bright underline cursor-pointer"
                  >
                    github.com/settings/tokens
                  </a>
                  {' '}(fine-grained) or{' '}
                  <a
                    onClick={() => backend.openExternal('https://github.com/settings/tokens')}
                    className="text-muted hover:text-fg-bright underline cursor-pointer"
                  >
                    classic tokens
                  </a>
                  .
                </p>
                <p>
                  Required scopes: <code className="bg-panel-raised px-1 rounded">repo</code> for private repos,
                  or <code className="bg-panel-raised px-1 rounded">public_repo</code> for public only.
                </p>
              </div>
              )}

              </>
                )
              })()}
            </section>

            {/* Hotkeys section */}
            <section ref={(el) => { sectionRefs.current.hotkeys = el }} id="hotkeys">
              <div className="flex items-start justify-between mb-1">
                <h2 className="text-lg font-semibold text-fg-bright">Hotkeys</h2>
                {hotkeyOverrides && Object.keys(hotkeyOverrides).length > 0 && (
                  <button
                    onClick={handleResetAllHotkeys}
                    className="flex items-center gap-1 text-xs text-dim hover:text-fg transition-colors cursor-pointer"
                  >
                    <RotateCcw size={11} />
                    Reset all to defaults
                  </button>
                )}
              </div>
              <p className="text-sm text-dim mb-4">
                Click a shortcut to rebind it. Press <kbd className="bg-panel-raised px-1 rounded text-[10px]">Esc</kbd> to cancel.
              </p>

              <div className="bg-panel-raised border border-border rounded-lg divide-y divide-border">
                {(Object.keys(DEFAULT_HOTKEYS) as Action[]).map((action) => {
                  const binding: HotkeyBinding = resolvedHotkeys[action]
                  const isRebinding = rebindingAction === action
                  const overridden = isOverridden(action)

                  return (
                    <div key={action} className="flex items-center justify-between px-3 py-2">
                      <span className="text-sm text-fg">{ACTION_LABELS[action]}</span>
                      <div className="flex items-center gap-2">
                        {overridden && (
                          <Tooltip label="Reset to default">
                            <button
                              onClick={() => handleResetHotkey(action)}
                              className="text-xs text-dim hover:text-fg transition-colors cursor-pointer"
                            >
                              <RotateCcw size={11} />
                            </button>
                          </Tooltip>
                        )}
                        <button
                          onClick={() => setRebindingAction(isRebinding ? null : action)}
                          className={`min-w-[100px] px-2.5 py-1 rounded text-xs font-mono transition-colors cursor-pointer ${
                            isRebinding
                              ? 'bg-warning/20 text-warning border border-warning/50 animate-pulse'
                              : 'bg-panel text-fg border border-border-strong hover:border-fg'
                          }`}
                        >
                          {isRebinding ? 'Press keys...' : bindingToString(binding)}
                        </button>
                      </div>
                    </div>
                  )
                })}
              </div>
            </section>

            {/* Updates section */}
            <section ref={(el) => { sectionRefs.current.updates = el }} id="updates">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Updates</h2>
              <p className="text-sm text-dim mb-4">
                {autoUpdateEnabled
                  ? 'Harness checks for updates automatically on startup and every 10 minutes.'
                  : 'Automatic update checks are disabled. Use the button below to check manually.'}
              </p>

              <div className="bg-panel-raised border border-border rounded-lg p-4">
                <div className="flex items-center justify-between mb-3">
                  <div>
                    <div className="text-sm text-fg">Current version</div>
                    <div className="text-xs text-dim font-mono mt-0.5">
                      {version ? (
                        <a
                          onClick={() => backend.openExternal(harnessReleaseNotesUrl(version))}
                          className="underline hover:text-fg-bright cursor-pointer"
                        >
                          {version}
                        </a>
                      ) : (
                        '...'
                      )}
                    </div>
                  </div>
                  <button
                    onClick={handleCheckForUpdates}
                    disabled={checking || updaterStatus?.state === 'checking' || updaterStatus?.state === 'downloading'}
                    className="flex items-center gap-1.5 px-3 py-1.5 bg-surface hover:bg-surface-hover disabled:opacity-40 rounded text-sm text-fg-bright transition-colors cursor-pointer"
                  >
                    <RefreshCw size={12} className={checking ? 'animate-spin' : ''} />
                    Check for updates
                  </button>
                </div>

                {renderUpdaterStatus() && (
                  <div className="pt-3 border-t border-border">
                    {renderUpdaterStatus()}
                  </div>
                )}

                {import.meta.env.DEV && (
                  <div className="mt-3 pt-3 border-t border-border">
                    <div className="text-[10px] uppercase tracking-wide text-faint mb-1.5">
                      Dev: simulate updater state
                    </div>
                    <div className="flex gap-1.5">
                      {(['available', 'downloading', 'downloaded', 'clear'] as const).map((s) => (
                        <button
                          key={s}
                          onClick={() => backend.devSimulateUpdate(s)}
                          className="px-2 py-1 bg-surface hover:bg-surface-hover rounded text-[11px] text-fg transition-colors cursor-pointer"
                        >
                          {s}
                        </button>
                      ))}
                    </div>
                  </div>
                )}

                <div className="mt-4 pt-3 border-t border-border">
                  <label className="flex items-start gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={autoUpdateEnabled}
                      onChange={(e) => handleToggleAutoUpdate(e.target.checked)}
                      className="mt-0.5 cursor-pointer"
                    />
                    <div className="flex-1">
                      <div className="text-sm text-fg-bright">Check for updates automatically</div>
                      <div className="text-xs text-dim mt-0.5">
                        When enabled, Harness checks for new releases on startup and every
                        10 minutes. Disable to only check when you press the button above.
                      </div>
                    </div>
                  </label>
                </div>
              </div>

              <div className="mt-3 text-xs text-dim">
                <a
                  onClick={() => backend.openExternal(HARNESS_RELEASES_URL)}
                  className="text-muted hover:text-fg-bright underline cursor-pointer"
                >
                  View all releases on GitHub
                </a>
              </div>
            </section>

            {/* Support section */}
            <section ref={(el) => { sectionRefs.current.support = el }} id="support">
              <h2 className="text-lg font-semibold text-fg-bright mb-1">Support</h2>
              <p className="text-sm text-dim mb-4">
                Found a bug or want to request a feature? Let us know on GitHub.
              </p>

              <div className="flex gap-2">
                <button
                  type="button"
                  onClick={() => openReportIssue({ kind: 'bug' })}
                  className="flex items-center gap-2 px-3 py-2 bg-panel-raised border border-border rounded-lg text-sm text-fg-bright hover:bg-surface transition-colors cursor-pointer"
                >
                  <Bug size={14} />
                  Report a bug
                </button>
                <button
                  type="button"
                  onClick={() => openReportIssue({ kind: 'feature' })}
                  className="flex items-center gap-2 px-3 py-2 bg-panel-raised border border-border rounded-lg text-sm text-fg-bright hover:bg-surface transition-colors cursor-pointer"
                >
                  <Lightbulb size={14} />
                  Request a feature
                </button>
              </div>

              <p className="mt-3 text-xs text-dim">
                Opens a prefilled GitHub issue in your browser. No data is sent from Harness directly.
              </p>

              <div className="mt-6 bg-panel-raised border border-border rounded-lg p-4">
                <label className="block text-sm font-medium text-fg mb-1">Diagnostics</label>
                <p className="text-xs text-dim mb-3">
                  Open the Harness debug log in your default editor. Useful when reporting issues or
                  diagnosing flaky behavior.
                </p>
                <div className="flex gap-2">
                  <button
                    type="button"
                    onClick={async () => {
                      setDebugLogError(null)
                      const result = await backend.openDebugLog()
                      if (!result.ok) setDebugLogError(result.message)
                    }}
                    className="flex items-center gap-2 px-3 py-2 bg-panel border border-border rounded-lg text-sm text-fg-bright hover:bg-surface transition-colors cursor-pointer"
                  >
                    <FileText size={14} />
                    Open debug log
                  </button>
                  <button
                    type="button"
                    onClick={() => {
                      setDebugLogError(null)
                      void backend.showDebugLogInFolder()
                    }}
                    className="flex items-center gap-2 px-3 py-2 bg-panel border border-border rounded-lg text-sm text-fg-bright hover:bg-surface transition-colors cursor-pointer"
                  >
                    <FolderOpen size={14} />
                    Show in Finder
                  </button>
                </div>
                {debugLogError && (
                  <p className="mt-2 text-xs text-danger">{debugLogError}</p>
                )}

                <label className="mt-4 pt-3 border-t border-border flex items-start gap-2 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={expandedDiagnosticLoggingEnabled}
                    onChange={(e) => { void backend.setExpandedDiagnosticLoggingEnabled(e.target.checked) }}
                    className="mt-0.5 cursor-pointer"
                  />
                  <div className="flex-1">
                    <div className="text-sm text-fg-bright">Expanded diagnostic logging</div>
                    <div className="text-xs text-dim mt-0.5">
                      Writes a <code className="bg-panel px-1 rounded">[github-api]</code> line to{' '}
                      <code className="bg-panel px-1 rounded">debug.log</code> for every GitHub API call
                      (URL, method, status, duration). Off by default — the per-call volume is high
                      during PR-refresh bursts. The HUD's "GH API" rate metric is always on regardless.
                    </div>
                  </div>
                </label>
              </div>
            </section>

            {/* Experimental section */}
            <section ref={(el) => { sectionRefs.current.experimental = el }} id="experimental">
              <h2 className="text-lg font-semibold text-fg-bright mb-1 flex items-center gap-2">
                <FlaskConical size={18} className="text-warning" />
                Experimental
              </h2>
              <p className="text-sm text-dim mb-4">
                These features are in active development. APIs and UI may change,
                and you should expect rough edges. Each one is opt-in below.{' '}
                <a
                  onClick={() => backend.openExternal(HARNESS_ISSUES_URL)}
                  className="text-muted hover:text-fg-bright underline cursor-pointer"
                >
                  File an issue
                </a>{' '}
                if something breaks.
              </p>

              {/* Browser control sub-card */}
              <div className="bg-panel-raised border border-warning/30 rounded-lg p-4 mb-4">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-sm font-semibold text-fg-bright">Browser control</h3>
                  <span className="text-[10px] font-medium text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Experimental
                  </span>
                </div>
                <p className="text-xs text-dim mb-3">
                  Lets agents see and drive the embedded browser tabs in each
                  worktree — screenshotting, clicking, typing, navigating.
                  Only takes effect on the next agent session.
                </p>

                <div className="flex items-start gap-3">
                  <input
                    type="checkbox"
                    id="browser-tools-enabled"
                    checked={browserToolsEnabled}
                    onChange={(e) => { void backend.setBrowserToolsEnabled(e.target.checked) }}
                    className="mt-0.5 cursor-pointer"
                  />
                  <div className="flex-1">
                    <label htmlFor="browser-tools-enabled" className="text-sm text-fg-bright cursor-pointer">Enable browser tools</label>
                    <div className="text-xs text-dim mt-0.5 mb-2">
                      Exposes <code className="bg-panel px-1 rounded text-[10px]">harness-control</code> MCP browser_* tools to the agent.
                    </div>
                    <select
                      value={browserToolsMode}
                      onChange={(e) => { void backend.setBrowserToolsMode(e.target.value === 'view' ? 'view' : 'full') }}
                      disabled={!browserToolsEnabled}
                      className="bg-panel border border-border-strong rounded px-2 py-1 text-xs text-fg-bright outline-none focus:border-fg cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                    >
                      <option value="view">View Only — inspect &amp; navigate, no clicks/typing/scrolling</option>
                      <option value="full">Full Control — click, type, scroll, and move the cursor</option>
                    </select>
                  </div>
                </div>
              </div>

              {/* Auto-approve safe tool calls sub-card */}
              <div className="bg-panel-raised border border-warning/30 rounded-lg p-4 mb-4">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-sm font-semibold text-fg-bright">Auto-approve safe tool calls</h3>
                  <span className="text-[10px] font-medium text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Experimental
                  </span>
                </div>
                <p className="text-xs text-dim mb-3">
                  In Chat tabs, spawns a Haiku oneshot to approve obviously-safe tool calls (Read, Grep, Edit, …) instead of prompting you. A hardcoded deny-list catches risky calls (<code className="bg-panel px-1 rounded text-[10px]">rm -rf</code>, <code className="bg-panel px-1 rounded text-[10px]">git push</code>, <code className="bg-panel px-1 rounded text-[10px]">WebFetch</code>, …) before Haiku is consulted. Productivity feature only — an LLM judging another LLM is not a security boundary. Has no effect on Terminal tabs.
                </p>

                <label className="flex items-start gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={autoApprovePermissions}
                    onChange={(e) => handleToggleAutoApprovePermissions(e.target.checked)}
                    className="mt-0.5 cursor-pointer"
                  />
                  <div className="flex-1">
                    <div className="text-sm text-fg-bright">Enable auto-approve</div>
                    <div className="text-xs text-dim mt-0.5">
                      Manual Allow/Deny still works at any time and wins the race against the reviewer.
                    </div>
                  </div>
                </label>

                {autoApprovePermissions && (
                  <div className="mt-4 pt-3 border-t border-border">
                    <label className="block text-xs font-medium text-fg mb-1">
                      Project-specific guidance <span className="text-faint font-normal">(optional)</span>
                    </label>
                    <p className="text-[11px] text-dim mb-2">
                      Free-text instructions appended to the reviewer's policy prompt. Use to add carve-outs (e.g. <em>&quot;approve <code className="bg-panel px-1 rounded text-[10px]">npm install</code> for this project&quot;</em>) or extra strictness (e.g. <em>&quot;deny any Bash that writes outside src/&quot;</em>). The hardcoded safety bullets always run first; this is purely additive guidance. You can also edit + re-review from any rejected approval card.
                    </p>
                    <textarea
                      value={autoApproveSteerDraft}
                      onChange={(e) => setAutoApproveSteerDraft(e.target.value)}
                      placeholder="e.g. Approve npm install. Deny any Bash command that touches /etc."
                      spellCheck={false}
                      className="w-full bg-panel border border-border-strong rounded p-2 text-xs text-fg-bright placeholder-faint outline-none focus:border-fg font-mono min-h-[80px] resize-y"
                    />
                    <div className="mt-2 flex items-center gap-2">
                      <button
                        onClick={handleSaveAutoApproveSteer}
                        disabled={autoApproveSteerDraft === autoApproveSteerInstructions}
                        className="px-2.5 py-1 text-xs rounded bg-success/20 hover:bg-success/30 text-success transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                      >
                        Save guidance
                      </button>
                      {autoApproveSteerSaveResult && (
                        <span
                          className={`text-[11px] flex items-center gap-1 ${autoApproveSteerSaveResult.ok ? 'text-success' : 'text-danger'}`}
                        >
                          {autoApproveSteerSaveResult.ok ? <Check size={11} /> : <X size={11} />}
                          {autoApproveSteerSaveResult.message}
                        </span>
                      )}
                    </div>
                  </div>
                )}
              </div>

              {/* Web / mobile client sub-card */}
              <div className="bg-panel-raised border border-warning/30 rounded-lg p-4">
                <div className="flex items-center gap-2 mb-1">
                  <h3 className="text-sm font-semibold text-fg-bright">Web &amp; mobile client</h3>
                  <span className="text-[10px] font-medium text-warning bg-warning/10 border border-warning/30 rounded px-1.5 py-0.5">
                    Experimental
                  </span>
                </div>
                <p className="text-xs text-dim mb-3">
                  Runs an HTTP + WebSocket server alongside the desktop app so
                  you can open the same workspace from a browser — useful for a
                  second laptop or a phone on the same network. Token-gated;
                  no TLS yet.
                </p>

                <label className="flex items-start gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={wsTransportEnabled}
                    onChange={(e) => { void handleToggleWsTransport(e.target.checked) }}
                    className="mt-0.5 cursor-pointer"
                  />
                  <div className="flex-1">
                    <div className="text-sm text-fg-bright">Enable web / mobile client</div>
                    <div className="text-xs text-dim mt-0.5">
                      Changes apply on the next app launch.
                    </div>
                  </div>
                </label>

                {wsTransportEnabled && (
                  <>
                    <div className="mt-4 pt-3 border-t border-border grid grid-cols-[1fr_auto] gap-3">
                      <div>
                        <label className="block text-xs font-medium text-fg mb-1">Port</label>
                        <div className="flex items-center gap-2">
                          <input
                            type="number"
                            min={1024}
                            max={65535}
                            value={wsPortDraft}
                            onChange={(e) => setWsPortDraft(e.target.value)}
                            onBlur={handleSaveWsPort}
                            className="w-28 bg-panel border border-border-strong rounded px-2 py-1 text-xs text-fg-bright outline-none focus:border-fg font-mono"
                          />
                          <span className="text-[11px] text-faint">default 37291</span>
                        </div>
                      </div>
                      <div>
                        <label className="block text-xs font-medium text-fg mb-1">Bind to</label>
                        <select
                          value={wsTransportHost}
                          onChange={(e) => { void handleSelectWsHost(e.target.value) }}
                          className="bg-panel border border-border-strong rounded px-2 py-1 text-xs text-fg-bright outline-none focus:border-fg cursor-pointer"
                        >
                          <option value="127.0.0.1">This machine only (loopback)</option>
                          <option value="0.0.0.0">LAN — other devices on this network</option>
                        </select>
                      </div>
                    </div>

                    <div className="mt-4 pt-3 border-t border-border">
                      <label className="block text-xs font-medium text-fg mb-1">Connection URL</label>
                      <div className="flex items-center gap-2">
                        <code className="flex-1 bg-panel border border-border rounded px-2 py-1.5 text-[11px] text-fg-bright font-mono truncate">
                          {showWsToken ? wsUrl : wsUrlMasked}
                        </code>
                        <Tooltip label={showWsToken ? 'Hide token' : 'Show token'}>
                          <button
                            onClick={() => setShowWsToken((v) => !v)}
                            disabled={!wsInfo}
                            className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                          >
                            {showWsToken ? <EyeOff size={14} /> : <Eye size={14} />}
                          </button>
                        </Tooltip>
                        <Tooltip label={wsUrlCopied ? 'Copied' : 'Copy URL'}>
                          <button
                            onClick={handleCopyWsUrl}
                            disabled={!wsInfo}
                            className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                          >
                            {wsUrlCopied ? <Check size={14} className="text-success" /> : <Copy size={14} />}
                          </button>
                        </Tooltip>
                        <Tooltip label="Open in browser">
                          <button
                            onClick={handleOpenWsUrl}
                            disabled={!wsInfo}
                            className="p-1.5 text-dim hover:text-fg transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                          >
                            <ExternalLink size={14} />
                          </button>
                        </Tooltip>
                        <Tooltip label="Rotate token (invalidates existing URLs)">
                          <button
                            onClick={() => { void handleRotateWsToken() }}
                            disabled={!wsInfo}
                            className="p-1.5 text-dim hover:text-warning transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                          >
                            <RotateCcw size={14} />
                          </button>
                        </Tooltip>
                      </div>
                    </div>

                    {wsTransportHost === '0.0.0.0' && (
                      <div className="mt-4 pt-3 border-t border-border">
                        <p className="text-xs text-fg mb-3">
                          <span className="font-medium text-warning">LAN mode:</span>{' '}
                          any device on your network can connect if they have
                          the URL below. The 32-byte token is the only thing
                          gating access — only enable on trusted networks,
                          never over the public internet.
                        </p>

                        {scannableLanUrl ? (
                          <div className="flex gap-4 items-start">
                            <div className="bg-white p-2 rounded shrink-0">
                              <QRCodeSVG value={scannableLanUrl} size={128} level="M" />
                            </div>
                            <div className="flex-1 min-w-0 text-xs text-dim space-y-2">
                              <p>
                                Scan with your phone's camera to open in
                                Safari or your default browser.
                              </p>
                              {lanAddresses.length > 1 && (
                                <div>
                                  <label className="block text-[11px] font-medium text-fg mb-1">Interface</label>
                                  <select
                                    value={selectedLanAddress ?? ''}
                                    onChange={(e) => setSelectedLanAddress(e.target.value)}
                                    className="w-full bg-panel border border-border-strong rounded px-2 py-1 text-[11px] text-fg-bright outline-none focus:border-fg cursor-pointer font-mono"
                                  >
                                    {lanAddresses.map((a) => (
                                      <option key={a.iface + a.address} value={a.address}>
                                        {a.iface} — {a.address}
                                      </option>
                                    ))}
                                  </select>
                                </div>
                              )}
                              <p className="font-mono text-[10px] break-all text-fg">
                                http://{selectedLanAddress}:{wsInfo?.port}/
                              </p>
                            </div>
                          </div>
                        ) : wsInfo ? (
                          <p className="text-xs text-dim italic">
                            No LAN network interface detected on this machine.
                          </p>
                        ) : (
                          <p className="text-xs text-dim italic">
                            QR code will appear here after you relaunch
                            Harness with the server enabled.
                          </p>
                        )}
                      </div>
                    )}
                  </>
                )}

                {wsNeedsRestart && (
                  <div className="mt-4 pt-3 border-t border-border flex items-center gap-2">
                    <RefreshCw size={12} className="text-warning shrink-0" />
                    <p className="text-xs text-warning">{wsNeedsRestart}</p>
                  </div>
                )}
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  )
}

interface ThemeModePickerProps {
  title: string
  hint: string
  builtIns: ThemeOption[]
  customs: CustomTheme[]
  activeId: string
  disabled: boolean
  onSelect: (id: string) => void
}

/** A swatch carrying a stable identifier — used as the React key so
 *  duplicate hexes (e.g. when a theme has the same color for two roles)
 *  don't collide, and reordering can't shuffle component state. */
interface Swatch {
  /** Stable semantic role: 'app' | 'surface' | 'fg' | 'accent' for
   *  built-ins; arbitrary semantic color key for customs. */
  role: string
  color: string
}

/** Roles shown in the small swatch row next to each theme name. Stable
 *  across themes so a reorder doesn't shuffle keys. */
const SWATCH_ROLES = ['app', 'surface', 'fg', 'accent'] as const

function builtInSwatches(opt: ThemeOption): Swatch[] {
  // THEME_OPTIONS.swatches is positional: [app, surface, fg, accent].
  const out: Swatch[] = []
  SWATCH_ROLES.forEach((role, i) => {
    const color = opt.swatches[i]
    if (typeof color === 'string') out.push({ role, color })
  })
  return out
}

function customSwatches(c: CustomTheme): Swatch[] {
  const out: Swatch[] = []
  for (const role of SWATCH_ROLES) {
    const v = c.colors[role]
    if (typeof v === 'string') out.push({ role, color: v })
  }
  return out
}

function readBuiltInThemeJson(opt: ThemeOption): string {
  const probe = document.createElement('div')
  probe.dataset.theme = opt.id
  probe.style.display = 'none'
  document.body.appendChild(probe)
  try {
    const cs = getComputedStyle(probe)
    const colors: Record<string, string> = {}
    for (const key of SEMANTIC_KEYS) {
      const v = cs.getPropertyValue(`--color-${key}`).trim()
      if (v) colors[key] = v
    }
    return JSON.stringify({ name: opt.label, mode: opt.mode, colors }, null, 2) + '\n'
  } finally {
    probe.remove()
  }
}

function ThemeRow({
  id,
  label,
  description,
  swatches,
  isActive,
  onSelect,
  onCopy,
  copied
}: {
  id: string
  label: string
  description: string
  swatches: Swatch[]
  isActive: boolean
  onSelect: (id: string) => void
  onCopy?: () => void
  copied?: boolean
}): JSX.Element {
  return (
    <button
      type="button"
      onClick={() => onSelect(id)}
      className={`group w-full flex items-center gap-3 px-4 py-3 text-left transition-colors cursor-pointer ${
        isActive ? 'bg-surface' : 'hover:bg-surface/60'
      }`}
    >
      <div className="flex gap-1 shrink-0">
        {swatches.length === 0 ? (
          <span className="w-4 h-4 rounded border border-border-strong bg-panel" />
        ) : (
          swatches.map((s) => (
            <span
              key={s.role}
              className="w-4 h-4 rounded border border-border-strong"
              style={{ backgroundColor: s.color }}
            />
          ))
        )}
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-sm text-fg">{label}</div>
        <div className="text-xs text-dim truncate">{description}</div>
      </div>
      {onCopy && (
        <Tooltip label={copied ? 'Copied!' : 'Copy as JSON'} side="left">
          <span
            role="button"
            tabIndex={0}
            onClick={(e) => { e.stopPropagation(); onCopy() }}
            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onCopy() } }}
            className={`shrink-0 text-dim hover:text-fg transition-opacity cursor-pointer p-1 ${
              copied ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 focus:opacity-100'
            }`}
          >
            {copied ? <CopyCheck size={14} /> : <Copy size={14} />}
          </span>
        </Tooltip>
      )}
      {isActive && <Check size={14} className="text-success shrink-0" />}
    </button>
  )
}

function ThemeModePicker({
  title,
  hint,
  builtIns,
  customs,
  activeId,
  disabled,
  onSelect
}: ThemeModePickerProps): JSX.Element {
  const [copiedId, setCopiedId] = useState<string | null>(null)
  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  useEffect(() => {
    return () => {
      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current)
    }
  }, [])
  const handleCopy = (opt: ThemeOption): void => {
    const json = readBuiltInThemeJson(opt)
    void navigator.clipboard.writeText(json)
    if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current)
    setCopiedId(opt.id)
    copiedTimerRef.current = setTimeout(() => {
      setCopiedId(null)
      copiedTimerRef.current = null
    }, 1500)
  }
  return (
    <div className={disabled ? 'opacity-50' : ''}>
      <h3 className="text-sm font-semibold text-fg-bright mb-1">{title}</h3>
      <p className="text-xs text-dim mb-2">{hint}</p>
      <div className="bg-panel-raised border border-border rounded-lg divide-y divide-border">
        {builtIns.map((opt) => (
          <ThemeRow
            key={opt.id}
            id={opt.id}
            label={opt.label}
            description={opt.description}
            swatches={builtInSwatches(opt)}
            isActive={activeId === opt.id}
            onSelect={onSelect}
            onCopy={() => handleCopy(opt)}
            copied={copiedId === opt.id}
          />
        ))}
        {customs.map((c) => (
          <ThemeRow
            key={c.id}
            id={c.id}
            label={c.name}
            description={`Custom theme · ${c.id}`}
            swatches={customSwatches(c)}
            isActive={activeId === c.id}
            onSelect={onSelect}
          />
        ))}
      </div>
    </div>
  )
}