'use client' import { useCallback, useEffect, useRef, useState } from 'react' import { Button } from '@/components/ui/button' import { apiFetch, ApiError } from '@/lib/api-client' interface RuntimeSetupModalProps { runtime: 'openclaw' | 'hermes' | 'claude' | 'codex' | 'opencode' onClose: () => void onComplete: () => void } export function RuntimeSetupModal({ runtime, onClose, onComplete }: RuntimeSetupModalProps) { const SetupComponent = { openclaw: OpenClawSetup, hermes: HermesSetup, claude: ClaudeSetup, codex: CodexSetup, opencode: OpenCodeSetup, }[runtime] return (

{ if (e.target === e.currentTarget) onClose() }}>

) } function OpenCodeSetup({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) { return (

Set Up OpenCode

OpenCode is detected locally and sessions are read from its local SQLite state store.

Mission Control reads OpenCode runtime status from the installed opencode CLI and scans session history from ~/.local/share/opencode/*.db.

Restart OpenCode or create a new OpenCode session if you want Mission Control to pick up fresh session activity immediately.

) } // ─── OpenClaw Setup ────────────────────────────────────────────────────── function OpenClawSetup({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) { const [step, setStep] = useState<'onboard' | 'verify' | 'done'>('onboard') const [running, setRunning] = useState(false) const [output, setOutput] = useState('') const [error, setError] = useState(null) const [healthStatus, setHealthStatus] = useState(null) const runOnboard = useCallback(async () => { setRunning(true) setError(null) setOutput('') try { // The install result is intentionally ignored (same as the original // raw-fetch behavior, which checked neither .ok nor the body). The // onboard command runs as part of post-install in agent-runtimes.ts. // Swallow any error so we always proceed to the doctor health check. try { await apiFetch('/api/agent-runtimes', { method: 'POST', body: JSON.stringify({ action: 'install', runtime: 'openclaw', mode: 'local' }), }) } catch { // ignore — original code never inspected the install response } // Use the doctor endpoint to check health. try { const data = await apiFetch<{ healthy?: boolean; issues?: string[] }>('/api/openclaw/doctor') setHealthStatus(data) if (data.healthy) { setStep('done') } else { setStep('verify') setOutput(data.issues?.join('\n') || 'Some issues detected') } } catch (doctorErr) { // Preserve graceful degradation: a non-ok doctor response previously // fell through to the verify step rather than surfacing an error. if (doctorErr instanceof ApiError) { setStep('verify') } else { throw doctorErr } } } catch (err) { setError(err instanceof Error ? err.message : 'Setup failed') } finally { setRunning(false) } }, []) const runDoctorFix = useCallback(async () => { setRunning(true) setError(null) try { const data = await apiFetch<{ success?: boolean; output?: string }>('/api/openclaw/doctor', { method: 'POST' }) if (data.success) { setStep('done') setOutput('All issues resolved') } else { setOutput(data.output || 'Fix attempt completed with warnings') } } catch (err) { // Preserve graceful degradation: a non-ok response previously did // nothing (no error surfaced), so swallow ApiError here. Only genuine // failures (e.g. network) surface an error, as before. if (err instanceof ApiError) { // no-op — matches the original `if (res.ok)` with no else branch } else { setError(err instanceof Error ? err.message : 'Doctor fix failed') } } finally { setRunning(false) } }, []) const checkHealth = useCallback(async () => { try { const data = await apiFetch<{ healthy?: boolean }>('/api/openclaw/doctor') setHealthStatus(data) if (data.healthy) setStep('done') } catch { // ignore — a non-ok/failed health check leaves state untouched, // matching the original `if (res.ok)` guard with an empty catch. } }, []) useEffect(() => { checkHealth() }, [checkHealth]) return (

Set Up OpenClaw

Configure the gateway and verify connectivity

{/* Step indicators */}

{(['onboard', 'verify', 'done'] as const).map((s, i) => (

i) ? 'bg-green-500/20 text-green-400' : 'bg-secondary text-muted-foreground' }`}> {(['onboard', 'verify', 'done'].indexOf(step) > i) ? ( ) : i + 1}

{i < 2 &&

i) ? 'bg-green-500/40' : 'bg-border/30'}`} />}

))}

