@shareai-lab/kode 1.1.14 → 1.1.16-dev.1

package/src/commands/agents.tsx

@@ -1,3416 +0,0 @@
-import React, { useState, useEffect, useMemo, useCallback, useReducer, Fragment } from 'react'
-import { Box, Text, useInput } from 'ink'
-import InkTextInput from 'ink-text-input'
-import { getActiveAgents, clearAgentCache } from '../utils/agentLoader'
-import { AgentConfig } from '../utils/agentLoader'
-import { writeFileSync, unlinkSync, mkdirSync, existsSync, readFileSync, renameSync } from 'fs'
-import { join } from 'path'
-import * as path from 'path'
-import { homedir } from 'os'
-import * as os from 'os'
-import { getCwd } from '../utils/state'
-import { getTheme } from '../utils/theme'
-import matter from 'gray-matter'
-import { exec, spawn } from 'child_process'
-import { promisify } from 'util'
-import { watch, FSWatcher } from 'fs'
-import { getMCPTools } from '../services/mcpClient'
-import { getModelManager } from '../utils/model'
-import { randomUUID } from 'crypto'
-
-const execAsync = promisify(exec)
-
-// Core constants aligned with Claude Code architecture
-const AGENT_LOCATIONS = {
-  USER: "user",
-  PROJECT: "project", 
-  BUILT_IN: "built-in",
-  ALL: "all"
-} as const
-
-const UI_ICONS = {
-  pointer: "❯",
-  checkboxOn: "☑",
-  checkboxOff: "☐", 
-  warning: "⚠",
-  separator: "─",
-  loading: "◐◑◒◓"
-} as const
-
-const FOLDER_CONFIG = {
-  FOLDER_NAME: ".claude",
-  AGENTS_DIR: "agents"
-} as const
-
-// Tool categories for sophisticated selection
-const TOOL_CATEGORIES = {
-  read: ['Read', 'Glob', 'Grep', 'LS'],
-  edit: ['Edit', 'MultiEdit', 'Write', 'NotebookEdit'],
-  execution: ['Bash', 'BashOutput', 'KillBash'],
-  web: ['WebFetch', 'WebSearch'],
-  other: ['TodoWrite', 'ExitPlanMode', 'Task']
-} as const
-
-type AgentLocation = typeof AGENT_LOCATIONS[keyof typeof AGENT_LOCATIONS]
-
-// Models will be listed dynamically from ModelManager
-
-// Comprehensive mode state for complete UI flow
-type ModeState = {
-  mode: 'list-agents' | 'create-location' | 'create-method' | 'create-generate' | 'create-type' | 
-        'create-description' | 'create-tools' | 'create-model' | 'create-color' | 'create-prompt' | 'create-confirm' |
-        'agent-menu' | 'view-agent' | 'edit-agent' | 'edit-tools' | 'edit-model' | 'edit-color' | 'delete-confirm'
-  location?: AgentLocation
-  selectedAgent?: AgentConfig
-  previousMode?: ModeState
-  [key: string]: any
-}
-
-// State for agent creation flow
-type CreateState = {
-  location: AgentLocation | null
-  agentType: string
-  method: 'generate' | 'manual' | null
-  generationPrompt: string
-  whenToUse: string
-  selectedTools: string[]
-  selectedModel: string | null // null for inherit, or model profile modelName
-  selectedColor: string | null
-  systemPrompt: string
-  isGenerating: boolean
-  wasGenerated: boolean
-  isAIGenerated: boolean
-  error: string | null
-  warnings: string[]
-  // Cursor positions for text inputs
-  agentTypeCursor: number
-  whenToUseCursor: number
-  promptCursor: number
-  generationPromptCursor: number
-}
-
-type Tool = {
-  name: string
-  description?: string | (() => Promise<string>)
-}
-
-// Map a stored model identifier to a display name via ModelManager
-function getDisplayModelName(modelId?: string | null): string {
-  // null/undefined means inherit from parent (task model)
-  if (!modelId) return 'Inherit'
-  
-  try {
-    const profiles = getModelManager().getActiveModelProfiles()
-    const profile = profiles.find((p: any) => p.modelName === modelId || p.name === modelId)
-    return profile ? profile.name : `Custom (${modelId})`
-  } catch (error) {
-    console.warn('Failed to get model profiles:', error)
-    return modelId ? `Custom (${modelId})` : 'Inherit'
-  }
-}
-
-// AI Generation response type
-type GeneratedAgent = {
-  identifier: string
-  whenToUse: string
-  systemPrompt: string
-}
-
-// AI generation function (use main pointer model)
-async function generateAgentWithClaude(prompt: string): Promise<GeneratedAgent> {
-  // Import Claude service dynamically to avoid circular dependencies
-  const { queryModel } = await import('../services/claude')
-  
-  const systemPrompt = `You are an expert at creating AI agent configurations. Based on the user's description, generate a specialized agent configuration.
-
-Return your response as a JSON object with exactly these fields:
-- identifier: A short, kebab-case identifier for the agent (e.g., "code-reviewer", "security-auditor")
-- whenToUse: A clear description of when this agent should be used (50-200 words)
-- systemPrompt: A comprehensive system prompt that defines the agent's role, capabilities, and behavior (200-500 words)
-
-Make the agent highly specialized and effective for the described use case.`
-
-  try {
-    const messages = [
-      {
-        type: 'user',
-        uuid: randomUUID(),
-        message: { role: 'user', content: prompt },
-      },
-    ] as any
-    const response = await queryModel('main', messages, [systemPrompt])
-
-    // Get the text content from the response - handle both string and object responses
-    let responseText = ''
-    if (typeof response.message?.content === 'string') {
-      responseText = response.message.content
-    } else if (Array.isArray(response.message?.content)) {
-      const textContent = response.message.content.find((c: any) => c.type === 'text')
-      responseText = textContent?.text || ''
-    } else if (response.message?.content?.[0]?.text) {
-      responseText = response.message.content[0].text
-    }
-    
-    if (!responseText) {
-      throw new Error('No text content in Claude response')
-    }
-    
-    // 安全限制
-    const MAX_JSON_SIZE = 100_000 // 100KB
-    const MAX_FIELD_LENGTH = 10_000
-    
-    if (responseText.length > MAX_JSON_SIZE) {
-      throw new Error('Response too large')
-    }
-    
-    // 安全的JSON提取和解析
-    let parsed: any
-    try {
-      // 首先尝试直接解析整个响应
-      parsed = JSON.parse(responseText.trim())
-    } catch {
-      // 如果失败，提取第一个JSON对象，限制搜索范围
-      const startIdx = responseText.indexOf('{')
-      const endIdx = responseText.lastIndexOf('}')
-      
-      if (startIdx === -1 || endIdx === -1 || startIdx >= endIdx) {
-        throw new Error('No valid JSON found in Claude response')
-      }
-      
-      const jsonStr = responseText.substring(startIdx, endIdx + 1)
-      if (jsonStr.length > MAX_JSON_SIZE) {
-        throw new Error('JSON content too large')
-      }
-      
-      try {
-        parsed = JSON.parse(jsonStr)
-      } catch (parseError) {
-        throw new Error(`Invalid JSON format: ${parseError instanceof Error ? parseError.message : 'Unknown error'}`)
-      }
-    }
-    
-    // 深度验证和安全清理
-    const identifier = String(parsed.identifier || '').slice(0, 100).trim()
-    const whenToUse = String(parsed.whenToUse || '').slice(0, MAX_FIELD_LENGTH).trim()
-    const agentSystemPrompt = String(parsed.systemPrompt || '').slice(0, MAX_FIELD_LENGTH).trim()
-    
-    // 验证必填字段
-    if (!identifier || !whenToUse || !agentSystemPrompt) {
-      throw new Error('Invalid response structure: missing required fields (identifier, whenToUse, systemPrompt)')
-    }
-    
-    // 清理危险字符（控制字符和非打印字符）
-    const sanitize = (str: string) => str.replace(/[\x00-\x1F\x7F-\x9F]/g, '')
-    
-    // 验证identifier格式（只允许字母、数字、连字符）
-    const cleanIdentifier = sanitize(identifier)
-    if (!/^[a-zA-Z0-9-]+$/.test(cleanIdentifier)) {
-      throw new Error('Invalid identifier format: only letters, numbers, and hyphens allowed')
-    }
-    
-    return {
-      identifier: cleanIdentifier,
-      whenToUse: sanitize(whenToUse),
-      systemPrompt: sanitize(agentSystemPrompt)
-    }
-  } catch (error) {
-    console.error('AI generation failed:', error)
-    // Fallback to a reasonable default based on the prompt
-    const fallbackId = prompt.toLowerCase()
-      .replace(/[^a-z0-9\s-]/g, '')
-      .replace(/\s+/g, '-')
-      .slice(0, 30)
-    
-    return {
-      identifier: fallbackId || 'custom-agent',
-      whenToUse: `Use this agent when you need assistance with: ${prompt}`,
-      systemPrompt: `You are a specialized assistant focused on helping with ${prompt}. Provide expert-level assistance in this domain.`
-    }
-  }
-}
-
-// Comprehensive validation system
-function validateAgentType(agentType: string, existingAgents: AgentConfig[] = []): { 
-  isValid: boolean
-  errors: string[]
-  warnings: string[]
-} {
-  const errors: string[] = []
-  const warnings: string[] = []
-  
-  if (!agentType) {
-    errors.push("Agent type is required")
-    return { isValid: false, errors, warnings }
-  }
-  
-  if (!/^[a-zA-Z]/.test(agentType)) {
-    errors.push("Agent type must start with a letter")
-  }
-  
-  if (!/^[a-zA-Z0-9-]+$/.test(agentType)) {
-    errors.push("Agent type can only contain letters, numbers, and hyphens")
-  }
-  
-  if (agentType.length < 3) {
-    errors.push("Agent type must be at least 3 characters long")
-  }
-  
-  if (agentType.length > 50) {
-    errors.push("Agent type must be less than 50 characters")
-  }
-  
-  // Check for reserved names
-  const reserved = ['help', 'exit', 'quit', 'agents', 'task']
-  if (reserved.includes(agentType.toLowerCase())) {
-    errors.push("This name is reserved")
-  }
-  
-  // Check for duplicates
-  const duplicate = existingAgents.find(a => a.agentType === agentType)
-  if (duplicate) {
-    errors.push(`An agent with this name already exists in ${duplicate.location}`)
-  }
-  
-  // Warnings
-  if (agentType.includes('--')) {
-    warnings.push("Consider avoiding consecutive hyphens")
-  }
-  
-  return {
-    isValid: errors.length === 0,
-    errors,
-    warnings
-  }
-}
-
-function validateAgentConfig(config: Partial<CreateState>, existingAgents: AgentConfig[] = []): {
-  isValid: boolean
-  errors: string[]
-  warnings: string[]
-} {
-  const errors: string[] = []
-  const warnings: string[] = []
-  
-  // Validate agent type
-  if (config.agentType) {
-    const typeValidation = validateAgentType(config.agentType, existingAgents)
-    errors.push(...typeValidation.errors)
-    warnings.push(...typeValidation.warnings)
-  }
-  
-  // Validate description
-  if (!config.whenToUse) {
-    errors.push("Description is required")
-  } else if (config.whenToUse.length < 10) {
-    warnings.push("Description should be more descriptive (at least 10 characters)")
-  }
-  
-  // Validate system prompt
-  if (!config.systemPrompt) {
-    errors.push("System prompt is required")
-  } else if (config.systemPrompt.length < 20) {
-    warnings.push("System prompt might be too short for effective agent behavior")
-  }
-  
-  // Validate tools
-  if (!config.selectedTools || config.selectedTools.length === 0) {
-    warnings.push("No tools selected - agent will have limited capabilities")
-  }
-  
-  return {
-    isValid: errors.length === 0,
-    errors,
-    warnings
-  }
-}
-
-// File system operations with Claude Code alignment
-function getAgentDirectory(location: AgentLocation): string {
-  if (location === AGENT_LOCATIONS.BUILT_IN || location === AGENT_LOCATIONS.ALL) {
-    throw new Error(`Cannot get directory path for ${location} agents`)
-  }
-  
-  if (location === AGENT_LOCATIONS.USER) {
-    return join(homedir(), FOLDER_CONFIG.FOLDER_NAME, FOLDER_CONFIG.AGENTS_DIR)
-  } else {
-    return join(getCwd(), FOLDER_CONFIG.FOLDER_NAME, FOLDER_CONFIG.AGENTS_DIR)
-  }
-}
-
-function getAgentFilePath(agent: AgentConfig): string {
-  if (agent.location === 'built-in') {
-    throw new Error('Cannot get file path for built-in agents')
-  }
-  const dir = getAgentDirectory(agent.location as AgentLocation)
-  return join(dir, `${agent.agentType}.md`)
-}
-
-function ensureDirectoryExists(location: AgentLocation): string {
-  const dir = getAgentDirectory(location)
-  if (!existsSync(dir)) {
-    mkdirSync(dir, { recursive: true })
-  }
-  return dir
-}
-
-// Generate agent file content
-function generateAgentFileContent(
-  agentType: string,
-  description: string,
-  tools: string[] | '*',
-  systemPrompt: string,
-  model?: string,
-  color?: string
-): string {
-  // Use YAML multi-line string for description to avoid escaping issues
-  const descriptionLines = description.split('\n')
-  const formattedDescription = descriptionLines.length > 1 
-    ? `|\n  ${descriptionLines.join('\n  ')}`
-    : JSON.stringify(description)
-  
-  const lines = [
-    '---',
-    `name: ${agentType}`,
-    `description: ${formattedDescription}`
-  ]
-  
-  if (tools) {
-    if (tools === '*') {
-      lines.push(`tools: "*"`)
-    } else if (Array.isArray(tools) && tools.length > 0) {
-      lines.push(`tools: [${tools.map(t => `"${t}"`).join(', ')}]`)
-    }
-  }
-  
-  if (model) {
-    lines.push(`model: ${model}`)
-  }
-  
-  if (color) {
-    lines.push(`color: ${color}`)
-  }
-  
-  lines.push('---', '', systemPrompt)
-  return lines.join('\n')
-}
-
-// Save agent to file
-async function saveAgent(
-  location: AgentLocation,
-  agentType: string,
-  description: string,
-  tools: string[],
-  systemPrompt: string,
-  model?: string,
-  color?: string,
-  throwIfExists: boolean = true
-): Promise<void> {
-  if (location === AGENT_LOCATIONS.BUILT_IN) {
-    throw new Error('Cannot save built-in agents')
-  }
-  
-  ensureDirectoryExists(location)
-  
-  const filePath = join(getAgentDirectory(location), `${agentType}.md`)
-  const tempFile = `${filePath}.tmp.${Date.now()}.${Math.random().toString(36).substr(2, 9)}`
-  
-  // Ensure tools is properly typed for file saving
-  const toolsForFile: string[] | '*' = Array.isArray(tools) && tools.length === 1 && tools[0] === '*' ? '*' : tools
-  const content = generateAgentFileContent(agentType, description, toolsForFile, systemPrompt, model, color)
-  
-  try {
-    // 先写入临时文件，使用 'wx' 确保不覆盖现有文件
-    writeFileSync(tempFile, content, { encoding: 'utf-8', flag: 'wx' })
-    
-    // 检查目标文件是否存在（原子性检查）
-    if (throwIfExists && existsSync(filePath)) {
-      // 清理临时文件
-      try { unlinkSync(tempFile) } catch {}
-      throw new Error(`Agent file already exists: ${filePath}`)
-    }
-    
-    // 原子性重命名（在大多数文件系统上，rename是原子操作）
-    renameSync(tempFile, filePath)
-    
-  } catch (error) {
-    // 确保清理临时文件
-    try { 
-      if (existsSync(tempFile)) {
-        unlinkSync(tempFile) 
-      }
-    } catch (cleanupError) {
-      console.warn('Failed to cleanup temp file:', cleanupError)
-    }
-    throw error
-  }
-}
-
-// Delete agent file
-async function deleteAgent(agent: AgentConfig): Promise<void> {
-  if (agent.location === 'built-in') {
-    throw new Error('Cannot delete built-in agents')
-  }
-  
-  const filePath = getAgentFilePath(agent)
-  unlinkSync(filePath)
-}
-
-// Open file in system editor - 安全版本，防止命令注入
-async function openInEditor(filePath: string): Promise<void> {
-  // 安全验证：确保路径在允许的目录内
-  const resolvedPath = path.resolve(filePath)
-  const projectDir = process.cwd()
-  const homeDir = os.homedir()
-  
-  const isSub = (base: string, target: string) => {
-    const path = require('path')
-    const rel = path.relative(path.resolve(base), path.resolve(target))
-    if (!rel || rel === '') return true
-    if (rel.startsWith('..')) return false
-    if (path.isAbsolute(rel)) return false
-    return true
-  }
-
-  if (!isSub(projectDir, resolvedPath) && !isSub(homeDir, resolvedPath)) {
-    throw new Error('Access denied: File path outside allowed directories')
-  }
-  
-  // 验证文件扩展名
-  if (!resolvedPath.endsWith('.md')) {
-    throw new Error('Invalid file type: Only .md files are allowed')
-  }
-  
-  return new Promise((resolve, reject) => {
-    const platform = process.platform
-    let command: string
-    let args: string[]
-    
-    // 使用spawn而不是exec，避免shell注入
-    switch (platform) {
-      case 'darwin': // macOS
-        command = 'open'
-        args = [resolvedPath]
-        break
-      case 'win32': // Windows
-        command = 'cmd'
-        args = ['/c', 'start', '', resolvedPath]
-        break
-      default: // Linux and others
-        command = 'xdg-open'
-        args = [resolvedPath]
-        break
-    }
-    
-    // 使用spawn替代exec，避免shell解释
-    const child = spawn(command, args, { 
-      detached: true, 
-      stdio: 'ignore',
-      // 确保没有shell解释
-      shell: false 
-    })
-    
-    child.unref() // 允许父进程退出
-    
-    child.on('error', (error) => {
-      reject(new Error(`Failed to open editor: ${error.message}`))
-    })
-    
-    child.on('exit', (code) => {
-      if (code === 0) {
-        resolve()
-      } else {
-        reject(new Error(`Editor exited with code ${code}`))
-      }
-    })
-  })
-}
-
-// Update existing agent
-async function updateAgent(
-  agent: AgentConfig,
-  description: string,
-  tools: string[] | '*',
-  systemPrompt: string,
-  color?: string,
-  model?: string
-): Promise<void> {
-  if (agent.location === 'built-in') {
-    throw new Error('Cannot update built-in agents')
-  }
-  
-  const toolsForFile = tools.length === 1 && tools[0] === '*' ? '*' : tools
-  const content = generateAgentFileContent(agent.agentType, description, toolsForFile, systemPrompt, model, color)
-  const filePath = getAgentFilePath(agent)
-  
-  writeFileSync(filePath, content, { encoding: 'utf-8', flag: 'w' })
-}
-
-// Enhanced UI Components with Claude Code alignment
-
-interface HeaderProps {
-  title: string
-  subtitle?: string
-  step?: number
-  totalSteps?: number
-  children?: React.ReactNode
-}
-
-function Header({ title, subtitle, step, totalSteps, children }: HeaderProps) {
-  const theme = getTheme()
-  return (
-    <Box flexDirection="column">
-      <Text bold color={theme.primary}>{title}</Text>
-      {subtitle && (
-        <Text color={theme.secondary}>
-          {step && totalSteps ? `Step ${step}/${totalSteps}: ` : ''}{subtitle}
-        </Text>
-      )}
-      {children}
-    </Box>
-  )
-}
-
-interface InstructionBarProps {
-  instructions?: string
-}
-
-function InstructionBar({ instructions = "Press ↑↓ to navigate · Enter to select · Esc to go back" }: InstructionBarProps) {
-  const theme = getTheme()
-  return (
-    <Box marginTop={2}>
-      <Box borderStyle="round" borderColor={theme.secondary} paddingX={1}>
-        <Text color={theme.secondary}>{instructions}</Text>
-      </Box>
-    </Box>
-  )
-}
-
-interface SelectListProps {
-  options: Array<{ label: string; value: string }>
-  selectedIndex: number
-  onChange: (value: string) => void
-  onCancel?: () => void
-  numbered?: boolean
-}
-
-function SelectList({ options, selectedIndex, onChange, onCancel, numbered = true }: SelectListProps) {
-  const theme = getTheme()
-  
-  useInput((input, key) => {
-    if (key.escape && onCancel) {
-      onCancel()
-    } else if (key.return) {
-      onChange(options[selectedIndex].value)
-    }
-  })
-
-  return (
-    <Box flexDirection="column">
-      {options.map((option, idx) => (
-        <Box key={option.value}>
-          <Text color={idx === selectedIndex ? theme.primary : undefined}>
-            {idx === selectedIndex ? `${UI_ICONS.pointer} ` : "  "}
-            {numbered ? `${idx + 1}. ` : ''}{option.label}
-          </Text>
-        </Box>
-      ))}
-    </Box>
-  )
-}
-
-
-// Multiline text input component with better UX
-interface MultilineTextInputProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-  onSubmit?: () => void
-  focus?: boolean
-  rows?: number
-  error?: string | null
-}
-
-function MultilineTextInput({
-  value,
-  onChange,
-  placeholder = '',
-  onSubmit,
-  focus = true,
-  rows = 5,
-  error
-}: MultilineTextInputProps) {
-  const theme = getTheme()
-  const [internalValue, setInternalValue] = useState(value)
-  const [cursorBlink, setCursorBlink] = useState(true)
-  
-  // Sync with external value changes
-  useEffect(() => {
-    setInternalValue(value)
-  }, [value])
-  
-  // Cursor blink animation
-  useEffect(() => {
-    if (!focus) return
-    const timer = setInterval(() => {
-      setCursorBlink(prev => !prev)
-    }, 500)
-    return () => clearInterval(timer)
-  }, [focus])
-  
-  // Calculate display metrics
-  const lines = internalValue.split('\n')
-  const lineCount = lines.length
-  const charCount = internalValue.length
-  const isEmpty = !internalValue.trim()
-  const hasContent = !isEmpty
-  
-  // Format lines for display with word wrapping
-  const formatLines = (text: string): string[] => {
-    if (!text && placeholder) {
-      return [placeholder]
-    }
-    const maxWidth = 70 // Maximum characters per line
-    const result: string[] = []
-    const textLines = text.split('\n')
-    
-    textLines.forEach(line => {
-      if (line.length <= maxWidth) {
-        result.push(line)
-      } else {
-        // Word wrap long lines
-        let remaining = line
-        while (remaining.length > 0) {
-          result.push(remaining.slice(0, maxWidth))
-          remaining = remaining.slice(maxWidth)
-        }
-      }
-    })
-    
-    return result.length > 0 ? result : ['']
-  }
-  
-  const displayLines = formatLines(internalValue)
-  const visibleLines = displayLines.slice(Math.max(0, displayLines.length - rows))
-  
-  // Handle submit
-  const handleSubmit = () => {
-    if (internalValue.trim() && onSubmit) {
-      onSubmit()
-    }
-  }
-  
-  return (
-    <Box flexDirection="column" width="100%">
-      {/* Modern card-style input container */}
-      <Box flexDirection="column">
-        {/* Input area */}
-        <Box 
-          borderStyle="round"
-          borderColor={focus ? theme.primary : 'gray'}
-          paddingX={2}
-          paddingY={1}
-          minHeight={rows + 2}
-        >
-          <Box flexDirection="column">
-            {/* Use ink-text-input for better input handling */}
-            <InkTextInput
-              value={internalValue}
-              onChange={(val) => {
-                setInternalValue(val)
-                onChange(val)
-              }}
-              onSubmit={handleSubmit}
-              focus={focus}
-              placeholder={placeholder}
-            />
-            
-            {/* Show cursor indicator when focused */}
-            {focus && cursorBlink && hasContent && (
-              <Text color={theme.primary}>_</Text>
-            )}
-          </Box>
-        </Box>
-        
-        {/* Status bar */}
-        <Box marginTop={1} flexDirection="row" justifyContent="space-between">
-          <Box>
-            {hasContent ? (
-              <Text color={theme.success}>
-                ✓ {charCount} chars • {lineCount} line{lineCount !== 1 ? 's' : ''}
-              </Text>
-            ) : (
-              <Text dimColor>○ Type to begin...</Text>
-            )}
-          </Box>
-          <Box>
-            {error ? (
-              <Text color={theme.error}>⚠ {error}</Text>
-            ) : (
-              <Text dimColor>
-                {hasContent ? 'Ready' : 'Waiting'}
-              </Text>
-            )}
-          </Box>
-        </Box>
-      </Box>
-      
-      {/* Instructions */}
-      <Box marginTop={1}>
-        <Text dimColor>
-          Press Enter to submit · Shift+Enter for new line
-        </Text>
-      </Box>
-    </Box>
-  )
-}
-
-// Loading spinner component
-interface LoadingSpinnerProps {
-  text?: string
-}
-
-function LoadingSpinner({ text }: LoadingSpinnerProps) {
-  const theme = getTheme()
-  const [frame, setFrame] = useState(0)
-  
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setFrame(prev => (prev + 1) % UI_ICONS.loading.length)
-    }, 100)
-    return () => clearInterval(interval)
-  }, [])
-  
-  return (
-    <Box>
-      <Text color={theme.primary}>{UI_ICONS.loading[frame]}</Text>
-      {text && <Text color={theme.secondary}> {text}</Text>}
-    </Box>
-  )
-}
-
-// Complete agents UI with comprehensive state management
-interface AgentsUIProps {
-  onExit: (message?: string) => void
-}
-
-function AgentsUI({ onExit }: AgentsUIProps) {
-  const theme = getTheme()
-  
-  // Core state management
-  const [modeState, setModeState] = useState<ModeState>({
-    mode: "list-agents",
-    location: "all" as AgentLocation
-  })
-  
-  const [agents, setAgents] = useState<AgentConfig[]>([])
-  const [changes, setChanges] = useState<string[]>([])
-  const [refreshKey, setRefreshKey] = useState(0)
-  const [loading, setLoading] = useState(true)
-  const [tools, setTools] = useState<Tool[]>([])
-  
-  // Creation state using reducer for complex flow management
-  const [createState, setCreateState] = useReducer(
-    (state: CreateState, action: any) => {
-      switch (action.type) {
-        case 'RESET':
-          return {
-            location: null,
-            agentType: '',
-            method: null,
-            generationPrompt: '',
-            whenToUse: '',
-            selectedTools: [],
-            selectedModel: null,
-            selectedColor: null,
-            systemPrompt: '',
-            isGenerating: false,
-            wasGenerated: false,
-            isAIGenerated: false,
-            error: null,
-            warnings: [],
-            agentTypeCursor: 0,
-            whenToUseCursor: 0,
-            promptCursor: 0,
-            generationPromptCursor: 0
-          }
-        case 'SET_LOCATION':
-          return { ...state, location: action.value }
-        case 'SET_METHOD':
-          return { ...state, method: action.value }
-        case 'SET_AGENT_TYPE':
-          return { ...state, agentType: action.value, error: null }
-        case 'SET_GENERATION_PROMPT':
-          return { ...state, generationPrompt: action.value }
-        case 'SET_WHEN_TO_USE':
-          return { ...state, whenToUse: action.value, error: null }
-        case 'SET_SELECTED_TOOLS':
-          return { ...state, selectedTools: action.value }
-        case 'SET_SELECTED_MODEL':
-          return { ...state, selectedModel: action.value }
-        case 'SET_SELECTED_COLOR':
-          return { ...state, selectedColor: action.value }
-        case 'SET_SYSTEM_PROMPT':
-          return { ...state, systemPrompt: action.value }
-        case 'SET_IS_GENERATING':
-          return { ...state, isGenerating: action.value }
-        case 'SET_WAS_GENERATED':
-          return { ...state, wasGenerated: action.value }
-        case 'SET_IS_AI_GENERATED':
-          return { ...state, isAIGenerated: action.value }
-        case 'SET_ERROR':
-          return { ...state, error: action.value }
-        case 'SET_WARNINGS':
-          return { ...state, warnings: action.value }
-        case 'SET_CURSOR':
-          return { ...state, [action.field]: action.value }
-        default:
-          return state
-      }
-    },
-    {
-      location: null,
-      agentType: '',
-      method: null,
-      generationPrompt: '',
-      whenToUse: '',
-      selectedTools: [],
-      selectedModel: null,
-      selectedColor: null,
-      systemPrompt: '',
-      isGenerating: false,
-      wasGenerated: false,
-      isAIGenerated: false,
-      error: null,
-      warnings: [],
-      agentTypeCursor: 0,
-      whenToUseCursor: 0,
-      promptCursor: 0,
-      generationPromptCursor: 0
-    }
-  )
-  
-  // Load agents and tools dynamically
-  const loadAgents = useCallback(async () => {
-    setLoading(true)
-    clearAgentCache()
-    
-    // 创建取消令牌以防止竞态条件
-    const abortController = new AbortController()
-    const loadingId = Date.now() // 用于标识这次加载
-    
-    try {
-      const result = await getActiveAgents()
-      
-      // 检查是否仍然是当前的加载请求
-      if (abortController.signal.aborted) {
-        return // 组件已卸载或新的加载已开始
-      }
-      
-      setAgents(result)
-      
-      // Update selectedAgent if there's one currently selected (for live reload)
-      if (modeState.selectedAgent) {
-        const freshSelectedAgent = result.find(a => a.agentType === modeState.selectedAgent!.agentType)
-        if (freshSelectedAgent) {
-          setModeState(prev => ({ ...prev, selectedAgent: freshSelectedAgent }))
-        }
-      }
-      
-      // Load available tools dynamically from tool registry
-      const availableTools: Tool[] = []
-      
-      // Core built-in tools
-      let coreTools = [
-        { name: 'Read', description: 'Read files from filesystem' },
-        { name: 'Write', description: 'Write files to filesystem' },
-        { name: 'Edit', description: 'Edit existing files' },
-        { name: 'MultiEdit', description: 'Make multiple edits to files' },
-        { name: 'NotebookEdit', description: 'Edit Jupyter notebooks' },
-        { name: 'Bash', description: 'Execute bash commands' },
-        { name: 'Glob', description: 'Find files matching patterns' },
-        { name: 'Grep', description: 'Search file contents' },
-        { name: 'LS', description: 'List directory contents' },
-        { name: 'WebFetch', description: 'Fetch web content' },
-        { name: 'WebSearch', description: 'Search the web' },
-        { name: 'TodoWrite', description: 'Manage task lists' }
-      ]
-      // Hide agent orchestration/self-control tools for subagent configs
-      coreTools = coreTools.filter(t => t.name !== 'Task' && t.name !== 'ExitPlanMode')
-      
-      availableTools.push(...coreTools)
-      
-      // Try to load MCP tools dynamically
-      try {
-        const mcpTools = await getMCPTools()
-        if (Array.isArray(mcpTools) && mcpTools.length > 0) {
-          availableTools.push(...mcpTools)
-        }
-      } catch (error) {
-        console.warn('Failed to load MCP tools:', error)
-      }
-      
-      if (!abortController.signal.aborted) {
-        setTools(availableTools)
-      }
-    } catch (error) {
-      if (!abortController.signal.aborted) {
-        console.error('Failed to load agents:', error)
-      }
-    } finally {
-      if (!abortController.signal.aborted) {
-        setLoading(false)
-      }
-    }
-    
-    // 返回取消函数供useEffect使用
-    return () => abortController.abort()
-  }, [])
-  
-  // Remove mock MCP loader; real MCP tools are loaded via getMCPTools()
-
-  useEffect(() => {
-    let cleanup: (() => void) | undefined
-    
-    const load = async () => {
-      cleanup = await loadAgents()
-    }
-    
-    load()
-    
-    return () => {
-      if (cleanup) {
-        cleanup()
-      }
-    }
-  }, [refreshKey, loadAgents])
-  
-  // Local file watcher removed; rely on global watcher started in CLI.
-  
-  // Global keyboard handling: ESC 逐级返回
-  useInput((input, key) => {
-    if (!key.escape) return
-
-    const changesSummary = changes.length > 0 ?
-      `Agent changes:\n${changes.join('\n')}` : undefined
-
-    const current = modeState.mode
-
-    if (current === 'list-agents') {
-      onExit(changesSummary)
-      return
-    }
-
-    // Hierarchical back navigation
-    switch (current) {
-      case 'create-location':
-        setModeState({ mode: 'list-agents', location: 'all' as AgentLocation })
-        break
-      case 'create-method':
-        setModeState({ mode: 'create-location', location: modeState.location })
-        break
-      case 'create-generate':
-        setModeState({ mode: 'create-location', location: modeState.location })
-        break
-      case 'create-type':
-        setModeState({ mode: 'create-generate', location: modeState.location })
-        break
-      case 'create-prompt':
-        setModeState({ mode: 'create-type', location: modeState.location })
-        break
-      case 'create-description':
-        setModeState({ mode: 'create-prompt', location: modeState.location })
-        break
-      case 'create-tools':
-        setModeState({ mode: 'create-description', location: modeState.location })
-        break
-      case 'create-model':
-        setModeState({ mode: 'create-tools', location: modeState.location })
-        break
-      case 'create-color':
-        setModeState({ mode: 'create-model', location: modeState.location })
-        break
-      case 'create-confirm':
-        setModeState({ mode: 'create-color', location: modeState.location })
-        break
-      case 'agent-menu':
-        setModeState({ mode: 'list-agents', location: 'all' as AgentLocation })
-        break
-      case 'view-agent':
-        setModeState({ mode: 'agent-menu', selectedAgent: modeState.selectedAgent })
-        break
-      case 'edit-agent':
-        setModeState({ mode: 'agent-menu', selectedAgent: modeState.selectedAgent })
-        break
-      case 'edit-tools':
-      case 'edit-model':
-      case 'edit-color':
-        setModeState({ mode: 'edit-agent', selectedAgent: modeState.selectedAgent })
-        break
-      case 'delete-confirm':
-        setModeState({ mode: 'agent-menu', selectedAgent: modeState.selectedAgent })
-        break
-      default:
-        setModeState({ mode: 'list-agents', location: 'all' as AgentLocation })
-        break
-    }
-  })
-  
-  // Event handlers
-  const handleAgentSelect = useCallback((agent: AgentConfig) => {
-    setModeState({ 
-      mode: "agent-menu", 
-      location: modeState.location,
-      selectedAgent: agent
-    })
-  }, [modeState])
-
-  const handleCreateNew = useCallback(() => {
-    console.log('=== STARTING AGENT CREATION FLOW ===')
-    console.log('Current mode state:', modeState)
-    setCreateState({ type: 'RESET' })
-    console.log('Reset create state')
-    setModeState({ mode: "create-location" })
-    console.log('Set mode to create-location')
-    console.log('=== CREATE NEW HANDLER COMPLETED ===')
-  }, [modeState])
-
-  const handleAgentCreated = useCallback((message: string) => {
-    setChanges(prev => [...prev, message])
-    setRefreshKey(prev => prev + 1)
-    setModeState({ mode: "list-agents", location: "all" as AgentLocation })
-  }, [])
-  
-  const handleAgentDeleted = useCallback((message: string) => {
-    setChanges(prev => [...prev, message])
-    setRefreshKey(prev => prev + 1)
-    setModeState({ mode: "list-agents", location: "all" as AgentLocation })
-  }, [])
-  
-  if (loading) {
-    return (
-      <Box flexDirection="column">
-        <Header title="Agents">
-          <Box marginTop={1}>
-            <LoadingSpinner text="Loading agents..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-
-  // Render based on current mode
-  switch (modeState.mode) {
-    case "list-agents":
-      return (
-        <AgentListView
-          location={modeState.location || "all"}
-          agents={agents}
-          allAgents={agents}
-          onBack={() => onExit()}
-          onSelect={handleAgentSelect}
-          onCreateNew={handleCreateNew}
-          changes={changes}
-        />
-      )
-
-    case "create-location":
-      return (
-        <LocationSelect
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-method":
-      return (
-        <MethodSelect
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-generate":
-      return (
-        <GenerateStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-          existingAgents={agents}
-        />
-      )
-      
-    case "create-type":
-      return (
-        <TypeStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-          existingAgents={agents}
-        />
-      )
-      
-    case "create-description":
-      return (
-        <DescriptionStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-tools":
-      return (
-        <ToolsStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-          tools={tools}
-        />
-      )
-      
-    case "create-model":
-      return (
-        <ModelStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-color":
-      return (
-        <ColorStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-prompt":
-      return (
-        <PromptStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "create-confirm":
-      return (
-        <ConfirmStep
-          createState={createState}
-          setCreateState={setCreateState}
-          setModeState={setModeState}
-          tools={tools}
-          onAgentCreated={handleAgentCreated}
-        />
-      )
-      
-    case "agent-menu":
-      return (
-        <AgentMenu
-          agent={modeState.selectedAgent!}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "view-agent":
-      return (
-        <ViewAgent
-          agent={modeState.selectedAgent!}
-          tools={tools}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "edit-agent":
-      return (
-        <EditMenu
-          agent={modeState.selectedAgent!}
-          setModeState={setModeState}
-        />
-      )
-      
-    case "edit-tools":
-      return (
-        <EditToolsStep
-          agent={modeState.selectedAgent!}
-          tools={tools}
-          setModeState={setModeState}
-          onAgentUpdated={(message, updated) => {
-            setChanges(prev => [...prev, message])
-            setRefreshKey(prev => prev + 1)
-            setModeState({ mode: "agent-menu", selectedAgent: updated })
-          }}
-        />
-      )
-      
-    case "edit-model":
-      return (
-        <EditModelStep
-          agent={modeState.selectedAgent!}
-          setModeState={setModeState}
-          onAgentUpdated={(message, updated) => {
-            setChanges(prev => [...prev, message])
-            setRefreshKey(prev => prev + 1)
-            setModeState({ mode: "agent-menu", selectedAgent: updated })
-          }}
-        />
-      )
-      
-    case "edit-color":
-      return (
-        <EditColorStep
-          agent={modeState.selectedAgent!}
-          setModeState={setModeState}
-          onAgentUpdated={(message, updated) => {
-            setChanges(prev => [...prev, message])
-            setRefreshKey(prev => prev + 1)
-            setModeState({ mode: "agent-menu", selectedAgent: updated })
-          }}
-        />
-      )
-      
-    case "delete-confirm":
-      return (
-        <DeleteConfirm
-          agent={modeState.selectedAgent!}
-          setModeState={setModeState}
-          onAgentDeleted={handleAgentDeleted}
-        />
-      )
-      
-    default:
-      return (
-        <Box flexDirection="column">
-          <Header title="Agents">
-            <Text>Mode: {modeState.mode} (Not implemented yet)</Text>
-            <Box marginTop={1}>
-              <Text>Press Esc to go back</Text>
-            </Box>
-          </Header>
-          <InstructionBar instructions="Esc to go back" />
-        </Box>
-      )
-  }
-}
-
-interface AgentListProps {
-  location: AgentLocation
-  agents: AgentConfig[]
-  allAgents: AgentConfig[]
-  onBack: () => void
-  onSelect: (agent: AgentConfig) => void
-  onCreateNew?: () => void
-  changes: string[]
-}
-
-function AgentListView({ 
-  location, 
-  agents, 
-  allAgents, 
-  onBack, 
-  onSelect, 
-  onCreateNew, 
-  changes 
-}: AgentListProps) {
-  const theme = getTheme()
-  const allAgentsList = allAgents || agents
-  const customAgents = allAgentsList.filter(a => a.location !== "built-in")
-  const builtInAgents = allAgentsList.filter(a => a.location === "built-in")
-
-  const [selectedAgent, setSelectedAgent] = useState<AgentConfig | null>(null)
-  const [onCreateOption, setOnCreateOption] = useState(true)
-  const [currentLocation, setCurrentLocation] = useState<AgentLocation>(location)
-  const [inLocationTabs, setInLocationTabs] = useState(false)
-  const [selectedLocationTab, setSelectedLocationTab] = useState(0)
-  
-  const locationTabs = [
-    { label: "All", value: "all" as AgentLocation },
-    { label: "Personal", value: "user" as AgentLocation },
-    { label: "Project", value: "project" as AgentLocation }
-  ]
-
-  const activeMap = useMemo(() => {
-    const map = new Map<string, AgentConfig>()
-    agents.forEach(a => map.set(a.agentType, a))
-    return map
-  }, [agents])
-
-  const checkOverride = (agent: AgentConfig) => {
-    const active = activeMap.get(agent.agentType)
-    const isOverridden = !!(active && active.location !== agent.location)
-    return {
-      isOverridden,
-      overriddenBy: isOverridden ? active.location : null
-    }
-  }
-
-  const renderCreateOption = () => (
-    <Box flexDirection="row" gap={1}>
-      <Text color={onCreateOption ? theme.primary : undefined}>
-        {onCreateOption ? `${UI_ICONS.pointer} ` : "  "}
-      </Text>
-      <Text bold color={onCreateOption ? theme.primary : undefined}>
-        ✨ Create new agent
-      </Text>
-    </Box>
-  )
-
-  const renderAgent = (agent: AgentConfig, isBuiltIn = false) => {
-    const isSelected = !isBuiltIn && !onCreateOption && 
-                      selectedAgent?.agentType === agent.agentType &&
-                      selectedAgent?.location === agent.location
-    const { isOverridden, overriddenBy } = checkOverride(agent)
-    const dimmed = isBuiltIn || isOverridden
-    const color = !isBuiltIn && isSelected ? theme.primary : undefined
-    
-    // Extract model from agent metadata
-    const agentModel = (agent as any).model || null
-    const modelDisplay = getDisplayModelName(agentModel)
-
-    return (
-      <Box key={`${agent.agentType}-${agent.location}`} flexDirection="row" alignItems="center">
-        <Box flexDirection="row" alignItems="center" minWidth={3}>
-          <Text dimColor={dimmed && !isSelected} color={color}>
-            {isBuiltIn ? "" : isSelected ? `${UI_ICONS.pointer} ` : "  "}
-          </Text>
-        </Box>
-        <Box flexDirection="row" alignItems="center" flexGrow={1}>
-          <Text dimColor={dimmed && !isSelected} color={color}>
-            {agent.agentType}
-          </Text>
-          <Text dimColor={true} color={dimmed ? undefined : 'gray'}>
-            {" · "}{modelDisplay}
-          </Text>
-        </Box>
-        {overriddenBy && (
-          <Box marginLeft={1}>
-            <Text dimColor={!isSelected} color={isSelected ? 'yellow' : 'gray'}>
-              {UI_ICONS.warning} overridden by {overriddenBy}
-            </Text>
-          </Box>
-        )}
-      </Box>
-    )
-  }
-
-  const displayAgents = useMemo(() => {
-    if (currentLocation === "all") {
-      return [
-        ...customAgents.filter(a => a.location === "user"),
-        ...customAgents.filter(a => a.location === "project")
-      ]
-    } else if (currentLocation === "user" || currentLocation === "project") {
-      return customAgents.filter(a => a.location === currentLocation)
-    }
-    return customAgents
-  }, [customAgents, currentLocation])
-  
-  // 更新当前选中的标签索引
-  useEffect(() => {
-    const tabIndex = locationTabs.findIndex(tab => tab.value === currentLocation)
-    if (tabIndex !== -1) {
-      setSelectedLocationTab(tabIndex)
-    }
-  }, [currentLocation, locationTabs])
-  
-  // 确保当有agents时，初始化选择状态
-  useEffect(() => {
-    if (displayAgents.length > 0 && !selectedAgent && !onCreateOption) {
-      setOnCreateOption(true) // 默认选择创建选项
-    }
-  }, [displayAgents.length, selectedAgent, onCreateOption])
-
-  useInput((input, key) => {
-    if (key.escape) {
-      if (inLocationTabs) {
-        setInLocationTabs(false)
-        return
-      }
-      onBack()
-      return
-    }
-
-    if (key.return) {
-      if (inLocationTabs) {
-        setCurrentLocation(locationTabs[selectedLocationTab].value)
-        setInLocationTabs(false)
-        return
-      }
-      if (onCreateOption && onCreateNew) {
-        onCreateNew()
-      } else if (selectedAgent) {
-        onSelect(selectedAgent)
-      }
-      return
-    }
-    
-    // Tab键进入/退出标签导航
-    if (key.tab) {
-      setInLocationTabs(!inLocationTabs)
-      return
-    }
-    
-    // 在标签导航模式
-    if (inLocationTabs) {
-      if (key.leftArrow) {
-        setSelectedLocationTab(prev => prev > 0 ? prev - 1 : locationTabs.length - 1)
-      } else if (key.rightArrow) {
-        setSelectedLocationTab(prev => prev < locationTabs.length - 1 ? prev + 1 : 0)
-      }
-      return
-    }
-    
-    // 键盘导航 - 这是关键缺失的功能
-    if (key.upArrow || key.downArrow) {
-      const allNavigableItems = []
-      
-      // 添加创建选项
-      if (onCreateNew) {
-        allNavigableItems.push({ type: 'create', agent: null })
-      }
-      
-      // 添加可导航的agents
-      displayAgents.forEach(agent => {
-        const { isOverridden } = checkOverride(agent)
-        if (!isOverridden) { // 只显示未被覆盖的agents
-          allNavigableItems.push({ type: 'agent', agent })
-        }
-      })
-      
-      if (allNavigableItems.length === 0) return
-      
-      if (key.upArrow) {
-        if (onCreateOption) {
-          // 从创建选项向上到最后一个agent
-          const lastAgent = allNavigableItems[allNavigableItems.length - 1]
-          if (lastAgent.type === 'agent') {
-            setSelectedAgent(lastAgent.agent)
-            setOnCreateOption(false)
-          }
-        } else if (selectedAgent) {
-          const currentIndex = allNavigableItems.findIndex(
-            item => item.type === 'agent' && 
-                   item.agent?.agentType === selectedAgent.agentType &&
-                   item.agent?.location === selectedAgent.location
-          )
-          if (currentIndex > 0) {
-            const prevItem = allNavigableItems[currentIndex - 1]
-            if (prevItem.type === 'create') {
-              setOnCreateOption(true)
-              setSelectedAgent(null)
-            } else {
-              setSelectedAgent(prevItem.agent)
-            }
-          } else {
-            // 到达顶部，回到创建选项
-            if (onCreateNew) {
-              setOnCreateOption(true)
-              setSelectedAgent(null)
-            }
-          }
-        }
-      } else if (key.downArrow) {
-        if (onCreateOption) {
-          // 从创建选项向下到第一个agent
-          const firstAgent = allNavigableItems.find(item => item.type === 'agent')
-          if (firstAgent) {
-            setSelectedAgent(firstAgent.agent)
-            setOnCreateOption(false)
-          }
-        } else if (selectedAgent) {
-          const currentIndex = allNavigableItems.findIndex(
-            item => item.type === 'agent' && 
-                   item.agent?.agentType === selectedAgent.agentType &&
-                   item.agent?.location === selectedAgent.location
-          )
-          if (currentIndex < allNavigableItems.length - 1) {
-            const nextItem = allNavigableItems[currentIndex + 1]
-            if (nextItem.type === 'agent') {
-              setSelectedAgent(nextItem.agent)
-            }
-          } else {
-            // 到达底部，回到创建选项
-            if (onCreateNew) {
-              setOnCreateOption(true)
-              setSelectedAgent(null)
-            }
-          }
-        }
-      }
-    }
-  })
-
-  // 特殊的键盘输入处理组件用于空状态
-  const EmptyStateInput = () => {
-    useInput((input, key) => {
-      if (key.escape) {
-        onBack()
-        return
-      }
-      if (key.return && onCreateNew) {
-        onCreateNew()
-        return
-      }
-    })
-    return null
-  }
-
-  if (!agents.length || (currentLocation !== "built-in" && !customAgents.length)) {
-    return (
-      <Box flexDirection="column">
-        <EmptyStateInput />
-        <Header title="🤖 Agents" subtitle="">
-          {onCreateNew && (
-            <Box marginY={1}>
-              {renderCreateOption()}
-            </Box>
-          )}
-          <Box marginTop={1} flexDirection="column">
-            <Box marginBottom={1}>
-              <Text bold color={theme.primary}>💭 What are agents?</Text>
-            </Box>
-            <Text>Specialized AI assistants that Claude can delegate to for specific tasks.</Text>
-            <Text>Each agent has its own context, prompt, and tools.</Text>
-            
-            <Box marginTop={1} marginBottom={1}>
-              <Text bold color={theme.primary}>💡 Popular agent ideas:</Text>
-            </Box>
-            <Box paddingLeft={2} flexDirection="column">
-              <Text>• 🔍 Code Reviewer - Reviews PRs for best practices</Text>
-              <Text>• 🔒 Security Auditor - Finds vulnerabilities</Text>
-              <Text>• ⚡ Performance Optimizer - Improves code speed</Text>
-              <Text>• 🧑‍💼 Tech Lead - Makes architecture decisions</Text>
-              <Text>• 🎨 UX Expert - Improves user experience</Text>
-            </Box>
-          </Box>
-
-          {currentLocation !== "built-in" && builtInAgents.length > 0 && (
-            <>
-              <Box marginTop={1}><Text>{UI_ICONS.separator.repeat(40)}</Text></Box>
-              <Box flexDirection="column" marginBottom={1} paddingLeft={2}>
-                <Text bold color={theme.secondary}>Built-in (always available):</Text>
-                {builtInAgents.map(a => renderAgent(a, true))}
-              </Box>
-            </>
-          )}
-        </Header>
-        <InstructionBar instructions="Press Enter to create new agent · Esc to go back" />
-      </Box>
-    )
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Header title="🤖 Agents" subtitle="">
-        {changes.length > 0 && (
-          <Box marginTop={1}>
-            <Text dimColor>{changes[changes.length - 1]}</Text>
-          </Box>
-        )}
-
-        {/* Fancy location tabs */}
-        <Box marginTop={1} flexDirection="column">
-          <Box flexDirection="row" gap={2}>
-            {locationTabs.map((tab, idx) => {
-              const isActive = currentLocation === tab.value
-              const isSelected = inLocationTabs && idx === selectedLocationTab
-              return (
-                <Box key={tab.value} flexDirection="row">
-                  <Text 
-                    color={isSelected || isActive ? theme.primary : undefined}
-                    bold={isActive}
-                    dimColor={!isActive && !isSelected}
-                  >
-                    {isSelected ? '▶ ' : isActive ? '◉ ' : '○ '}
-                    {tab.label}
-                  </Text>
-                  {idx < locationTabs.length - 1 && <Text dimColor> | </Text>}
-                </Box>
-              )
-            })}
-          </Box>
-          <Box marginTop={0}>
-            <Text dimColor>
-              {currentLocation === 'all' ? 'Showing all agents' : 
-               currentLocation === 'user' ? 'Personal agents (~/.claude/agents)' : 
-               'Project agents (.claude/agents)'}
-            </Text>
-          </Box>
-        </Box>
-
-        <Box flexDirection="column" marginTop={1}>
-          {onCreateNew && (
-            <Box marginBottom={1}>
-              {renderCreateOption()}
-            </Box>
-          )}
-
-          {currentLocation === "all" ? (
-            <>
-              {customAgents.filter(a => a.location === "user").length > 0 && (
-                <>
-                  <Text bold color={theme.secondary}>Personal:</Text>
-                  {customAgents.filter(a => a.location === "user").map(a => renderAgent(a))}
-                </>
-              )}
-              
-              {customAgents.filter(a => a.location === "project").length > 0 && (
-                <>
-                  <Box marginTop={customAgents.filter(a => a.location === "user").length > 0 ? 1 : 0}>
-                    <Text bold color={theme.secondary}>Project:</Text>
-                  </Box>
-                  {customAgents.filter(a => a.location === "project").map(a => renderAgent(a))}
-                </>
-              )}
-              
-              {builtInAgents.length > 0 && (
-                <>
-                  <Box marginTop={customAgents.length > 0 ? 1 : 0}>
-                    <Text>{UI_ICONS.separator.repeat(40)}</Text>
-                  </Box>
-                  <Box flexDirection="column">
-                    <Text bold color={theme.secondary}>Built-in:</Text>
-                    {builtInAgents.map(a => renderAgent(a, true))}
-                  </Box>
-                </>
-              )}
-            </>
-          ) : (
-            <>
-              {displayAgents.map(a => renderAgent(a))}
-              {currentLocation !== "built-in" && builtInAgents.length > 0 && (
-                <>
-                  <Box marginTop={1}><Text>{UI_ICONS.separator.repeat(40)}</Text></Box>
-                  <Box flexDirection="column">
-                    <Text bold color={theme.secondary}>Built-in:</Text>
-                    {builtInAgents.map(a => renderAgent(a, true))}
-                  </Box>
-                </>
-              )}
-            </>
-          )}
-        </Box>
-      </Header>
-      <InstructionBar 
-        instructions={inLocationTabs ? 
-          "←→ Switch tabs • Enter Select • Tab Exit tabs" :
-          "↑↓ Navigate • Tab Location • Enter Select"
-        }
-      />
-    </Box>
-  )
-}
-
-// Common interface for creation step props
-interface StepProps {
-  createState: CreateState
-  setCreateState: React.Dispatch<any>
-  setModeState: (state: ModeState) => void
-}
-
-// Step 3: AI Generation
-interface GenerateStepProps extends StepProps {
-  existingAgents: AgentConfig[]
-}
-
-function GenerateStep({ createState, setCreateState, setModeState, existingAgents }: GenerateStepProps) {
-  const handleSubmit = async () => {
-    if (createState.generationPrompt.trim()) {
-      setCreateState({ type: 'SET_IS_GENERATING', value: true })
-      setCreateState({ type: 'SET_ERROR', value: null })
-      
-      try {
-        const generated = await generateAgentWithClaude(createState.generationPrompt)
-        
-        // Validate the generated identifier doesn't conflict
-        const validation = validateAgentType(generated.identifier, existingAgents)
-        let finalIdentifier = generated.identifier
-        
-        if (!validation.isValid) {
-          // Add a suffix to make it unique
-          let counter = 1
-          while (true) {
-            const testId = `${generated.identifier}-${counter}`
-            const testValidation = validateAgentType(testId, existingAgents)
-            if (testValidation.isValid) {
-              finalIdentifier = testId
-              break
-            }
-            counter++
-            if (counter > 10) {
-              finalIdentifier = `custom-agent-${Date.now()}`
-              break
-            }
-          }
-        }
-        
-        setCreateState({ type: 'SET_AGENT_TYPE', value: finalIdentifier })
-        setCreateState({ type: 'SET_WHEN_TO_USE', value: generated.whenToUse })
-        setCreateState({ type: 'SET_SYSTEM_PROMPT', value: generated.systemPrompt })
-        setCreateState({ type: 'SET_WAS_GENERATED', value: true })
-        setCreateState({ type: 'SET_IS_GENERATING', value: false })
-        setModeState({ mode: 'create-tools', location: createState.location })
-      } catch (error) {
-        console.error('Generation failed:', error)
-        setCreateState({ type: 'SET_ERROR', value: 'Failed to generate agent. Please try again or use manual configuration.' })
-        setCreateState({ type: 'SET_IS_GENERATING', value: false })
-      }
-    }
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="✨ New Agent" subtitle="What should it do?" step={2} totalSteps={8}>
-        <Box marginTop={1}>
-          {createState.isGenerating ? (
-            <Box flexDirection="column">
-              <Text dimColor>{createState.generationPrompt}</Text>
-              <Box marginTop={1}>
-                <LoadingSpinner text="Generating agent configuration..." />
-              </Box>
-            </Box>
-          ) : (
-            <MultilineTextInput
-              value={createState.generationPrompt}
-              onChange={(value) => setCreateState({ type: 'SET_GENERATION_PROMPT', value })}
-              placeholder="An expert that reviews pull requests for best practices, security issues, and suggests improvements..."
-              onSubmit={handleSubmit}
-              error={createState.error}
-              rows={3}
-            />
-          )}
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Step 4: Manual type input (for manual method)
-interface TypeStepProps extends StepProps {
-  existingAgents: AgentConfig[]
-}
-
-function TypeStep({ createState, setCreateState, setModeState, existingAgents }: TypeStepProps) {
-  const handleSubmit = () => {
-    const validation = validateAgentType(createState.agentType, existingAgents)
-    if (validation.isValid) {
-      setModeState({ mode: 'create-prompt', location: createState.location })
-    } else {
-      setCreateState({ type: 'SET_ERROR', value: validation.errors[0] })
-    }
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="Create new agent" subtitle="Enter agent identifier" step={3} totalSteps={8}>
-        <Box marginTop={1}>
-          <InkTextInput
-            value={createState.agentType}
-            onChange={(value) => setCreateState({ type: 'SET_AGENT_TYPE', value })}
-            placeholder="e.g. code-reviewer, tech-lead"
-            onSubmit={handleSubmit}
-          />
-          {createState.error && (
-            <Box marginTop={1}>
-              <Text color="red">⚠ {createState.error}</Text>
-            </Box>
-          )}
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Step 5: Description input
-function DescriptionStep({ createState, setCreateState, setModeState }: StepProps) {
-  const handleSubmit = () => {
-    if (createState.whenToUse.trim()) {
-      setModeState({ mode: 'create-tools', location: createState.location })
-    }
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="Create new agent" subtitle="Describe when to use this agent" step={5} totalSteps={8}>
-        <Box marginTop={1}>
-          <MultilineTextInput
-            value={createState.whenToUse}
-            onChange={(value) => setCreateState({ type: 'SET_WHEN_TO_USE', value })}
-            placeholder="Use this agent when you need to review code for best practices, security issues..."
-            onSubmit={handleSubmit}
-            error={createState.error}
-            rows={4}
-          />
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Step 6: Tools selection
-interface ToolsStepProps extends StepProps {
-  tools: Tool[]
-}
-
-function ToolsStep({ createState, setCreateState, setModeState, tools }: ToolsStepProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  // Default to all tools selected initially
-  const initialSelection = createState.selectedTools.length > 0 ? 
-    new Set(createState.selectedTools) : 
-    new Set(tools.map(t => t.name))  // Select all tools by default
-  const [selectedTools, setSelectedTools] = useState<Set<string>>(initialSelection)
-  const [showAdvanced, setShowAdvanced] = useState(false)
-  const [selectedCategory, setSelectedCategory] = useState<keyof typeof TOOL_CATEGORIES | 'mcp' | 'all'>('all')
-  
-  // Categorize tools
-  const categorizedTools = useMemo(() => {
-    const categories: Record<string, Tool[]> = {
-      read: [],
-      edit: [],
-      execution: [],
-      web: [],
-      mcp: [],
-      other: []
-    }
-    
-    tools.forEach(tool => {
-      let categorized = false
-      
-      // Check MCP tools first
-      if (tool.name.startsWith('mcp__')) {
-        categories.mcp.push(tool)
-        categorized = true
-      } else {
-        // Check built-in categories
-        for (const [category, toolNames] of Object.entries(TOOL_CATEGORIES)) {
-          if (Array.isArray(toolNames) && toolNames.includes(tool.name)) {
-            categories[category as keyof typeof categories]?.push(tool)
-            categorized = true
-            break
-          }
-        }
-      }
-      
-      if (!categorized) {
-        categories.other.push(tool)
-      }
-    })
-    
-    return categories
-  }, [tools])
-  
-  const displayTools = useMemo(() => {
-    if (selectedCategory === 'all') {
-      return tools
-    }
-    return categorizedTools[selectedCategory] || []
-  }, [selectedCategory, tools, categorizedTools])
-  
-  const allSelected = selectedTools.size === tools.length && tools.length > 0
-  const categoryOptions = [
-    { id: 'all', label: `All (${tools.length})` },
-    { id: 'read', label: `Read (${categorizedTools.read.length})` },
-    { id: 'edit', label: `Edit (${categorizedTools.edit.length})` },
-    { id: 'execution', label: `Execution (${categorizedTools.execution.length})` },
-    { id: 'web', label: `Web (${categorizedTools.web.length})` },
-    { id: 'mcp', label: `MCP (${categorizedTools.mcp.length})` },
-    { id: 'other', label: `Other (${categorizedTools.other.length})` }
-  ].filter(cat => cat.id === 'all' || categorizedTools[cat.id]?.length > 0)
-  
-  // Calculate category selections
-  const readSelected = categorizedTools.read.every(tool => selectedTools.has(tool.name))
-  const editSelected = categorizedTools.edit.every(tool => selectedTools.has(tool.name))
-  const execSelected = categorizedTools.execution.every(tool => selectedTools.has(tool.name))
-  const webSelected = categorizedTools.web.every(tool => selectedTools.has(tool.name))
-  
-  const options: Array<{
-    id: string
-    label: string
-    isContinue?: boolean
-    isAll?: boolean
-    isTool?: boolean
-    isCategory?: boolean
-    isAdvancedToggle?: boolean
-    isSeparator?: boolean
-  }> = [
-    { id: 'continue', label: 'Save', isContinue: true },
-    { id: 'separator1', label: '────────────────────────────────────', isSeparator: true },
-    { id: 'all', label: `${allSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} All tools`, isAll: true },
-    { id: 'read', label: `${readSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Read-only tools`, isCategory: true },
-    { id: 'edit', label: `${editSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Edit tools`, isCategory: true },
-    { id: 'execution', label: `${execSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Execution tools`, isCategory: true },
-    { id: 'separator2', label: '────────────────────────────────────', isSeparator: true },
-    { id: 'advanced', label: `[ ${showAdvanced ? 'Hide' : 'Show'} advanced options ]`, isAdvancedToggle: true },
-    ...(showAdvanced ? displayTools.map(tool => ({
-      id: tool.name,
-      label: `${selectedTools.has(tool.name) ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} ${tool.name}`,
-      isTool: true
-    })) : [])
-  ]
-  
-  const handleSelect = () => {
-    const option = options[selectedIndex] as any // Type assertion for union type
-    if (!option) return
-    if (option.isSeparator) return
-    
-    if (option.isContinue) {
-      const result = allSelected ? ['*'] : Array.from(selectedTools)
-      setCreateState({ type: 'SET_SELECTED_TOOLS', value: result })
-      setModeState({ mode: 'create-model', location: createState.location })
-    } else if (option.isAdvancedToggle) {
-      setShowAdvanced(!showAdvanced)
-    } else if (option.isAll) {
-      if (allSelected) {
-        setSelectedTools(new Set())
-      } else {
-        setSelectedTools(new Set(tools.map(t => t.name)))
-      }
-    } else if (option.isCategory) {
-      const categoryName = option.id as keyof typeof categorizedTools
-      const categoryTools = categorizedTools[categoryName] || []
-      const newSelected = new Set(selectedTools)
-      
-      const categorySelected = categoryTools.every(tool => selectedTools.has(tool.name))
-      if (categorySelected) {
-        // Unselect all tools in this category
-        categoryTools.forEach(tool => newSelected.delete(tool.name))
-      } else {
-        // Select all tools in this category
-        categoryTools.forEach(tool => newSelected.add(tool.name))
-      }
-      setSelectedTools(newSelected)
-    } else if (option.isTool) {
-      const newSelected = new Set(selectedTools)
-      if (newSelected.has(option.id)) {
-        newSelected.delete(option.id)
-      } else {
-        newSelected.add(option.id)
-      }
-      setSelectedTools(newSelected)
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.return) {
-      handleSelect()
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => {
-        let newIndex = prev > 0 ? prev - 1 : options.length - 1
-        // Skip separators when going up
-        while (options[newIndex] && (options[newIndex] as any).isSeparator) {
-          newIndex = newIndex > 0 ? newIndex - 1 : options.length - 1
-        }
-        return newIndex
-      })
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => {
-        let newIndex = prev < options.length - 1 ? prev + 1 : 0
-        // Skip separators when going down
-        while (options[newIndex] && (options[newIndex] as any).isSeparator) {
-          newIndex = newIndex < options.length - 1 ? newIndex + 1 : 0
-        }
-        return newIndex
-      })
-    }
-  })
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="🔧 Tool Permissions" subtitle="" step={3} totalSteps={5}>
-        <Box flexDirection="column" marginTop={1}>
-          {options.map((option, idx) => {
-            const isSelected = idx === selectedIndex
-            const isContinue = option.isContinue
-            const isAdvancedToggle = option.isAdvancedToggle
-            const isSeparator = option.isSeparator
-            
-            return (
-              <Box key={option.id}>
-                <Text 
-                  color={isSelected && !isSeparator ? 'cyan' : isSeparator ? 'gray' : undefined}
-                  bold={isContinue}
-                  dimColor={isSeparator}
-                >
-                  {isSeparator ? 
-                    option.label : 
-                    `${isSelected ? `${UI_ICONS.pointer} ` : '  '}${isContinue || isAdvancedToggle ? `${option.label}` : option.label}`
-                  }
-                </Text>
-                {option.isTool && isSelected && tools.find(t => t.name === option.id)?.description && (
-                  <Box marginLeft={4}>
-                    <Text dimColor>{tools.find(t => t.name === option.id)?.description}</Text>
-                  </Box>
-                )}
-              </Box>
-            )
-          })}
-          
-          <Box marginTop={1}>
-            <Text dimColor>
-              {allSelected ? 
-                'All tools selected' : 
-                `${selectedTools.size} of ${tools.length} tools selected`}
-            </Text>
-            {selectedCategory !== 'all' && (
-              <Text dimColor>Filtering: {selectedCategory} tools</Text>
-            )}
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ Navigate • Enter Toggle • Esc Back" />
-    </Box>
-  )
-}
-
-// Step 6: Model selection (clean design like /models)
-function ModelStep({ createState, setCreateState, setModeState }: StepProps) {
-  const theme = getTheme()
-  const manager = getModelManager()
-  const profiles = manager.getActiveModelProfiles()
-  
-  // Group models by provider
-  const groupedModels = profiles.reduce((acc: any, profile: any) => {
-    const provider = profile.provider || 'Default'
-    if (!acc[provider]) acc[provider] = []
-    acc[provider].push(profile)
-    return acc
-  }, {})
-  
-  // Flatten with inherit option
-  const modelOptions = [
-    { id: null, name: '◈ Inherit from parent', provider: 'System', modelName: 'default' },
-    ...Object.entries(groupedModels).flatMap(([provider, models]: any) => 
-      models.map((p: any) => ({
-        id: p.modelName,
-        name: p.name,
-        provider: provider,
-        modelName: p.modelName
-      }))
-    )
-  ]
-
-  const [selectedIndex, setSelectedIndex] = useState(() => {
-    const idx = modelOptions.findIndex(m => m.id === createState.selectedModel)
-    return idx >= 0 ? idx : 0
-  })
-
-  const handleSelect = (modelId: string | null) => {
-    setCreateState({ type: 'SET_SELECTED_MODEL', value: modelId })
-    setModeState({ mode: 'create-color', location: createState.location })
-  }
-
-  useInput((input, key) => {
-    if (key.return) {
-      handleSelect(modelOptions[selectedIndex].id)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => (prev > 0 ? prev - 1 : modelOptions.length - 1))
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => (prev < modelOptions.length - 1 ? prev + 1 : 0))
-    }
-  })
-
-  return (
-    <Box flexDirection="column">
-      <Header title="🤖 Select Model" subtitle="" step={4} totalSteps={5}>
-        <Box marginTop={1} flexDirection="column">
-          {modelOptions.map((model, index) => {
-            const isSelected = index === selectedIndex
-            const isInherit = model.id === null
-            
-            return (
-              <Box key={model.id || 'inherit'} marginBottom={0}>
-                <Box flexDirection="row" gap={1}>
-                  <Text color={isSelected ? theme.primary : undefined}>
-                    {isSelected ? UI_ICONS.pointer : ' '}
-                  </Text>
-                  <Box flexDirection="column" flexGrow={1}>
-                    <Box flexDirection="row" gap={1}>
-                      <Text 
-                        bold={isInherit}
-                        color={isSelected ? theme.primary : undefined}
-                      >
-                        {model.name}
-                      </Text>
-                      {!isInherit && (
-                        <Text dimColor>
-                          {model.provider} • {model.modelName}
-                        </Text>
-                      )}
-                    </Box>
-                  </Box>
-                </Box>
-              </Box>
-            )
-          })}
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ Navigate • Enter Select" />
-    </Box>
-  )
-}
-
-// Step 7: Color selection (using hex colors for display)
-function ColorStep({ createState, setCreateState, setModeState }: StepProps) {
-  const theme = getTheme()
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  
-  // Color options without red/green due to display issues
-  const colors = [
-    { label: 'Default', value: null, displayColor: null },
-    { label: 'Yellow', value: 'yellow', displayColor: 'yellow' },
-    { label: 'Blue', value: 'blue', displayColor: 'blue' },
-    { label: 'Magenta', value: 'magenta', displayColor: 'magenta' },
-    { label: 'Cyan', value: 'cyan', displayColor: 'cyan' },
-    { label: 'Gray', value: 'gray', displayColor: 'gray' },
-    { label: 'White', value: 'white', displayColor: 'white' }
-  ]
-  
-  const handleSelect = (value: string | null) => {
-    setCreateState({ type: 'SET_SELECTED_COLOR', value: value })
-    setModeState({ mode: 'create-confirm', location: createState.location })
-  }
-  
-  useInput((input, key) => {
-    if (key.return) {
-      handleSelect(colors[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : colors.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < colors.length - 1 ? prev + 1 : 0)
-    }
-  })
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="🎨 Color Theme" subtitle="" step={5} totalSteps={5}>
-        <Box marginTop={1} flexDirection="column">
-          <Box marginBottom={1}>
-            <Text dimColor>Choose how your agent appears in the list:</Text>
-          </Box>
-          {colors.map((color, idx) => {
-            const isSelected = idx === selectedIndex
-            return (
-              <Box key={idx} flexDirection="row">
-                <Text color={isSelected ? theme.primary : undefined}>
-                  {isSelected ? '❯ ' : '  '}
-                </Text>
-                <Box minWidth={12}>
-                  <Text bold={isSelected} color={color.displayColor || undefined}>
-                    {color.label}
-                  </Text>
-                </Box>
-              </Box>
-            )
-          })}
-          <Box marginTop={1} paddingLeft={2}>
-            <Text>Preview: </Text>
-            <Text bold color={colors[selectedIndex].displayColor || undefined}>
-              {createState.agentType || 'your-agent'}
-            </Text>
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ Navigate • Enter Select" />
-    </Box>
-  )
-}
-
-// Step 8: System prompt
-function PromptStep({ createState, setCreateState, setModeState }: StepProps) {
-  const handleSubmit = () => {
-    if (createState.systemPrompt.trim()) {
-      setModeState({ mode: 'create-description', location: createState.location })
-    }
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="Create new agent" subtitle="System prompt" step={4} totalSteps={8}>
-        <Box marginTop={1}>
-          <MultilineTextInput
-            value={createState.systemPrompt}
-            onChange={(value) => setCreateState({ type: 'SET_SYSTEM_PROMPT', value })}
-            placeholder="You are a helpful assistant that specializes in..."
-            onSubmit={handleSubmit}
-            error={createState.error}
-            rows={5}
-          />
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Step 9: Confirmation
-interface ConfirmStepProps extends StepProps {
-  tools: Tool[]
-  onAgentCreated: (message: string) => void
-}
-
-function ConfirmStep({ createState, setCreateState, setModeState, tools, onAgentCreated }: ConfirmStepProps) {
-  const [isCreating, setIsCreating] = useState(false)
-  const theme = getTheme()
-  
-  const handleConfirm = async () => {
-    setIsCreating(true)
-    try {
-      await saveAgent(
-        createState.location!,
-        createState.agentType,
-        createState.whenToUse,
-        createState.selectedTools,
-        createState.systemPrompt,
-        createState.selectedModel,
-        createState.selectedColor || undefined
-      )
-      onAgentCreated(`Created agent: ${createState.agentType}`)
-    } catch (error) {
-      setCreateState({ type: 'SET_ERROR', value: (error as Error).message })
-      setIsCreating(false)
-    }
-  }
-  
-  const validation = validateAgentConfig(createState)
-  const toolNames = createState.selectedTools.includes('*') ? 
-    'All tools' : 
-    createState.selectedTools.length > 0 ? 
-      createState.selectedTools.join(', ') : 
-      'No tools'
-  
-  const handleEditInEditor = async () => {
-    const filePath = createState.location === 'project' 
-      ? path.join(process.cwd(), '.claude', 'agents', `${createState.agentType}.md`)
-      : path.join(os.homedir(), '.claude', 'agents', `${createState.agentType}.md`)
-    
-    try {
-      // First, save the agent file
-      await saveAgent(
-        createState.location!,
-        createState.agentType,
-        createState.whenToUse,
-        createState.selectedTools,
-        createState.systemPrompt,
-        createState.selectedModel,
-        createState.selectedColor || undefined
-      )
-      
-      // Then open it in editor
-      const command = process.platform === 'win32' ? 'start' : 
-                    process.platform === 'darwin' ? 'open' : 'xdg-open'
-      await execAsync(`${command} "${filePath}"`)
-      onAgentCreated(`Created agent: ${createState.agentType}`)
-    } catch (error) {
-      setCreateState({ type: 'SET_ERROR', value: (error as Error).message })
-    }
-  }
-
-  useInput((input, key) => {
-    if (isCreating) return
-    
-    if ((key.return || input === 's') && !isCreating) {
-      handleConfirm()
-    } else if (input === 'e') {
-      handleEditInEditor()
-    } else if (key.escape) {
-      setModeState({ mode: "create-color", location: createState.location! })
-    }
-  })
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="✅ Review & Create" subtitle="">
-        <Box flexDirection="column" marginTop={1}>
-          <Box marginBottom={1}>
-            <Text bold color={theme.primary}>📋 Configuration</Text>
-          </Box>
-          
-          <Box flexDirection="column" gap={0}>
-            <Text>• <Text bold>Agent ID:</Text> {createState.agentType}</Text>
-            <Text>• <Text bold>Location:</Text> {createState.location === 'project' ? 'Project' : 'Personal'}</Text>
-            <Text>• <Text bold>Tools:</Text> {toolNames.length > 50 ? toolNames.slice(0, 50) + '...' : toolNames}</Text>
-            <Text>• <Text bold>Model:</Text> {getDisplayModelName(createState.selectedModel)}</Text>
-            {createState.selectedColor && (
-              <Text>• <Text bold>Color:</Text> <Text color={createState.selectedColor}>{createState.selectedColor}</Text></Text>
-            )}
-          </Box>
-          
-          <Box marginTop={1} marginBottom={1}>
-            <Text bold color={theme.primary}>📝 Purpose</Text>
-          </Box>
-          <Box paddingLeft={1}>
-            <Text>{createState.whenToUse}</Text>
-          </Box>
-          
-          {validation.warnings.length > 0 && (
-            <Box marginTop={1}>
-              <Text><Text bold>Warnings:</Text></Text>
-              {validation.warnings.map((warning, idx) => (
-                <Fragment key={idx}>
-                  <Text color={theme.warning}> • {warning}</Text>
-                </Fragment>
-              ))}
-            </Box>
-          )}
-          
-          {createState.error && (
-            <Box marginTop={1}>
-              <Text color={theme.error}>✗ {createState.error}</Text>
-            </Box>
-          )}
-          
-          <Box marginTop={2}>
-            {isCreating ? (
-              <LoadingSpinner text="Creating agent..." />
-            ) : null}
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar instructions="Enter Save • E Edit • Esc Back" />
-    </Box>
-  )
-}
-
-// Step 1: Location selection
-interface LocationSelectProps {
-  createState: CreateState
-  setCreateState: React.Dispatch<any>
-  setModeState: (state: ModeState) => void
-}
-
-function LocationSelect({ createState, setCreateState, setModeState }: LocationSelectProps) {
-  const theme = getTheme()
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  
-  const options = [
-    { label: "📁 Project", value: "project", desc: ".claude/agents/" },
-    { label: "🏠 Personal", value: "user", desc: "~/.claude/agents/" }
-  ]
-
-  const handleChange = (value: string) => {
-    setCreateState({ type: 'SET_LOCATION', value: value as AgentLocation })
-    setCreateState({ type: 'SET_METHOD', value: 'generate' }) // Always use generate method
-    setModeState({ mode: "create-generate", location: value as AgentLocation })
-  }
-
-  const handleCancel = () => {
-    setModeState({ mode: "list-agents", location: "all" as AgentLocation })
-  }
-
-  useInput((input, key) => {
-    if (key.escape) {
-      handleCancel()
-    } else if (key.return) {
-      handleChange(options[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : options.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < options.length - 1 ? prev + 1 : 0)
-    }
-  })
-
-  return (
-    <Box flexDirection="column">
-      <Header title="📦 Save Location" subtitle="" step={1} totalSteps={5}>
-        <Box marginTop={1} flexDirection="column">
-          {options.map((opt, idx) => (
-            <Box key={opt.value} flexDirection="column" marginBottom={1}>
-              <Text color={idx === selectedIndex ? theme.primary : undefined}>
-                {idx === selectedIndex ? '❯ ' : '  '}{opt.label}
-              </Text>
-              <Box marginLeft={3}>
-                <Text dimColor>{opt.desc}</Text>
-              </Box>
-            </Box>
-          ))}
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ Navigate • Enter Select" />
-    </Box>
-  )
-}
-
-// Step 2: Method selection
-interface MethodSelectProps {
-  createState: CreateState
-  setCreateState: React.Dispatch<any>
-  setModeState: (state: ModeState) => void
-}
-
-function MethodSelect({ createState, setCreateState, setModeState }: MethodSelectProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  
-  const options = [
-    { label: "Generate with Claude (recommended)", value: "generate" },
-    { label: "Manual configuration", value: "manual" }
-  ]
-
-  const handleChange = (value: string) => {
-    setCreateState({ type: 'SET_METHOD', value: value as 'generate' | 'manual' })
-    if (value === "generate") {
-      setCreateState({ type: 'SET_IS_AI_GENERATED', value: true })
-      setModeState({ mode: "create-generate", location: createState.location })
-    } else {
-      setCreateState({ type: 'SET_IS_AI_GENERATED', value: false })
-      setModeState({ mode: "create-type", location: createState.location })
-    }
-  }
-
-  const handleCancel = () => {
-    setModeState({ mode: "create-location" })
-  }
-
-  useInput((input, key) => {
-    if (key.escape) {
-      handleCancel()
-    } else if (key.return) {
-      handleChange(options[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : options.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < options.length - 1 ? prev + 1 : 0)
-    }
-  })
-
-  return (
-    <Box flexDirection="column">
-      <Header title="Create new agent" subtitle="Creation method" step={2} totalSteps={9}>
-        <Box marginTop={1}>
-          <SelectList 
-            options={options}
-            selectedIndex={selectedIndex}
-            onChange={handleChange}
-            onCancel={handleCancel}
-          />
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Agent menu for agent operations
-interface AgentMenuProps {
-  agent: AgentConfig
-  setModeState: (state: ModeState) => void
-}
-
-function AgentMenu({ agent, setModeState }: AgentMenuProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  
-  const options = [
-    { label: "View details", value: "view" },
-    { label: "Edit agent", value: "edit", disabled: agent.location === 'built-in' },
-    { label: "Delete agent", value: "delete", disabled: agent.location === 'built-in' }
-  ]
-  
-  const availableOptions = options.filter(opt => !opt.disabled)
-  
-  const handleSelect = (value: string) => {
-    switch (value) {
-      case "view":
-        setModeState({ mode: "view-agent", selectedAgent: agent })
-        break
-      case "edit":
-        setModeState({ mode: "edit-agent", selectedAgent: agent })
-        break
-      case "delete":
-        setModeState({ mode: "delete-confirm", selectedAgent: agent })
-        break
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.return) {
-      handleSelect(availableOptions[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : availableOptions.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < availableOptions.length - 1 ? prev + 1 : 0)
-    }
-  })
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Agent: ${agent.agentType}`} subtitle={`${agent.location}`}>
-        <Box marginTop={1}>
-          <SelectList 
-            options={availableOptions}
-            selectedIndex={selectedIndex}
-            onChange={handleSelect}
-            numbered={false}
-          />
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Edit menu for agent editing options
-interface EditMenuProps {
-  agent: AgentConfig
-  setModeState: (state: ModeState) => void
-}
-
-function EditMenu({ agent, setModeState }: EditMenuProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [isOpening, setIsOpening] = useState(false)
-  const theme = getTheme()
-  
-  const options = [
-    { label: "Open in editor", value: "open-editor" },
-    { label: "Edit tools", value: "edit-tools" },
-    { label: "Edit model", value: "edit-model" },
-    { label: "Edit color", value: "edit-color" }
-  ]
-  
-  const handleSelect = async (value: string) => {
-    switch (value) {
-      case "open-editor":
-        setIsOpening(true)
-        try {
-          const filePath = getAgentFilePath(agent)
-          await openInEditor(filePath)
-          setModeState({ mode: "agent-menu", selectedAgent: agent })
-        } catch (error) {
-          console.error('Failed to open editor:', error)
-          // TODO: Show error to user
-        } finally {
-          setIsOpening(false)
-        }
-        break
-      case "edit-tools":
-        setModeState({ mode: "edit-tools", selectedAgent: agent })
-        break
-      case "edit-model":
-        setModeState({ mode: "edit-model", selectedAgent: agent })
-        break
-      case "edit-color":
-        setModeState({ mode: "edit-color", selectedAgent: agent })
-        break
-    }
-  }
-  
-  const handleBack = () => {
-    setModeState({ mode: "agent-menu", selectedAgent: agent })
-  }
-  
-  useInput((input, key) => {
-    if (key.escape) {
-      handleBack()
-    } else if (key.return && !isOpening) {
-      handleSelect(options[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : options.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < options.length - 1 ? prev + 1 : 0)
-    }
-  })
-  
-  if (isOpening) {
-    return (
-      <Box flexDirection="column">
-        <Header title={`Edit agent: ${agent.agentType}`} subtitle="Opening in editor...">
-          <Box marginTop={1}>
-            <LoadingSpinner text="Opening file in editor..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Edit agent: ${agent.agentType}`} subtitle={`Location: ${agent.location}`}>
-        <Box marginTop={1}>
-          <SelectList 
-            options={options}
-            selectedIndex={selectedIndex}
-            onChange={handleSelect}
-            numbered={false}
-          />
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ navigate · Enter select · Esc back" />
-    </Box>
-  )
-}
-
-// Edit tools step
-interface EditToolsStepProps {
-  agent: AgentConfig
-  tools: Tool[]
-  setModeState: (state: ModeState) => void
-  onAgentUpdated: (message: string, updated: AgentConfig) => void
-}
-
-function EditToolsStep({ agent, tools, setModeState, onAgentUpdated }: EditToolsStepProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  
-  // Initialize selected tools based on agent.tools
-  const initialTools = Array.isArray(agent.tools) ? agent.tools : 
-                       agent.tools === '*' ? tools.map(t => t.name) : []
-  const [selectedTools, setSelectedTools] = useState<Set<string>>(new Set(initialTools))
-  const [showAdvanced, setShowAdvanced] = useState(false)
-  const [isUpdating, setIsUpdating] = useState(false)
-  
-  // Categorize tools
-  const categorizedTools = useMemo(() => {
-    const categories: Record<string, Tool[]> = {
-      read: [],
-      edit: [],
-      execution: [],
-      web: [],
-      other: []
-    }
-    
-    tools.forEach(tool => {
-      let categorized = false
-      
-      // Check built-in categories
-      for (const [category, toolNames] of Object.entries(TOOL_CATEGORIES)) {
-        if (Array.isArray(toolNames) && toolNames.includes(tool.name)) {
-          categories[category as keyof typeof categories]?.push(tool)
-          categorized = true
-          break
-        }
-      }
-      
-      if (!categorized) {
-        categories.other.push(tool)
-      }
-    })
-    
-    return categories
-  }, [tools])
-  
-  const allSelected = selectedTools.size === tools.length && tools.length > 0
-  const readSelected = categorizedTools.read.every(tool => selectedTools.has(tool.name)) && categorizedTools.read.length > 0
-  const editSelected = categorizedTools.edit.every(tool => selectedTools.has(tool.name)) && categorizedTools.edit.length > 0
-  const execSelected = categorizedTools.execution.every(tool => selectedTools.has(tool.name)) && categorizedTools.execution.length > 0
-  
-  const options = [
-    { id: 'continue', label: 'Save', isContinue: true },
-    { id: 'separator1', label: '────────────────────────────────────', isSeparator: true },
-    { id: 'all', label: `${allSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} All tools`, isAll: true },
-    { id: 'read', label: `${readSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Read-only tools`, isCategory: true },
-    { id: 'edit', label: `${editSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Edit tools`, isCategory: true },
-    { id: 'execution', label: `${execSelected ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} Execution tools`, isCategory: true },
-    { id: 'separator2', label: '────────────────────────────────────', isSeparator: true },
-    { id: 'advanced', label: `[ ${showAdvanced ? 'Hide' : 'Show'} advanced options ]`, isAdvancedToggle: true },
-    ...(showAdvanced ? tools.map(tool => ({
-      id: tool.name,
-      label: `${selectedTools.has(tool.name) ? UI_ICONS.checkboxOn : UI_ICONS.checkboxOff} ${tool.name}`,
-      isTool: true
-    })) : [])
-  ]
-  
-  const handleSave = async () => {
-    setIsUpdating(true)
-    try {
-      // Type-safe tools conversion for updateAgent
-      const toolsArray: string[] | '*' = allSelected ? '*' : Array.from(selectedTools)
-      await updateAgent(agent, agent.whenToUse, toolsArray, agent.systemPrompt, agent.color, (agent as any).model)
-      
-      // Clear cache and reload fresh agent data from file system
-      clearAgentCache()
-      const freshAgents = await getActiveAgents()
-      const updatedAgent = freshAgents.find(a => a.agentType === agent.agentType)
-      
-      if (updatedAgent) {
-        onAgentUpdated(`Updated tools for agent: ${agent.agentType}`, updatedAgent)
-        setModeState({ mode: "edit-agent", selectedAgent: updatedAgent })
-      } else {
-        console.error('Failed to find updated agent after save')
-        // Fallback to manual update
-        const fallbackAgent: AgentConfig = {
-          ...agent,
-          tools: toolsArray.length === 1 && toolsArray[0] === '*' ? '*' : toolsArray,
-        }
-        onAgentUpdated(`Updated tools for agent: ${agent.agentType}`, fallbackAgent)
-        setModeState({ mode: "edit-agent", selectedAgent: fallbackAgent })
-      }
-    } catch (error) {
-      console.error('Failed to update agent tools:', error)
-      // TODO: Show error to user
-    } finally {
-      setIsUpdating(false)
-    }
-  }
-  
-  const handleSelect = () => {
-    const option = options[selectedIndex] as any // Type assertion for union type
-    if (!option) return
-    if (option.isSeparator) return
-    
-    if (option.isContinue) {
-      handleSave()
-    } else if (option.isAdvancedToggle) {
-      setShowAdvanced(!showAdvanced)
-    } else if (option.isAll) {
-      if (allSelected) {
-        setSelectedTools(new Set())
-      } else {
-        setSelectedTools(new Set(tools.map(t => t.name)))
-      }
-    } else if (option.isCategory) {
-      const categoryName = option.id as keyof typeof categorizedTools
-      const categoryTools = categorizedTools[categoryName] || []
-      const newSelected = new Set(selectedTools)
-      
-      const categorySelected = categoryTools.every(tool => selectedTools.has(tool.name))
-      if (categorySelected) {
-        categoryTools.forEach(tool => newSelected.delete(tool.name))
-      } else {
-        categoryTools.forEach(tool => newSelected.add(tool.name))
-      }
-      setSelectedTools(newSelected)
-    } else if (option.isTool) {
-      const newSelected = new Set(selectedTools)
-      if (newSelected.has(option.id)) {
-        newSelected.delete(option.id)
-      } else {
-        newSelected.add(option.id)
-      }
-      setSelectedTools(newSelected)
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.escape) {
-      setModeState({ mode: "edit-agent", selectedAgent: agent })
-    } else if (key.return && !isUpdating) {
-      handleSelect()
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => {
-        let newIndex = prev > 0 ? prev - 1 : options.length - 1
-        // Skip separators when going up
-        while (options[newIndex] && (options[newIndex] as any).isSeparator) {
-          newIndex = newIndex > 0 ? newIndex - 1 : options.length - 1
-        }
-        return newIndex
-      })
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => {
-        let newIndex = prev < options.length - 1 ? prev + 1 : 0
-        // Skip separators when going down
-        while (options[newIndex] && (options[newIndex] as any).isSeparator) {
-          newIndex = newIndex < options.length - 1 ? newIndex + 1 : 0
-        }
-        return newIndex
-      })
-    }
-  })
-  
-  if (isUpdating) {
-    return (
-      <Box flexDirection="column">
-        <Header title={`Edit agent: ${agent.agentType}`}>
-          <Box marginTop={1}>
-            <LoadingSpinner text="Updating agent tools..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Edit agent: ${agent.agentType}`}>
-        <Box flexDirection="column" marginTop={1}>
-          {options.map((option, idx) => {
-            const isSelected = idx === selectedIndex
-            const isContinue = 'isContinue' in option && option.isContinue
-            const isAdvancedToggle = (option as any).isAdvancedToggle
-            const isSeparator = (option as any).isSeparator
-            
-            return (
-              <Box key={option.id}>
-                <Text 
-                  color={isSelected && !isSeparator ? 'cyan' : isSeparator ? 'gray' : undefined}
-                  bold={isContinue}
-                  dimColor={isSeparator}
-                >
-                  {isSeparator ? 
-                    option.label : 
-                    `${isSelected ? `${UI_ICONS.pointer} ` : '  '}${isContinue || isAdvancedToggle ? option.label : option.label}`
-                  }
-                </Text>
-                {(option as any).isTool && isSelected && tools.find(t => t.name === option.id)?.description && (
-                  <Box marginLeft={4}>
-                    <Text dimColor>{tools.find(t => t.name === option.id)?.description}</Text>
-                  </Box>
-                )}
-              </Box>
-            )
-          })}
-          
-          <Box marginTop={1}>
-            <Text dimColor>
-              {allSelected ? 
-                'All tools selected' : 
-                `${selectedTools.size} of ${tools.length} tools selected`}
-            </Text>
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar instructions="Enter toggle selection · ↑↓ navigate · Esc back" />
-    </Box>
-  )
-}
-
-// Edit model step
-interface EditModelStepProps {
-  agent: AgentConfig
-  setModeState: (state: ModeState) => void
-  onAgentUpdated: (message: string, updated: AgentConfig) => void
-}
-
-function EditModelStep({ agent, setModeState, onAgentUpdated }: EditModelStepProps) {
-  const manager = getModelManager()
-  const profiles = manager.getActiveModelProfiles()
-  const currentModel = (agent as any).model || null
-  
-  // Build model options array
-  const modelOptions = [
-    { id: null, name: 'Inherit from parent', description: 'Use the model from task configuration' },
-    ...profiles.map((p: any) => ({ id: p.modelName, name: p.name, description: `${p.provider || 'provider'} · ${p.modelName}` }))
-  ]
-
-  // Find the index of current model
-  const defaultIndex = modelOptions.findIndex(m => m.id === currentModel)
-  const [selectedIndex, setSelectedIndex] = useState(defaultIndex >= 0 ? defaultIndex : 0)
-  const [isUpdating, setIsUpdating] = useState(false)
-
-  const handleSave = async (modelId: string | null) => {
-    setIsUpdating(true)
-    try {
-      const modelValue = modelId === null ? undefined : modelId
-      await updateAgent(agent, agent.whenToUse, agent.tools, agent.systemPrompt, agent.color, modelValue)
-      
-      // Clear cache and reload fresh agent data from file system
-      clearAgentCache()
-      const freshAgents = await getActiveAgents()
-      const updatedAgent = freshAgents.find(a => a.agentType === agent.agentType)
-      
-      if (updatedAgent) {
-        onAgentUpdated(`Updated model for agent: ${agent.agentType}`, updatedAgent)
-        setModeState({ mode: 'edit-agent', selectedAgent: updatedAgent })
-      } else {
-        console.error('Failed to find updated agent after save')
-        // Fallback to manual update
-        const fallbackAgent: AgentConfig = { ...agent }
-        if (modelValue) {
-          (fallbackAgent as any).model = modelValue
-        } else {
-          delete (fallbackAgent as any).model
-        }
-        onAgentUpdated(`Updated model for agent: ${agent.agentType}`, fallbackAgent)
-        setModeState({ mode: 'edit-agent', selectedAgent: fallbackAgent })
-      }
-    } catch (error) {
-      console.error('Failed to update agent model:', error)
-    } finally {
-      setIsUpdating(false)
-    }
-  }
-
-  useInput((input, key) => {
-    if (key.escape) {
-      setModeState({ mode: 'edit-agent', selectedAgent: agent })
-    } else if (key.return && !isUpdating) {
-      handleSave(modelOptions[selectedIndex].id)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => (prev > 0 ? prev - 1 : modelOptions.length - 1))
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => (prev < modelOptions.length - 1 ? prev + 1 : 0))
-    }
-  })
-
-  if (isUpdating) {
-    return (
-      <Box flexDirection="column">
-        <Header title={`Edit agent: ${agent.agentType}`}>
-          <Box marginTop={1}>
-            <LoadingSpinner text="Updating agent model..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-
-  return (
-    <Box flexDirection="column">
-      <Header title={`Edit agent: ${agent.agentType}`} subtitle="Model determines the agent's reasoning capabilities and speed.">
-        <Box marginTop={2}>
-          <SelectList
-            options={modelOptions.map((m, i) => ({ label: `${i + 1}. ${m.name}${m.description ? `\n${m.description}` : ''}`, value: m.id }))}
-            selectedIndex={selectedIndex}
-            onChange={(val) => handleSave(val)}
-            numbered={false}
-          />
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ navigate · Enter select · Esc back" />
-    </Box>
-  )
-}
-
-// Edit color step
-interface EditColorStepProps {
-  agent: AgentConfig
-  setModeState: (state: ModeState) => void
-  onAgentUpdated: (message: string, updated: AgentConfig) => void
-}
-
-function EditColorStep({ agent, setModeState, onAgentUpdated }: EditColorStepProps) {
-  const currentColor = agent.color || null
-  
-  // Define color options (removed red/green due to display issues)
-  const colors = [
-    { label: 'Automatic color', value: null },
-    { label: 'Yellow', value: 'yellow' },
-    { label: 'Blue', value: 'blue' },
-    { label: 'Magenta', value: 'magenta' },
-    { label: 'Cyan', value: 'cyan' },
-    { label: 'Gray', value: 'gray' },
-    { label: 'White', value: 'white' }
-  ]
-  
-  // Find current color index
-  const defaultIndex = colors.findIndex(color => color.value === currentColor)
-  const [selectedIndex, setSelectedIndex] = useState(defaultIndex >= 0 ? defaultIndex : 0)
-  const [isUpdating, setIsUpdating] = useState(false)
-  
-  const handleSave = async (color: string | null) => {
-    setIsUpdating(true)
-    try {
-      const colorValue = color === null ? undefined : color
-      await updateAgent(agent, agent.whenToUse, agent.tools, agent.systemPrompt, colorValue, (agent as any).model)
-      
-      // Clear cache and reload fresh agent data from file system
-      clearAgentCache()
-      const freshAgents = await getActiveAgents()
-      const updatedAgent = freshAgents.find(a => a.agentType === agent.agentType)
-      
-      if (updatedAgent) {
-        onAgentUpdated(`Updated color for agent: ${agent.agentType}`, updatedAgent)
-        setModeState({ mode: "edit-agent", selectedAgent: updatedAgent })
-      } else {
-        console.error('Failed to find updated agent after save')
-        // Fallback to manual update
-        const fallbackAgent: AgentConfig = { ...agent, ...(colorValue ? { color: colorValue } : { color: undefined }) }
-        onAgentUpdated(`Updated color for agent: ${agent.agentType}`, fallbackAgent)
-        setModeState({ mode: "edit-agent", selectedAgent: fallbackAgent })
-      }
-    } catch (error) {
-      console.error('Failed to update agent color:', error)
-      // TODO: Show error to user
-    } finally {
-      setIsUpdating(false)
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.escape) {
-      setModeState({ mode: "edit-agent", selectedAgent: agent })
-    } else if (key.return && !isUpdating) {
-      handleSave(colors[selectedIndex].value)
-    } else if (key.upArrow) {
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : colors.length - 1)
-    } else if (key.downArrow) {
-      setSelectedIndex(prev => prev < colors.length - 1 ? prev + 1 : 0)
-    }
-  })
-  
-  if (isUpdating) {
-    return (
-      <Box flexDirection="column">
-        <Header title={`Edit agent: ${agent.agentType}`}>
-          <Box marginTop={1}>
-            <LoadingSpinner text="Updating agent color..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-  
-  const selectedColor = colors[selectedIndex]
-  const previewColor = selectedColor.value || undefined
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Edit agent: ${agent.agentType}`} subtitle="Choose background color">
-        <Box flexDirection="column" marginTop={1}>
-          {colors.map((color, index) => {
-            const isSelected = index === selectedIndex
-            const isCurrent = color.value === currentColor
-            
-            return (
-              <Box key={color.value || 'automatic'}>
-                <Text color={isSelected ? 'cyan' : undefined}>
-                  {isSelected ? '❯ ' : '  '}
-                </Text>
-                <Text color={color.value || undefined}>●</Text>
-                <Text>
-                  {' '}{color.label}
-                  {isCurrent && (
-                    <Text color="green"> ✔</Text>
-                  )}
-                </Text>
-              </Box>
-            )
-          })}
-          
-          <Box marginTop={2}>
-            <Text>Preview: </Text>
-            <Text color={previewColor}>{agent.agentType}</Text>
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar instructions="↑↓ navigate · Enter select · Esc back" />
-    </Box>
-  )
-}
-
-// View agent details
-interface ViewAgentProps {
-  agent: AgentConfig
-  tools: Tool[]
-  setModeState: (state: ModeState) => void
-}
-
-function ViewAgent({ agent, tools, setModeState }: ViewAgentProps) {
-  const theme = getTheme()
-  const agentTools = Array.isArray(agent.tools) ? agent.tools : []
-  const hasAllTools = agent.tools === "*" || agentTools.includes("*")
-  const locationPath = agent.location === 'user'
-    ? `~/.claude/agents/${agent.agentType}.md`
-    : agent.location === 'project'
-      ? `.claude/agents/${agent.agentType}.md`
-      : '(built-in)'
-  const displayModel = getDisplayModelName((agent as any).model || null)
-  
-  const allowedTools = useMemo(() => {
-    if (hasAllTools) return tools
-    
-    return tools.filter(tool => 
-      agentTools.some(allowedTool => {
-        if (allowedTool.includes("*")) {
-          const prefix = allowedTool.replace("*", "")
-          return tool.name.startsWith(prefix)
-        }
-        return tool.name === allowedTool
-      })
-    )
-  }, [tools, agentTools, hasAllTools])
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Agent: ${agent.agentType}`} subtitle="Details">
-        <Box flexDirection="column" marginTop={1}>
-          <Text><Text bold>Type:</Text> {agent.agentType}</Text>
-          <Text><Text bold>Location:</Text> {agent.location} {locationPath !== '(built-in)' ? `· ${locationPath}` : ''}</Text>
-          <Text><Text bold>Description:</Text> {agent.whenToUse}</Text>
-          <Text><Text bold>Model:</Text> {displayModel}</Text>
-          <Text><Text bold>Color:</Text> {agent.color || 'auto'}</Text>
-          
-          <Box marginTop={1}>
-            <Text bold>Tools:</Text>
-          </Box>
-          {hasAllTools ? (
-            <Text color={theme.secondary}>All tools ({tools.length} available)</Text>
-          ) : (
-            <Box flexDirection="column" paddingLeft={2}>
-              {allowedTools.map(tool => (
-                <Fragment key={tool.name}>
-                  <Text color={theme.secondary}>• {tool.name}</Text>
-                </Fragment>
-              ))}
-            </Box>
-          )}
-          
-          <Box marginTop={1}>
-            <Text bold>System Prompt:</Text>
-          </Box>
-          <Box paddingLeft={2}>
-            <Text>{agent.systemPrompt}</Text>
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-// Edit agent component
-interface EditAgentProps {
-  agent: AgentConfig
-  tools: Tool[]
-  setModeState: (state: ModeState) => void
-  onAgentUpdated: (message: string) => void
-}
-
-function EditAgent({ agent, tools, setModeState, onAgentUpdated }: EditAgentProps) {
-  const theme = getTheme()
-  const [currentStep, setCurrentStep] = useState<'description' | 'tools' | 'prompt' | 'confirm'>('description')
-  const [isUpdating, setIsUpdating] = useState(false)
-  
-  // 编辑状态
-  const [editedDescription, setEditedDescription] = useState(agent.whenToUse)
-  const [editedTools, setEditedTools] = useState<string[]>(
-    Array.isArray(agent.tools) ? agent.tools : agent.tools === '*' ? ['*'] : []
-  )
-  const [editedPrompt, setEditedPrompt] = useState(agent.systemPrompt)
-  const [error, setError] = useState<string | null>(null)
-  
-  const handleSave = async () => {
-    setIsUpdating(true)
-    try {
-      await updateAgent(agent, editedDescription, editedTools, editedPrompt, agent.color)
-      clearAgentCache()
-      onAgentUpdated(`Updated agent: ${agent.agentType}`)
-    } catch (error) {
-      setError((error as Error).message)
-      setIsUpdating(false)
-    }
-  }
-  
-  const renderStepContent = () => {
-    switch (currentStep) {
-      case 'description':
-        return (
-          <Box flexDirection="column">
-            <Text bold>Edit Description:</Text>
-            <Box marginTop={1}>
-              <MultilineTextInput
-                value={editedDescription}
-                onChange={setEditedDescription}
-                placeholder="Describe when to use this agent..."
-                onSubmit={() => setCurrentStep('tools')}
-                error={error}
-                rows={4}
-              />
-            </Box>
-          </Box>
-        )
-        
-      case 'tools':
-        return (
-          <Box flexDirection="column">
-            <Text bold>Edit Tools:</Text>
-            <Box marginTop={1}>
-              <ToolsStep
-                createState={{
-                  selectedTools: editedTools,
-                } as CreateState}
-                setCreateState={(action) => {
-                  if (action.type === 'SET_SELECTED_TOOLS') {
-                    setEditedTools(action.value)
-                    setCurrentStep('prompt')
-                  }
-                }}
-                setModeState={() => {}}
-                tools={tools}
-              />
-            </Box>
-          </Box>
-        )
-        
-      case 'prompt':
-        return (
-          <Box flexDirection="column">
-            <Text bold>Edit System Prompt:</Text>
-            <Box marginTop={1}>
-              <MultilineTextInput
-                value={editedPrompt}
-                onChange={setEditedPrompt}
-                placeholder="System prompt for the agent..."
-                onSubmit={() => setCurrentStep('confirm')}
-                error={error}
-                rows={5}
-              />
-            </Box>
-          </Box>
-        )
-        
-      case 'confirm':
-        const validation = validateAgentConfig({
-          agentType: agent.agentType,
-          whenToUse: editedDescription,
-          systemPrompt: editedPrompt,
-          selectedTools: editedTools
-        })
-        
-        return (
-          <Box flexDirection="column">
-            <Text bold>Confirm Changes:</Text>
-            <Box flexDirection="column" marginTop={1}>
-              <Text><Text bold>Agent:</Text> {agent.agentType}</Text>
-              <Text><Text bold>Description:</Text> {editedDescription}</Text>
-              <Text><Text bold>Tools:</Text> {editedTools.includes('*') ? 'All tools' : editedTools.join(', ')}</Text>
-              <Text><Text bold>System Prompt:</Text> {editedPrompt.slice(0, 100)}{editedPrompt.length > 100 ? '...' : ''}</Text>
-              
-              {validation.warnings.length > 0 && (
-                <Box marginTop={1}>
-                  {validation.warnings.map((warning, idx) => (
-                    <Fragment key={idx}>
-                      <Text color={theme.warning}>⚠ {warning}</Text>
-                    </Fragment>
-                  ))}
-                </Box>
-              )}
-              
-              {error && (
-                <Box marginTop={1}>
-                  <Text color={theme.error}>✗ {error}</Text>
-                </Box>
-              )}
-              
-              <Box marginTop={2}>
-                {isUpdating ? (
-                  <LoadingSpinner text="Updating agent..." />
-                ) : (
-                  <Text>Press Enter to save changes</Text>
-                )}
-              </Box>
-            </Box>
-          </Box>
-        )
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.escape) {
-      if (currentStep === 'description') {
-        setModeState({ mode: "agent-menu", selectedAgent: agent })
-      } else {
-        // 返回上一步
-        const steps: Array<typeof currentStep> = ['description', 'tools', 'prompt', 'confirm']
-        const currentIndex = steps.indexOf(currentStep)
-        if (currentIndex > 0) {
-          setCurrentStep(steps[currentIndex - 1])
-        }
-      }
-      return
-    }
-    
-    if (key.return && currentStep === 'confirm' && !isUpdating) {
-      handleSave()
-    }
-  })
-  
-  return (
-    <Box flexDirection="column">
-      <Header title={`Edit Agent: ${agent.agentType}`} subtitle={`Step ${['description', 'tools', 'prompt', 'confirm'].indexOf(currentStep) + 1}/4`}>
-        <Box marginTop={1}>
-          {renderStepContent()}
-        </Box>
-      </Header>
-      <InstructionBar 
-        instructions={currentStep === 'confirm' ? 
-          "Press Enter to save · Esc to go back" :
-          "Enter to continue · Esc to go back"
-        }
-      />
-    </Box>
-  )
-}
-
-// Delete confirmation
-interface DeleteConfirmProps {
-  agent: AgentConfig
-  setModeState: (state: ModeState) => void
-  onAgentDeleted: (message: string) => void
-}
-
-function DeleteConfirm({ agent, setModeState, onAgentDeleted }: DeleteConfirmProps) {
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [selected, setSelected] = useState(false) // false = No, true = Yes
-  
-  const handleConfirm = async () => {
-    if (selected) {
-      setIsDeleting(true)
-      try {
-        await deleteAgent(agent)
-        clearAgentCache()
-        onAgentDeleted(`Deleted agent: ${agent.agentType}`)
-      } catch (error) {
-        console.error('Failed to delete agent:', error)
-        setIsDeleting(false)
-        // TODO: Show error to user
-      }
-    } else {
-      setModeState({ mode: "agent-menu", selectedAgent: agent })
-    }
-  }
-  
-  useInput((input, key) => {
-    if (key.return) {
-      handleConfirm()
-    } else if (key.leftArrow || key.rightArrow || key.tab) {
-      setSelected(!selected)
-    }
-  })
-  
-  if (isDeleting) {
-    return (
-      <Box flexDirection="column">
-        <Header title="Delete agent" subtitle="Deleting...">
-          <Box marginTop={1}>
-            <LoadingSpinner text="Deleting agent..." />
-          </Box>
-        </Header>
-        <InstructionBar />
-      </Box>
-    )
-  }
-  
-  return (
-    <Box flexDirection="column">
-      <Header title="Delete agent" subtitle={`Delete "${agent.agentType}"?`}>
-        <Box marginTop={1}>
-          <Text>This action cannot be undone. The agent file will be permanently deleted.</Text>
-          <Box marginTop={2} gap={3}>
-            <Text color={!selected ? 'cyan' : undefined}>
-              {!selected ? `${UI_ICONS.pointer} ` : '  '}No
-            </Text>
-            <Text color={selected ? 'red' : undefined}>
-              {selected ? `${UI_ICONS.pointer} ` : '  '}Yes, delete
-            </Text>
-          </Box>
-        </Box>
-      </Header>
-      <InstructionBar />
-    </Box>
-  )
-}
-
-export default {
-  name: 'agents',
-  description: 'Manage agent configurations',
-  type: 'local-jsx' as const,
-  isEnabled: true,
-  isHidden: false,
-  
-  async call(onExit: (message?: string) => void) {
-    return <AgentsUI onExit={onExit} />
-  },
-  
-  userFacingName() {
-    return 'agents'
-  }
-}