@projectservan8n/cnapse 0.2.0 → 0.4.0

package/src/components/App.tsx

@@ -1,10 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { Header } from './Header.js';
 import { ChatMessage } from './ChatMessage.js';
 import { ChatInput } from './ChatInput.js';
 import { StatusBar } from './StatusBar.js';
+import { HelpMenu } from './HelpMenu.js';
 import { chat, Message } from '../lib/api.js';
+import { getScreenDescription } from '../lib/screen.js';
+import { describeScreen } from '../lib/vision.js';
+import { getTelegramBot, TelegramMessage } from '../services/telegram.js';
+import { parseTask, executeTask, formatTask, Task } from '../lib/tasks.js';
 
 interface ChatMsg {
   id: string;
@@ -20,7 +25,7 @@ export function App() {
     {
       id: '0',
       role: 'system',
-      content: 'Welcome to C-napse! Type your message and press Enter.\n\nShortcuts:\n  Ctrl+C - Exit\n  /clear - Clear chat\n  /help  - Show help',
+      content: 'Welcome to C-napse! Type your message and press Enter.\n\nShortcuts:\n  Ctrl+C - Exit\n  Ctrl+W - Toggle screen watch\n  /clear - Clear chat\n  /help  - Show help',
       timestamp: new Date(),
     },
   ]);