{step === 'onboard' && (

Health Check

Run OpenClaw doctor to check gateway configuration and connectivity.

{error &&

{error}

} {healthStatus?.healthy && (

OpenClaw is healthy and properly configured.

)}

)} {step === 'verify' && (

Issues Detected

{healthStatus?.issues?.map((issue: string, i: number) => (

- {issue}

))} {output &&

{output}

}

{error &&

{error}

}

)} {step === 'done' && (

OpenClaw is ready

Gateway is configured and healthy. Agents can now connect.

)}

) } // ─── Hermes Setup ──────────────────────────────────────────────────────── function HermesSetup({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) { const [step, setStep] = useState<'hook' | 'provider' | 'identity' | 'gateway' | 'ready'>('hook') const [running, setRunning] = useState(false) const [error, setError] = useState(null) const [hermesStatus, setHermesStatus] = useState(null) const [providerKey, setProviderKey] = useState('') const [providerType, setProviderType] = useState<'anthropic' | 'openai' | 'openrouter' | 'nous' | 'google' | 'xai'>('anthropic') const [selectedModel, setSelectedModel] = useState('claude-sonnet-4-6') const [customModel, setCustomModel] = useState('') const [authMethod, setAuthMethod] = useState<'api_key' | 'device_code'>('api_key') const [oauthBusy, setOauthBusy] = useState(false) const [oauthOutput, setOauthOutput] = useState(null) const [oauthError, setOauthError] = useState(null) const [oauthUrl, setOauthUrl] = useState(null) const [oauthCode, setOauthCode] = useState(null) const [providerSaved, setProviderSaved] = useState(false) const [soulContent, setSoulContent] = useState('') const oauthOutputRef = useRef(null) const oauthStickToBottomRef = useRef(true) const [showOauthJump, setShowOauthJump] = useState(false) const syncOauthScrollState = useCallback(() => { const el = oauthOutputRef.current if (!el) return const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight const atBottom = distanceFromBottom < 12 oauthStickToBottomRef.current = atBottom setShowOauthJump(!atBottom) }, []) useEffect(() => { const el = oauthOutputRef.current if (!el || !oauthOutput) return if (oauthStickToBottomRef.current) { el.scrollTop = el.scrollHeight setShowOauthJump(false) return } syncOauthScrollState() }, [oauthOutput, syncOauthScrollState]) const resetOAuthState = useCallback(() => { setOauthBusy(false) setOauthOutput(null) setOauthError(null) setOauthUrl(null) setOauthCode(null) oauthStickToBottomRef.current = true setShowOauthJump(false) }, []) const fetchStatus = useCallback(async () => { try { const data = await apiFetch<{ hookInstalled?: boolean }>('/api/hermes') setHermesStatus(data) if (data.hookInstalled && step === 'hook') { setStep('provider') } } catch { // ignore — a non-ok/failed status fetch leaves state untouched, // matching the original `if (res.ok)` guard with an empty catch. } }, [step]) useEffect(() => { fetchStatus() }, [fetchStatus]) useEffect(() => { if (providerType !== 'openai' && authMethod !== 'api_key') { setAuthMethod('api_key') } }, [providerType, authMethod]) useEffect(() => { if (step !== 'provider') resetOAuthState() }, [step, resetOAuthState]) useEffect(() => { if (authMethod !== 'device_code') resetOAuthState() }, [authMethod, resetOAuthState]) const installHook = useCallback(async () => { setRunning(true) setError(null) try { // On success apiFetch returns the parsed body (unused here, as before). // On a non-ok response apiFetch throws ApiError with the parsed body in // `payload`; we re-surface `payload.error` to preserve the original // "data.error || 'Failed to install hook'" message. await apiFetch('/api/hermes', { method: 'POST', body: JSON.stringify({ action: 'install-hook' }), }) await fetchStatus() setStep('provider') } catch (err) { if (err instanceof ApiError) { const payload = err.payload const bodyError = typeof payload === 'object' && payload !== null && 'error' in payload && typeof (payload as { error: unknown }).error === 'string' ? (payload as { error: string }).error : null setError(bodyError || 'Failed to install hook') } else { setError(err instanceof Error ? err.message : 'Failed to install hook') } } finally { setRunning(false) } }, [fetchStatus]) return (

Set Up Hermes

Connect Hermes agent to Mission Control

