aura-ai/src/add-aura-agent/page.jsx

AI-powered marketing strategist CLI tool for developers

import React from 'react'
import { render, Box, Text, useInput } from 'ink'
import { Alert, Spinner } from '@inkjs/ui'
import { useState, useEffect } from 'react'
import fs from 'fs/promises'
import path from 'path'
import os from 'os'

const AddAuraAgentPage = ({ onBack }) => {
  const [status, setStatus] = useState('installing')
  const [error, setError] = useState(null)
  const [targetPath, setTargetPath] = useState('')

  // Handle Enter key press to return
  useInput((input, key) => {
    if (key.return && (status === 'success' || status === 'error')) {
      onBack()
    }
  })

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

  const installAgent = async () => {
    try {
      // Get user's home directory
      const homeDir = os.homedir()
      const claudeAgentsDir = path.join(homeDir, '.claude', 'agents')
      
      // Check if .claude/agents directory exists
      try {
        await fs.access(claudeAgentsDir)
      } catch {
        // Create the directory if it doesn't exist
        await fs.mkdir(claudeAgentsDir, { recursive: true })
      }
      
      // Agent content
      const auraAgentSource = `---
name: aura
description: Marketing AI agent that uses Aura CLI for product analysis, daily reports, and marketing insights
tools: Bash
model: sonnet
color: cyan
---

You are Aura, a marketing AI assistant that uses the Aura CLI tool via npx.

## Quick Command Reference

\`\`\`bash
# Daily sync report (saves file, prints, copies to clipboard)
npx aura-ai sync --json

# Marketing consultation
npx aura-ai chat "your question" --json

# Product analysis (one-time setup)
npx aura-ai init --answers "product|audience|value" --json

# View settings
npx aura-ai settings --list --json
\`\`\`

## How to Respond

1. **User says "sync"** → Run: \`npx aura-ai sync --json\`
   - Creates \`YYYY-M-D-update.md\` file automatically
   - Prints full report to terminal
   - Auto-copies to clipboard
   - Tell user: "Report generated, saved to [filename], and copied to clipboard"
   
2. **User asks marketing question** → Run: \`npx aura-ai chat "question" --json\`

3. **User wants product analysis** → Check if aura.md exists, if not run: \`npx aura-ai init --answers "..." --json\`

## Important
- No installation needed! Uses npx to run directly
- Sync command creates dated markdown files (e.g., \`2025-8-8-update.md\`)
- All content is visible in terminal output
- Reports are automatically saved and copied
- Just run commands, don't read files`
      
      // Write the agent file
      const target = path.join(claudeAgentsDir, 'aura.md')
      await fs.writeFile(target, auraAgentSource)
      
      setTargetPath(target)
      setStatus('success')
      
    } catch (err) {
      setError(err.message)
      setStatus('error')
    }
  }

  if (status === 'installing') {
    return (
      <Box flexDirection="column" padding={1}>
        <Box paddingY={1} paddingX={2} borderColor="blue" borderStyle="round">
          <Text>
            <Text bold>Installing Aura Agent</Text> to Claude
          </Text>
        </Box>
        <Box marginTop={2} paddingLeft={2}>
          <Spinner label="Setting up agent..." />
        </Box>
      </Box>
    )
  }

  if (status === 'error') {
    return (
      <Box flexDirection="column" padding={1}>
        <Box paddingY={1} paddingX={2} borderColor="red" borderStyle="round">
          <Text>
            <Text bold color="red">Installation Failed</Text>
          </Text>
        </Box>
        <Box marginTop={2}>
          <Alert variant="error">
            {error}
          </Alert>
        </Box>
        <Box marginTop={2}>
          <Text dimColor>Press Enter to continue...</Text>
        </Box>
      </Box>
    )
  }

  return (
    <Box flexDirection="column" padding={1}>
      <Box paddingY={1} paddingX={2} borderColor="green" borderStyle="round">
        <Text>
          <Text bold color="green">✅ Aura Agent Installed!</Text>
        </Text>
      </Box>
      
      <Box marginTop={2} flexDirection="column">
        <Alert variant="success">
          Agent successfully installed to Claude
        </Alert>
        
        <Box marginTop={2} paddingLeft={1}>
          <Text>📄 Location: <Text color="cyan">{targetPath}</Text></Text>
        </Box>
        
        <Box marginTop={2} paddingX={2} paddingY={1} borderColor="yellow" borderStyle="single">
          <Text color="yellow">
            ⚠️  IMPORTANT: Please restart Claude to load the new agent
          </Text>
        </Box>
        
        <Box marginTop={2} paddingLeft={1} flexDirection="column">
          <Text bold>🎯 After restarting Claude, you can use:</Text>
          <Text color="gray">   • @aura sync - Generate daily reports</Text>
          <Text color="gray">   • @aura help me with marketing - Get marketing advice</Text>
          <Text color="gray">   • @aura analyze my product - Product analysis</Text>
        </Box>
        
        <Box marginTop={2}>
          <Text dimColor>Press Enter to continue...</Text>
        </Box>
      </Box>
    </Box>
  )
}

export default AddAuraAgentPage

export function runAddAuraAgentInteractive() {
  return new Promise((resolve) => {
    const { waitUntilExit } = render(
      <AddAuraAgentPage onBack={() => resolve()} />
    )
    waitUntilExit().then(resolve)
  })
}