@@ -28,8 +33,37 @@ export function App() {
   const [isProcessing, setIsProcessing] = useState(false);
   const [status, setStatus] = useState('Ready');
   const [error, setError] = useState<string | null>(null);
+  const [screenWatch, setScreenWatch] = useState(false);
+  const [showHelpMenu, setShowHelpMenu] = useState(false);
+  const [telegramEnabled, setTelegramEnabled] = useState(false);
+  const screenContextRef = useRef<string | null>(null);
+
+  // Screen watching effect
+  useEffect(() => {
+    if (!screenWatch) {
+      screenContextRef.current = null;
+      return;
+    }
+
+    const checkScreen = async () => {
+      const desc = await getScreenDescription();
+      if (desc) {
+        screenContextRef.current = desc;
+      }
+    };
+
+    checkScreen();
+    const interval = setInterval(checkScreen, 5000); // Check every 5 seconds
+
+    return () => clearInterval(interval);
+  }, [screenWatch]);
 
   useInput((inputChar, key) => {
+    // If help menu is open, don't process other shortcuts
+    if (showHelpMenu) {
+      return;
+    }
+
     if (key.ctrl && inputChar === 'c') {
       exit();
     }
@@ -37,6 +71,31 @@ export function App() {
       setMessages([messages[0]!]); // Keep welcome message
       setError(null);
     }
+    if (key.ctrl && inputChar === 'w') {
+      setScreenWatch((prev) => {
+        const newState = !prev;
+        addSystemMessage(
+          newState
+            ? '🖥️ Screen watching enabled. AI will have context of your screen.'
+            : '🖥️ Screen watching disabled.'
+        );
+        return newState;
+      });
+    }
+    if (key.ctrl && inputChar === 'h') {
+      setShowHelpMenu(true);
+    }
+    if (key.ctrl && inputChar === 't') {
+      setTelegramEnabled((prev) => {
+        const newState = !prev;
+        addSystemMessage(
+          newState
+            ? '📱 Telegram bot enabled.'
+            : '📱 Telegram bot disabled.'
+        );
+        return newState;
+      });
+    }
   });
 
   const handleSubmit = async (value: string) => {
@@ -84,7 +143,13 @@ export function App() {
         .slice(-10)
         .map((m) => ({ role: m.role as 'user' | 'assistant', content: m.content }));
 
-      apiMessages.push({ role: 'user', content: userInput });
+      // Add screen context if watching
+      let finalInput = userInput;
+      if (screenWatch && screenContextRef.current) {
+        finalInput = `[Screen context: ${screenContextRef.current}]\n\n${userInput}`;
+      }
+
+      apiMessages.push({ role: 'user', content: finalInput });
 
       const response = await chat(apiMessages);
 
@@ -116,6 +181,7 @@ export function App() {
   const handleCommand = (cmd: string) => {
     const parts = cmd.slice(1).split(' ');
     const command = parts[0];
+    const args = parts.slice(1).join(' ');
 
     switch (command) {
       case 'clear':
@@ -123,12 +189,151 @@ export function App() {
         addSystemMessage('Chat cleared.');
         break;
       case 'help':
-        addSystemMessage(
-          'Commands:\n  /clear - Clear chat history\n  /help  - Show this help\n\nJust type naturally to chat with the AI!'
-        );
+        setShowHelpMenu(true);
+        break;
+      case 'watch':
+        setScreenWatch((prev) => {
+          const newState = !prev;
+          addSystemMessage(
+            newState
+              ? '🖥️ Screen watching enabled.'
+              : '🖥️ Screen watching disabled.'
+          );
+          return newState;
+        });
+        break;
+      case 'telegram':
+        handleTelegramToggle();
+        break;
+      case 'screen':
+        handleScreenCommand();
+        break;
+      case 'task':
+        if (args) {
+          handleTaskCommand(args);
+        } else {
+          addSystemMessage('Usage: /task <description>\nExample: /task open notepad and type hello');
+        }
+        break;
+      case 'config':
+        addSystemMessage('⚙️ Configuration:\n  Provider: Use cnapse config\n  Model: Use cnapse config set model <name>');
+        break;
+      case 'model':
+        addSystemMessage('🤖 Model selection coming soon.\nUse: cnapse config set model <name>');
+        break;
+      case 'provider':
+        addSystemMessage('🔌 Provider selection coming soon.\nUse: cnapse config set provider <name>');
+        break;
+      case 'quit':
+      case 'exit':
+        exit();
         break;
       default:
-        addSystemMessage(`Unknown command: ${command}`);
+        addSystemMessage(`Unknown command: ${command}\nType /help to see available commands.`);
+    }
+  };
+
+  const handleHelpMenuSelect = (command: string) => {
+    // Execute the selected command
+    handleCommand(command);
+  };
+
+  const handleScreenCommand = async () => {
+    addSystemMessage('📸 Taking screenshot and analyzing...');
+    setStatus('Analyzing screen...');
+    setIsProcessing(true);
+
+    try {
+      const result = await describeScreen();
+      addSystemMessage(`🖥️ Screen Analysis:\n\n${result.description}`);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Vision analysis failed';
+      addSystemMessage(`❌ Screen capture failed: ${errorMsg}`);
+    } finally {
+      setIsProcessing(false);
+      setStatus('Ready');
+    }
+  };
+
+  const handleTaskCommand = async (taskDescription: string) => {
+    addSystemMessage(`📋 Parsing task: ${taskDescription}`);
+    setStatus('Parsing task...');
+    setIsProcessing(true);
+
+    try {
+      // Parse the task into steps
+      const task = await parseTask(taskDescription);
+      addSystemMessage(`📋 Task planned (${task.steps.length} steps):\n${formatTask(task)}`);
+
+      // Execute the task
+      addSystemMessage('🚀 Executing task...');
+      setStatus('Executing task...');
+
+      await executeTask(task, (updatedTask, currentStep) => {
+        // Update progress
+        if (currentStep.status === 'running') {
+          setStatus(`Running: ${currentStep.description}`);
+        }
+      });
+
+      // Show final result
+      addSystemMessage(`\n${formatTask(task)}`);
+
+      if (task.status === 'completed') {
+        addSystemMessage('✅ Task completed successfully!');
+      } else {
+        addSystemMessage('❌ Task failed. Check the steps above for errors.');
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Task failed';
+      addSystemMessage(`❌ Task error: ${errorMsg}`);
+    } finally {
+      setIsProcessing(false);
+      setStatus('Ready');
+    }
+  };
+
+  const handleTelegramToggle = async () => {
+    const bot = getTelegramBot();
+
+    if (telegramEnabled) {
+      // Stop the bot
+      try {
+        await bot.stop();
+        setTelegramEnabled(false);
+        addSystemMessage('📱 Telegram bot stopped.');
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : 'Failed to stop bot';
+        addSystemMessage(`❌ Error stopping bot: ${errorMsg}`);
+      }
+    } else {
+      // Start the bot
+      addSystemMessage('📱 Starting Telegram bot...');
+      setStatus('Starting Telegram...');
+
+      try {
+        // Setup event handlers
+        bot.on('message', (msg: TelegramMessage) => {
+          addSystemMessage(`📱 Telegram [${msg.from}]: ${msg.text}`);
+        });
+
+        bot.on('error', (error: Error) => {
+          addSystemMessage(`📱 Telegram error: ${error.message}`);
+        });
+
+        await bot.start();
+        setTelegramEnabled(true);
+        addSystemMessage(
+          '📱 Telegram bot started!\n\n' +
+          'Open Telegram and send /start to your bot to connect.\n' +
+          'Commands: /screen, /describe, /run <cmd>, /status'
+        );
+      } catch (err) {
+        const errorMsg = err instanceof Error ? err.message : 'Failed to start bot';
+        addSystemMessage(`❌ Telegram error: ${errorMsg}`);
+      } finally {
+        setStatus('Ready');
+      }
     }
   };
 
@@ -147,9 +352,21 @@ export function App() {
   // Only show last N messages that fit
   const visibleMessages = messages.slice(-20);
 
+  // If help menu is open, show it as overlay
+  if (showHelpMenu) {
+    return (
+      <Box flexDirection="column" height="100%" alignItems="center" justifyContent="center">
+        <HelpMenu
+          onClose={() => setShowHelpMenu(false)}
+          onSelect={handleHelpMenuSelect}
+        />
+      </Box>
+    );
+  }
+
   return (
     <Box flexDirection="column" height="100%">
-      <Header />
+      <Header screenWatch={screenWatch} telegramEnabled={telegramEnabled} />
 
       <Box flexDirection="column" flexGrow={1} borderStyle="round" borderColor="gray" padding={1}>
         <Text bold color="gray"> Chat </Text>

package/src/components/Header.tsx

@@ -11,7 +11,12 @@ const ASCII_BANNER = `
   ╚═════╝      ╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝     ╚══════╝╚══════╝
 `.trim();
 
-export function Header() {
+interface HeaderProps {
+  screenWatch?: boolean;
+  telegramEnabled?: boolean;
+}
+
+export function Header({ screenWatch = false, telegramEnabled = false }: HeaderProps) {
   const config = getConfig();
 
   return (
@@ -20,8 +25,13 @@ export function Header() {
       <Box justifyContent="center">
         <Text color="gray">
           {config.provider} │ {config.model}
+          {screenWatch && <Text color="yellow"> │ 🖥️ Screen</Text>}
+          {telegramEnabled && <Text color="blue"> │ 📱 Telegram</Text>}
         </Text>
       </Box>
+      <Box justifyContent="center">
+        <Text color="gray" dimColor>Press Ctrl+H for help</Text>
+      </Box>
     </Box>
   );
 }

package/src/components/HelpMenu.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+interface MenuItem {
+  command: string;
+  shortcut?: string;
+  description: string;
+  category: 'navigation' | 'actions' | 'settings';
+}
+
+const MENU_ITEMS: MenuItem[] = [
+  // Navigation
+  { command: '/help', shortcut: 'Ctrl+H', description: 'Show this help menu', category: 'navigation' },
+  { command: '/clear', shortcut: 'Ctrl+L', description: 'Clear chat history', category: 'navigation' },
+  { command: '/quit', shortcut: 'Ctrl+C', description: 'Exit C-napse', category: 'navigation' },
+
+  // Actions
+  { command: '/screen', shortcut: 'Ctrl+S', description: 'Take screenshot and describe', category: 'actions' },
+  { command: '/task', description: 'Run multi-step task', category: 'actions' },
+  { command: '/telegram', shortcut: 'Ctrl+T', description: 'Toggle Telegram bot', category: 'actions' },
+
+  // Settings
+  { command: '/config', description: 'Show/edit configuration', category: 'settings' },
+  { command: '/watch', shortcut: 'Ctrl+W', description: 'Toggle screen watching', category: 'settings' },
+  { command: '/model', description: 'Change AI model', category: 'settings' },
+  { command: '/provider', description: 'Change AI provider', category: 'settings' },
+];
+
+interface HelpMenuProps {
+  onClose: () => void;
+  onSelect: (command: string) => void;
+}
+
+export function HelpMenu({ onClose, onSelect }: HelpMenuProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [selectedCategory, setSelectedCategory] = useState<'all' | MenuItem['category']>('all');
+
+  const filteredItems = selectedCategory === 'all'
+    ? MENU_ITEMS
+    : MENU_ITEMS.filter(item => item.category === selectedCategory);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : filteredItems.length - 1));
+    }
+
+    if (key.downArrow) {
+      setSelectedIndex(prev => (prev < filteredItems.length - 1 ? prev + 1 : 0));
+    }
+
+    if (key.leftArrow || key.rightArrow) {
+      const categories: Array<'all' | MenuItem['category']> = ['all', 'navigation', 'actions', 'settings'];
+      const currentIdx = categories.indexOf(selectedCategory);
+      if (key.leftArrow) {
+        setSelectedCategory(categories[currentIdx > 0 ? currentIdx - 1 : categories.length - 1]!);
+      } else {
+        setSelectedCategory(categories[currentIdx < categories.length - 1 ? currentIdx + 1 : 0]!);
+      }
+      setSelectedIndex(0);
+    }
+
+    if (key.return) {
+      const item = filteredItems[selectedIndex];
+      if (item) {
+        onSelect(item.command);
+        onClose();
+      }
+    }
+  });
+
+  const categories: Array<{ key: 'all' | MenuItem['category']; label: string }> = [
+    { key: 'all', label: 'All' },
+    { key: 'navigation', label: 'Navigation' },
+    { key: 'actions', label: 'Actions' },
+    { key: 'settings', label: 'Settings' },
+  ];
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor="cyan"
+      padding={1}
+      width={60}
+    >
+      {/* Header */}
+      <Box justifyContent="center" marginBottom={1}>
+        <Text bold color="cyan">C-napse Help</Text>
+      </Box>
+
+      {/* Category Tabs */}
+      <Box justifyContent="center" marginBottom={1}>
+        {categories.map((cat, idx) => (
+          <React.Fragment key={cat.key}>
+            <Text
+              color={selectedCategory === cat.key ? 'cyan' : 'gray'}
+              bold={selectedCategory === cat.key}
+            >
+              {cat.label}
+            </Text>
+            {idx < categories.length - 1 && <Text color="gray"> │ </Text>}
+          </React.Fragment>
+        ))}
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text color="gray" dimColor>Use ←→ to switch tabs, ↑↓ to navigate, Enter to select</Text>
+      </Box>
+
+      {/* Menu Items */}
+      <Box flexDirection="column">
+        {filteredItems.map((item, index) => (
+          <Box key={item.command}>
+            <Text color={index === selectedIndex ? 'cyan' : 'white'}>
+              {index === selectedIndex ? '❯ ' : '  '}
+            </Text>
+            <Box width={12}>
+              <Text bold={index === selectedIndex} color={index === selectedIndex ? 'cyan' : 'white'}>
+                {item.command}
+              </Text>
+            </Box>
+            {item.shortcut && (
+              <Box width={10}>
+                <Text color="yellow" dimColor>{item.shortcut}</Text>
+              </Box>
+            )}
+            <Text color="gray">{item.description}</Text>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Footer */}
+      <Box marginTop={1} justifyContent="center">
+        <Text color="gray" dimColor>Press Esc to close</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/components/Setup.tsx

@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import { setApiKey, setProvider, setModel, getConfig } from '../lib/config.js';
+
+type Step = 'provider' | 'apiKey' | 'model' | 'done';
+
+const PROVIDERS = [
+  { id: 'ollama', name: 'Ollama', desc: 'Local AI (free, no API key needed)' },
+  { id: 'openrouter', name: 'OpenRouter', desc: 'Many models, pay per use' },
+  { id: 'anthropic', name: 'Anthropic', desc: 'Claude models' },
+  { id: 'openai', name: 'OpenAI', desc: 'GPT models' },
+] as const;
+
+const DEFAULT_MODELS: Record<string, string[]> = {
+  ollama: ['qwen2.5:0.5b', 'qwen2.5:7b', 'llama3.2:3b', 'codellama:7b'],
+  openrouter: [
+    'qwen/qwen-2.5-coder-32b-instruct',
+    'anthropic/claude-3.5-sonnet',
+    'openai/gpt-4o',
+    'google/gemini-pro-1.5',
+  ],
+  anthropic: [
+    'claude-3-5-sonnet-20241022',
+    'claude-3-opus-20240229',
+    'claude-3-haiku-20240307',
+  ],
+  openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+};
+
+export function Setup() {
+  const { exit } = useApp();
+  const [step, setStep] = useState<Step>('provider');
+  const [selectedProvider, setSelectedProvider] = useState(0);
+  const [selectedModel, setSelectedModel] = useState(0);
+  const [apiKey, setApiKeyInput] = useState('');
+  const [provider, setProviderState] = useState<string>('ollama');
+
+  useInput((input, key) => {
+    if (key.escape) {
+      exit();
+      return;
+    }
+
+    if (step === 'provider') {
+      if (key.upArrow) {
+        setSelectedProvider((prev) => (prev > 0 ? prev - 1 : PROVIDERS.length - 1));
+      } else if (key.downArrow) {
+        setSelectedProvider((prev) => (prev < PROVIDERS.length - 1 ? prev + 1 : 0));
+      } else if (key.return) {
+        const selected = PROVIDERS[selectedProvider]!;
+        setProviderState(selected.id);
+        setProvider(selected.id as any);
+
+        if (selected.id === 'ollama') {
+          setStep('model');
+        } else {
+          setStep('apiKey');
+        }
+      }
+    } else if (step === 'model') {
+      const models = DEFAULT_MODELS[provider] || [];
+      if (key.upArrow) {
+        setSelectedModel((prev) => (prev > 0 ? prev - 1 : models.length - 1));
+      } else if (key.downArrow) {
+        setSelectedModel((prev) => (prev < models.length - 1 ? prev + 1 : 0));
+      } else if (key.return) {
+        const model = models[selectedModel]!;
+        setModel(model);
+        setStep('done');
+        setTimeout(() => exit(), 1500);
+      }
+    }
+  });
+
+  const handleApiKeySubmit = (value: string) => {
+    if (value.trim()) {
+      setApiKey(provider as any, value.trim());
+      setApiKeyInput(value);
+      setStep('model');
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          🚀 C-napse Setup
+        </Text>
+      </Box>
+
+      {step === 'provider' && (
+        <Box flexDirection="column">
+          <Text bold>Select AI Provider:</Text>
+          <Text color="gray" dimColor>
+            (Use ↑↓ arrows, Enter to select)
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            {PROVIDERS.map((p, i) => (
+              <Box key={p.id}>
+                <Text color={i === selectedProvider ? 'cyan' : 'white'}>
+                  {i === selectedProvider ? '❯ ' : '  '}
+                  <Text bold={i === selectedProvider}>{p.name}</Text>
+                  <Text color="gray"> - {p.desc}</Text>
+                </Text>
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      {step === 'apiKey' && (
+        <Box flexDirection="column">
+          <Text>
+            <Text color="green">✓</Text> Provider: <Text bold>{provider}</Text>
+          </Text>
+          <Box marginTop={1} flexDirection="column">
+            <Text bold>Enter your {provider} API key:</Text>
+            <Text color="gray" dimColor>
+              (Paste with Ctrl+V or right-click, then Enter)
+            </Text>
+            <Box marginTop={1}>
+              <Text color="cyan">❯ </Text>
+              <TextInput
+                value={apiKey}
+                onChange={setApiKeyInput}
+                onSubmit={handleApiKeySubmit}
+                mask="*"
+              />
+            </Box>
+          </Box>
+        </Box>
+      )}
+
+      {step === 'model' && (
+        <Box flexDirection="column">
+          <Text>
+            <Text color="green">✓</Text> Provider: <Text bold>{provider}</Text>
+          </Text>
+          {provider !== 'ollama' && (
+            <Text>
+              <Text color="green">✓</Text> API Key: <Text bold>saved</Text>
+            </Text>
+          )}
+          <Box marginTop={1} flexDirection="column">
+            <Text bold>Select Model:</Text>
+            <Text color="gray" dimColor>
+              (Use ↑↓ arrows, Enter to select)
+            </Text>
+            <Box marginTop={1} flexDirection="column">
+              {(DEFAULT_MODELS[provider] || []).map((model, i) => (
+                <Box key={model}>
+                  <Text color={i === selectedModel ? 'cyan' : 'white'}>
+                    {i === selectedModel ? '❯ ' : '  '}
+                    <Text bold={i === selectedModel}>{model}</Text>
+                  </Text>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        </Box>
+      )}
+
+      {step === 'done' && (
+        <Box flexDirection="column">
+          <Text>
+            <Text color="green">✓</Text> Provider: <Text bold>{provider}</Text>
+          </Text>
+          {provider !== 'ollama' && (
+            <Text>
+              <Text color="green">✓</Text> API Key: <Text bold>saved</Text>
+            </Text>
+          )}
+          <Text>
+            <Text color="green">✓</Text> Model:{' '}
+            <Text bold>{DEFAULT_MODELS[provider]?.[selectedModel]}</Text>
+          </Text>
+          <Box marginTop={1}>
+            <Text color="green" bold>
+              ✅ Setup complete! Run `cnapse` to start chatting.
+            </Text>
+          </Box>
+          {provider === 'ollama' && (
+            <Box marginTop={1} flexDirection="column">
+              <Text color="yellow">
+                Note: Make sure the model is downloaded. Run:
+              </Text>
+              <Text color="cyan">
+                {'  '}ollama pull {DEFAULT_MODELS[provider]?.[selectedModel]}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box marginTop={2}>
+        <Text color="gray" dimColor>
+          Press Esc to cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}