{/* Step indicators */} {(() => { const steps = ['hook', 'provider', 'identity', 'gateway', 'ready'] as const const currentIdx = steps.indexOf(step) const labels = ['Hook', 'Provider', 'Identity', 'Gateway', 'Ready'] return (

{steps.map((s, i) => (

i ? 'bg-green-500/20 text-green-400' : 'bg-secondary text-muted-foreground/50' }`}> {currentIdx > i ? ( ) : i + 1}

{labels[i]} {i < steps.length - 1 &&

i ? 'bg-green-500/40' : 'bg-border/20'}`} />}

))}

) })()} {step === 'hook' && (

Install Mission Control Hook

This installs a hook in ~/.hermes/hooks/mission-control/ that reports agent activity, session events, and status updates to Mission Control.

The hook will:

Register Hermes agents automatically on start
Report session lifecycle events
Enable task dispatching from Mission Control

{hermesStatus && !hermesStatus.hookInstalled && (

Hook is not installed yet.

)} {hermesStatus?.hookInstalled && (

Hook is already installed.

)} {error &&

{error}

}

{hermesStatus?.hookInstalled ? ( ) : ( )}

)} {step === 'provider' && (

Configure LLM Provider

Hermes needs an API key to talk to an LLM. Choose your provider:

{(() => { const PROVIDERS = [ { id: 'anthropic', label: 'Anthropic', hint: 'Claude', env: 'ANTHROPIC_API_KEY', hermesProvider: 'anthropic', models: ['claude-sonnet-4-6', 'claude-opus-4-6', 'claude-haiku-4-5', 'claude-sonnet-4-5'] }, { id: 'openai', label: 'OpenAI', hint: 'GPT / o-series / Codex', env: 'OPENAI_API_KEY', hermesProvider: 'openai-codex', oauthHermesProvider: 'openai-codex', supportsDeviceCode: true, models: ['gpt-4.1', 'gpt-4.1-mini', 'gpt-4.1-nano', 'o3', 'o4-mini', 'codex-mini-latest', 'gpt-5.3-codex'] }, { id: 'openrouter', label: 'OpenRouter', hint: '200+ models', env: 'OPENROUTER_API_KEY', hermesProvider: 'openrouter', models: ['anthropic/claude-sonnet-4-6', 'openai/gpt-4.1', 'google/gemini-2.5-pro', 'meta-llama/llama-4-maverick', 'deepseek/deepseek-r1'] }, { id: 'google', label: 'Google AI', hint: 'Gemini', env: 'GOOGLE_API_KEY', hermesProvider: 'google', models: ['gemini-2.5-pro', 'gemini-2.5-flash', 'gemini-2.0-flash'] }, { id: 'nous', label: 'Nous Portal', hint: 'Free tier', env: 'NOUS_API_KEY', hermesProvider: 'nous', models: ['hermes-3-llama-3.1-70b', 'hermes-3-llama-3.1-8b', 'deephermes-3-llama-3.3-70b'] }, { id: 'xai', label: 'xAI', hint: 'Grok', env: 'XAI_API_KEY', hermesProvider: 'xai', models: ['grok-3', 'grok-3-mini', 'grok-2'] }, ] as const const currentProvider = PROVIDERS.find(p => p.id === providerType) const providerModels = currentProvider?.models || [] const supportsDeviceCode = Boolean(currentProvider && 'supportsDeviceCode' in currentProvider && currentProvider.supportsDeviceCode) const usesDeviceCode = supportsDeviceCode && authMethod === 'device_code' const hermesProviderName = (usesDeviceCode ? (currentProvider && 'oauthHermesProvider' in currentProvider ? currentProvider.oauthHermesProvider : currentProvider?.hermesProvider) : currentProvider?.hermesProvider) || 'anthropic' return (<> {/* Provider cards */}

{PROVIDERS.map((p) => ( ))}

{/* Model grid */}

Model

{providerModels.map((m) => ( ))}

{ setCustomModel(e.target.value); if (e.target.value) setSelectedModel(e.target.value) }} placeholder="Custom model..." className="w-full h-6 rounded border border-border/20 bg-black/10 px-2 text-[10px] text-foreground font-mono placeholder:text-muted-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30" />

{/* Apply config */}

{/* Authorization method */} {supportsDeviceCode && (

)} {usesDeviceCode ? (

Device authentication

No API key needed. Start auth, open the link, paste the code, then return here while terminal waits for completion.

{oauthUrl && ( Open device login link )} {oauthCode && (

Device code

{oauthCode}

)} {oauthBusy &&

Waiting for authentication confirmation...

} {oauthOutput && (

                    {oauthOutput}

{showOauthJump && ( )}

)} {oauthError &&

{oauthError}

}

) : (

{currentProvider?.label} API Key setProviderKey(e.target.value)} placeholder={`sk-...`} className="w-full h-9 rounded border border-border/30 bg-surface-1 px-2.5 text-xs text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/30 font-mono" />

Saved to ~/.hermes/.env

)} ) })()} {providerSaved && authMethod !== 'device_code' && (

Provider key saved successfully.

)} {error &&

{error}

}

)} {step === 'identity' && (

Agent Identity (Optional)

Customize how Hermes communicates. This is saved as ~/.hermes/SOUL.md

setSoulContent(e.target.value)}
            placeholder="Example: You are a concise technical expert who communicates clearly and directly. You focus on actionable solutions."
            rows={4}
            className="w-full rounded border border-border/40 bg-surface-1 px-3 py-2 text-xs text-foreground placeholder:text-muted-foreground/30 focus:outline-none focus:ring-1 focus:ring-primary/30 resize-none"
          />

<p className="text-[10px] text-muted-foreground/40">
            Leave blank to use the default personality. You can change this anytime.
          </p>

{error && <p className="text-xs text-red-400">{error}</p>}

<div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={() => setStep('provider')}>Back</Button>
            <Button
              size="sm"
              onClick={async () => {
                if (soulContent.trim()) {
                  try {
                    await apiFetch('/api/hermes', {
                      method: 'POST',
                      body: JSON.stringify({ action: 'set-soul', content: soulContent }),
                    })
                  } catch {
                    // non-critical — result was never inspected; swallow any
                    // error (including apiFetch's throw on non-ok) as before.
                  }
                }
                setStep('gateway')
              }}
            >
              {soulContent.trim() ? 'Save & Continue' : 'Skip'}
            </Button>
          </div>
        </div>
      )}

{step === 'gateway' && (
        <div className="space-y-4">
          <div>
            <p className="text-sm font-medium mb-1">Gateway & Channels</p>
            <p className="text-xs text-muted-foreground">
              The gateway lets you talk to Hermes from Telegram, Discord, Slack, WhatsApp, and Signal.
            </p>
          </div>

<div className="p-3 rounded-lg border border-border/20 bg-secondary/10 text-xs space-y-2.5">
            <p className="font-medium text-foreground/80">Set up messaging channels:</p>

<div className="space-y-2.5">
              <CopyableCommand command="hermes status" label="Check status" runnable />
              <CopyableCommand command="hermes doctor" label="Diagnose" runnable />
              <p className="text-[10px] text-muted-foreground/50 mt-2">
                The messaging gateway requires an interactive terminal to configure platforms (Telegram, Discord, Slack, WhatsApp, Signal).
                Run in a terminal:
              </p>
              <div className="bg-black/20 rounded px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground/60 space-y-0.5">
                <p>$ hermes gateway setup  <span className="text-muted-foreground/30"># configure platforms</span></p>
                <p>$ hermes gateway run    <span className="text-muted-foreground/30"># start in foreground (Docker, no systemd)</span></p>
                <p>$ hermes gateway start  <span className="text-muted-foreground/30"># install as service (bare metal, requires systemd)</span></p>
              </div>
            </div>

<div className="mt-2 pt-2 border-t border-border/10">
              <p className="text-muted-foreground/50 text-[10px]">
                Supported: Telegram, Discord, Slack, WhatsApp, Signal, Email.
                Each platform needs a bot token — run gateway setup for guided configuration.
              </p>
            </div>
          </div>

<div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={() => setStep('identity')}>Back</Button>
            <Button size="sm" onClick={() => { fetchStatus(); setStep('ready') }}>
              {hermesStatus?.gatewayRunning ? 'Continue' : 'Skip for now'}
            </Button>
          </div>
        </div>
      )}

{step === 'ready' && (
        <div className="space-y-4">
          <div className="p-5 rounded-lg border border-green-500/30 bg-green-500/5 text-center space-y-3">
            <div className="text-3xl">+</div>
            <p className="text-sm font-semibold text-green-400">Hermes is ready</p>
            <p className="text-xs text-muted-foreground">
              Hook installed{providerSaved ? ', provider configured' : ''}{soulContent.trim() ? ', identity set' : ''}.
              {hermesStatus?.cronJobCount > 0 && ` ${hermesStatus.cronJobCount} cron jobs detected.`}
            </p>
          </div>

<div className="p-3 rounded-lg border border-border/20 bg-secondary/10 text-xs space-y-3">
            <p className="font-medium text-foreground/80">Quick commands:</p>
            <CopyableCommand command="hermes status" label="Check status" runnable />
            <CopyableCommand command="hermes doctor" label="Diagnose" runnable />
            <CopyableCommand command="hermes version" label="Version" runnable />
          </div>

<div className="flex justify-end">
            <Button size="sm" onClick={onComplete}>Done</Button>
          </div>
        </div>
      )}

</div>
  )
}

function CopyableCommand({ command, label, runnable = false, onOutput }: {
  command: string
  label: string
  runnable?: boolean
  onOutput?: (output: string) => void
}) {
  const [copied, setCopied] = useState(false)
  const [running, setRunning] = useState(false)
  const [output, setOutput] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const outputRef = useRef<HTMLDivElement | null>(null)
  const outputStickToBottomRef = useRef(true)
  const [showOutputJump, setShowOutputJump] = useState(false)

const syncOutputScrollState = useCallback(() => {
    const el = outputRef.current
    if (!el) return
    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight
    const atBottom = distanceFromBottom < 12
    outputStickToBottomRef.current = atBottom
    setShowOutputJump(!atBottom)
  }, [])

useEffect(() => {
    const el = outputRef.current
    if (!el || !output) return
    if (outputStickToBottomRef.current) {
      el.scrollTop = el.scrollHeight
      setShowOutputJump(false)
      return
    }
    syncOutputScrollState()
  }, [output, syncOutputScrollState])

return (
    <div className="space-y-1">
      <div className="flex items-center gap-2">
        <div className="flex-1 bg-black/20 rounded px-2.5 py-1.5 font-mono text-[11px] flex items-center justify-between gap-2">
          <div>
            <span className="text-muted-foreground/50">$ </span>
            <span className="text-foreground/80">{command}</span>
          </div>
          <div className="flex items-center gap-1 shrink-0">
            {runnable && (
              <button
                type="button"
                onClick={handleRun}
                disabled={running}
                className="text-[10px] px-1.5 py-0.5 rounded bg-primary/20 text-primary hover:bg-primary/30 transition-colors disabled:opacity-50"
              >
                {running ? 'Running...' : 'Run'}
              </button>
            )}
            <button
              type="button"
              onClick={async () => {
                await navigator.clipboard.writeText(command)
                setCopied(true)
                setTimeout(() => setCopied(false), 1500)
              }}
              className="text-[10px] px-1.5 py-0.5 rounded bg-secondary/50 text-muted-foreground hover:text-foreground transition-colors"
            >
              {copied ? 'Copied' : 'Copy'}
            </button>
          </div>
        </div>
        <span className="text-[10px] text-muted-foreground/50 w-32 shrink-0">{label}</span>
      </div>
      {output && (
        <div className="relative">
          <div
            ref={outputRef}
            onScroll={syncOutputScrollState}
            className="max-h-16 overflow-y-auto rounded border border-border/20 bg-black/30 px-2 py-1.5 ml-0"
            aria-label={`${label} command output`}
          >
            <pre className="font-mono text-[10px] text-muted-foreground/70 whitespace-pre-wrap break-all">{output}</pre>
          </div>
          {showOutputJump && (
            <button
              type="button"
              onClick={() => {
                if (!outputRef.current) return
                outputRef.current.scrollTop = outputRef.current.scrollHeight
                outputStickToBottomRef.current = true
                setShowOutputJump(false)
              }}
              className="absolute bottom-1.5 right-1.5 rounded border border-primary/30 bg-background/90 px-2 py-0.5 text-[10px] text-primary hover:bg-background"
            >
              Jump to latest
            </button>
          )}
        </div>
      )}
      {error && <p className="text-[10px] text-red-400 ml-0">{error}</p>}
    </div>
  )
}

// ─── Claude Code Setup ──────────────────────────────────────────────────

function ClaudeSetup({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) {
  const [step, setStep] = useState<'check' | 'auth' | 'done'>('check')
  const [checking, setChecking] = useState(false)
  const [version, setVersion] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

const checkAuth = useCallback(async () => {
    setChecking(true)
    setError(null)
    try {
      const data = await apiFetch<{ runtimes?: Array<{ id: string; version: string; authenticated?: boolean }> }>('/api/agent-runtimes')
      const claude = (data.runtimes || []).find((r) => r.id === 'claude')
      if (claude) {
        setVersion(claude.version)
        if (claude.authenticated) setStep('done')
        else setStep('auth')
      }
    } catch (err) {
      // Preserve graceful degradation: the original `if (res.ok)` guard left
      // state untouched on a non-ok response (no error surfaced). apiFetch
      // throws on 401/403/404/5xx, so swallow ApiError to match. Genuine
      // network/parse failures still surface "Check failed" as before.
      if (err instanceof ApiError) {
        // no-op — matches the original `if (res.ok)` with no else branch
      } else {
        setError(err instanceof Error ? err.message : 'Check failed')
      }
    } finally {
      setChecking(false)
    }
  }, [])

useEffect(() => { checkAuth() }, [checkAuth])

return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-lg font-semibold">Set Up Claude Code</h3>
          <p className="text-xs text-muted-foreground mt-0.5">Authenticate the Anthropic CLI agent</p>
        </div>
        <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
          <svg className="w-5 h-5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M4 4l8 8M12 4l-8 8" /></svg>
        </button>
      </div>

{/* Step indicators */}
      <div className="flex items-center gap-2 mb-6">
        {(['check', 'auth', 'done'] as const).map((s, i) => {
          const labels = ['Check', 'Authenticate', 'Ready']
          const currentIdx = (['check', 'auth', 'done'] as const).indexOf(step)
          return (
            <div key={s} className="flex items-center gap-2">
              <div className={`w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold ${
                step === s ? 'bg-primary text-primary-foreground' :
                currentIdx > i ? 'bg-green-500/20 text-green-400' :
                'bg-secondary text-muted-foreground'
              }`}>
                {currentIdx > i ? (
                  <svg className="w-3 h-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M3 8.5l3.5 3.5 6.5-8" /></svg>
                ) : i + 1}
              </div>
              <span className={`text-[10px] ${step === s ? 'text-foreground' : 'text-muted-foreground/40'}`}>{labels[i]}</span>
              {i < 2 && <div className={`w-4 h-px ${currentIdx > i ? 'bg-green-500/40' : 'bg-border/20'}`} />}
            </div>
          )
        })}
      </div>

{step === 'check' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-border/30 bg-secondary/20">
            <p className="text-sm font-medium">Checking authentication status...</p>
            <p className="text-xs text-muted-foreground mt-1">Verifying Claude Code credentials.</p>
          </div>
          {checking && <div className="flex items-center gap-2 text-xs text-muted-foreground"><div className="w-3 h-3 rounded-full border-2 border-primary/20 border-t-primary animate-spin" /> Checking...</div>}
          {error && <p className="text-xs text-red-400">{error}</p>}
        </div>
      )}

{step === 'auth' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-amber-500/20 bg-amber-500/5 space-y-3">
            <p className="text-sm font-medium text-amber-400">Authentication Required</p>
            <p className="text-xs text-muted-foreground">
              Claude Code {version ? `(v${version})` : ''} is installed but not authenticated.
            </p>
            <div className="p-3 rounded bg-black/20 border border-border/20">
              <p className="text-xs text-muted-foreground mb-1.5">Run this command in your terminal:</p>
              <code className="block font-mono text-sm text-foreground select-all">claude login</code>
            </div>
            <p className="text-xs text-muted-foreground">
              This opens a browser for OAuth login with your Anthropic account, or you can set <code className="text-[11px] bg-black/20 px-1 rounded">ANTHROPIC_API_KEY</code> in your environment.
            </p>
          </div>

<div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={onClose}>Skip</Button>
            <Button size="sm" onClick={checkAuth} disabled={checking}>
              {checking ? 'Checking...' : 'I\'ve logged in — verify'}
            </Button>
          </div>
        </div>
      )}

{step === 'done' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-green-500/30 bg-green-500/5 text-center space-y-2">
            <div className="text-2xl">+</div>
            <p className="text-sm font-medium text-green-400">Claude Code is ready</p>
            <p className="text-xs text-muted-foreground">Authenticated and available for agent tasks.</p>
            {version && <p className="text-2xs text-muted-foreground/60">v{version}</p>}
          </div>
          <div className="flex justify-end">
            <Button size="sm" onClick={onComplete}>Done</Button>
          </div>
        </div>
      )}
    </div>
  )
}

// ─── Codex CLI Setup ────────────────────────────────────────────────────

function CodexSetup({ onClose, onComplete }: { onClose: () => void; onComplete: () => void }) {
  const [step, setStep] = useState<'check' | 'auth' | 'done'>('check')
  const [checking, setChecking] = useState(false)
  const [version, setVersion] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

const checkAuth = useCallback(async () => {
    setChecking(true)
    setError(null)
    try {
      const data = await apiFetch<{ runtimes?: Array<{ id: string; version: string; authenticated?: boolean }> }>('/api/agent-runtimes')
      const codex = (data.runtimes || []).find((r) => r.id === 'codex')
      if (codex) {
        setVersion(codex.version)
        if (codex.authenticated) setStep('done')
        else setStep('auth')
      }
    } catch (err) {
      // Preserve graceful degradation: the original `if (res.ok)` guard left
      // state untouched on a non-ok response (no error surfaced). apiFetch
      // throws on 401/403/404/5xx, so swallow ApiError to match. Genuine
      // network/parse failures still surface "Check failed" as before.
      if (err instanceof ApiError) {
        // no-op — matches the original `if (res.ok)` with no else branch
      } else {
        setError(err instanceof Error ? err.message : 'Check failed')
      }
    } finally {
      setChecking(false)
    }
  }, [])

useEffect(() => { checkAuth() }, [checkAuth])

return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-lg font-semibold">Set Up Codex CLI</h3>
          <p className="text-xs text-muted-foreground mt-0.5">Authenticate the OpenAI CLI agent</p>
        </div>
        <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
          <svg className="w-5 h-5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M4 4l8 8M12 4l-8 8" /></svg>
        </button>
      </div>

{step === 'check' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-border/30 bg-secondary/20">
            <p className="text-sm font-medium">Checking authentication status...</p>
            <p className="text-xs text-muted-foreground mt-1">Verifying Codex CLI credentials.</p>
          </div>
          {checking && <div className="flex items-center gap-2 text-xs text-muted-foreground"><div className="w-3 h-3 rounded-full border-2 border-primary/20 border-t-primary animate-spin" /> Checking...</div>}
          {error && <p className="text-xs text-red-400">{error}</p>}
        </div>
      )}

{step === 'auth' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-amber-500/20 bg-amber-500/5 space-y-3">
            <p className="text-sm font-medium text-amber-400">Authentication Required</p>
            <p className="text-xs text-muted-foreground">
              Codex CLI {version ? `(v${version})` : ''} is installed but not authenticated.
            </p>
            <div className="p-3 rounded bg-black/20 border border-border/20">
              <p className="text-xs text-muted-foreground mb-1.5">Run this command in your terminal:</p>
              <code className="block font-mono text-sm text-foreground select-all">codex auth</code>
            </div>
            <p className="text-xs text-muted-foreground">
              This authenticates with your OpenAI account, or you can set <code className="text-[11px] bg-black/20 px-1 rounded">OPENAI_API_KEY</code> in your environment.
            </p>
          </div>

<div className="flex justify-end gap-2">
            <Button variant="ghost" size="sm" onClick={onClose}>Skip</Button>
            <Button size="sm" onClick={checkAuth} disabled={checking}>
              {checking ? 'Checking...' : 'I\'ve authenticated — verify'}
            </Button>
          </div>
        </div>
      )}

{step === 'done' && (
        <div className="space-y-4">
          <div className="p-4 rounded-lg border border-green-500/30 bg-green-500/5 text-center space-y-2">
            <div className="text-2xl">+</div>
            <p className="text-sm font-medium text-green-400">Codex CLI is ready</p>
            <p className="text-xs text-muted-foreground">Authenticated and available for agent tasks.</p>
            {version && <p className="text-2xs text-muted-foreground/60">v{version}</p>}
          </div>
          <div className="flex justify-end">
            <Button size="sm" onClick={onComplete}>Done</Button>
          </div>
        </div>
      )}
    </div>
  )
}