@projectservan8n/cnapse 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectservan8n/cnapse",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Autonomous PC intelligence - AI assistant for desktop automation",
   "type": "module",
   "main": "dist/index.js",

package/src/components/App.tsx

@@ -1,372 +1,253 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useCallback } 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;
-  role: 'user' | 'assistant' | 'system';
-  content: string;
-  timestamp: Date;
-  isStreaming?: boolean;
-}
+import { ProviderSelector } from './ProviderSelector.js';
+import { getConfig } from '../lib/config.js';
+import { useChat, useVision, useTelegram, useTasks } from '../hooks/index.js';
+
+type OverlayType = 'none' | 'help' | 'provider';
 
 export function App() {
   const { exit } = useApp();
-  const [messages, setMessages] = useState<ChatMsg[]>([
-    {
-      id: '0',
-      role: 'system',
-      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(),
-    },
-  ]);
-  const [input, setInput] = useState('');
-  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
+  // UI State
+  const [overlay, setOverlay] = useState<OverlayType>('none');
+  const [screenWatch, setScreenWatch] = useState(false);
+  const [status, setStatus] = useState('Ready');
 
-    return () => clearInterval(interval);
-  }, [screenWatch]);
+  // Feature hooks
+  const chat = useChat(screenWatch);
+  const vision = useVision();
+  const telegram = useTelegram((msg) => {
+    chat.addSystemMessage(`📱 Telegram [${msg.from}]: ${msg.text}`);
+  });
+  const tasks = useTasks((task, step) => {
+    if (step.status === 'running') {
+      setStatus(`Running: ${step.description}`);
+    }
+  });
 
+  // Keyboard shortcuts
   useInput((inputChar, key) => {
-    // If help menu is open, don't process other shortcuts
-    if (showHelpMenu) {
-      return;
-    }
+    if (overlay !== 'none') return;
 
-    if (key.ctrl && inputChar === 'c') {
-      exit();
-    }
-    if (key.ctrl && inputChar === 'l') {
-      setMessages([messages[0]!]); // Keep welcome message
-      setError(null);
-    }
+    if (key.ctrl && inputChar === 'c') exit();
+    if (key.ctrl && inputChar === 'l') chat.clearMessages();
+    if (key.ctrl && inputChar === 'h') setOverlay('help');
+    if (key.ctrl && inputChar === 'p') setOverlay('provider');
     if (key.ctrl && inputChar === 'w') {
-      setScreenWatch((prev) => {
+      setScreenWatch(prev => {
         const newState = !prev;
-        addSystemMessage(
-          newState
-            ? '🖥️ Screen watching enabled. AI will have context of your screen.'
-            : '🖥️ Screen watching disabled.'
+        chat.addSystemMessage(newState
+          ? '🖥️ Screen watching enabled.'
+          : '🖥️ 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;
-      });
+      handleTelegramToggle();
     }
   });
 
-  const handleSubmit = async (value: string) => {
-    if (!value.trim() || isProcessing) return;
-
-    const userInput = value.trim();
-    setInput('');
-    setError(null);
-
-    // Handle commands
-    if (userInput.startsWith('/')) {
-      handleCommand(userInput);
-      return;
-    }
-
-    // Add user message
-    const userMsg: ChatMsg = {
-      id: Date.now().toString(),
-      role: 'user',
-      content: userInput,
-      timestamp: new Date(),
-    };
-    setMessages((prev) => [...prev, userMsg]);
-
-    // Add placeholder for assistant
-    const assistantId = (Date.now() + 1).toString();
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: assistantId,
-        role: 'assistant',
-        content: '',
-        timestamp: new Date(),
-        isStreaming: true,
-      },
-    ]);
-
-    setIsProcessing(true);
-    setStatus('Thinking...');
-
-    try {
-      // Build message history for API
-      const apiMessages: Message[] = messages
-        .filter((m) => m.role === 'user' || m.role === 'assistant')
-        .slice(-10)
-        .map((m) => ({ role: m.role as 'user' | 'assistant', content: m.content }));
-
-      // 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);
-
-      // Update assistant message with response
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === assistantId
-            ? { ...m, content: response.content || '(no response)', isStreaming: false }
-            : m
-        )
-      );
-    } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMsg);
-      // Update assistant message with error
-      setMessages((prev) =>
-        prev.map((m) =>
-          m.id === assistantId
-            ? { ...m, content: `Error: ${errorMsg}`, isStreaming: false }
-            : m
-        )
-      );
-    } finally {
-      setIsProcessing(false);
-      setStatus('Ready');
-    }
-  };
-
-  const handleCommand = (cmd: string) => {
+  // Command handlers
+  const handleCommand = useCallback(async (cmd: string) => {
     const parts = cmd.slice(1).split(' ');
     const command = parts[0];
     const args = parts.slice(1).join(' ');
 
     switch (command) {
       case 'clear':
-        setMessages([messages[0]!]);
-        addSystemMessage('Chat cleared.');
+        chat.clearMessages();
+        chat.addSystemMessage('Chat cleared.');
         break;
+
       case 'help':
-        setShowHelpMenu(true);
+        setOverlay('help');
+        break;
+
+      case 'provider':
+      case 'model':
+        setOverlay('provider');
         break;
+
+      case 'config': {
+        const config = getConfig();
+        chat.addSystemMessage(
+          `⚙️ Configuration:\n` +
+          `  Provider: ${config.provider}\n` +
+          `  Model: ${config.model}\n` +
+          `  Ollama: ${config.ollamaHost}\n\n` +
+          `Use /provider to change`
+        );
+        break;
+      }
+
+      case 'screen':
+        await handleScreenCommand();
+        break;
+
       case 'watch':
-        setScreenWatch((prev) => {
+        setScreenWatch(prev => {
           const newState = !prev;
-          addSystemMessage(
-            newState
-              ? '🖥️ Screen watching enabled.'
-              : '🖥️ Screen watching disabled.'
+          chat.addSystemMessage(newState
+            ? '🖥️ Screen watching enabled.'
+            : '🖥️ Screen watching disabled.'
           );
           return newState;
         });
         break;
+
       case 'telegram':
-        handleTelegramToggle();
-        break;
-      case 'screen':
-        handleScreenCommand();
+        await handleTelegramToggle();
         break;
+
       case 'task':
         if (args) {
-          handleTaskCommand(args);
+          await handleTaskCommand(args);
         } else {
-          addSystemMessage('Usage: /task <description>\nExample: /task open notepad and type hello');
+          chat.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>');
+
+      case 'memory':
+        if (args === 'clear') {
+          tasks.clearMemory();
+          chat.addSystemMessage('🧠 Task memory cleared.');
+        } else {
+          const stats = tasks.getMemoryStats();
+          chat.addSystemMessage(
+            `🧠 Task Memory:\n\n` +
+            `  Learned patterns: ${stats.patternCount}\n` +
+            `  Total successful uses: ${stats.totalUses}\n\n` +
+            (stats.topPatterns.length > 0
+              ? `  Top patterns:\n${stats.topPatterns.map(p => `    • ${p}`).join('\n')}\n\n`
+              : '  No patterns learned yet.\n\n') +
+            `The more you use /task, the smarter it gets!\n` +
+            `Use /memory clear to reset.`
+          );
+        }
         break;
+
       case 'quit':
       case 'exit':
         exit();
         break;
+
       default:
-        addSystemMessage(`Unknown command: ${command}\nType /help to see available commands.`);
+        chat.addSystemMessage(`Unknown command: ${command}\nType /help for commands`);
     }
-  };
+  }, [chat, exit]);
 
-  const handleHelpMenuSelect = (command: string) => {
-    // Execute the selected command
-    handleCommand(command);
-  };
-
-  const handleScreenCommand = async () => {
-    addSystemMessage('📸 Taking screenshot and analyzing...');
-    setStatus('Analyzing screen...');
-    setIsProcessing(true);
+  // Screen command
+  const handleScreenCommand = useCallback(async () => {
+    chat.addSystemMessage('📸 Analyzing screen...');
+    setStatus('Analyzing...');
 
     try {
-      const result = await describeScreen();
-      addSystemMessage(`🖥️ Screen Analysis:\n\n${result.description}`);
+      const description = await vision.analyze();
+      chat.addSystemMessage(`🖥️ Screen:\n\n${description}`);
     } catch (err) {
-      const errorMsg = err instanceof Error ? err.message : 'Vision analysis failed';
-      addSystemMessage(`❌ Screen capture failed: ${errorMsg}`);
+      chat.addSystemMessage(`❌ ${vision.error || 'Vision failed'}`);
     } finally {
-      setIsProcessing(false);
       setStatus('Ready');
     }
-  };
+  }, [chat, vision]);
 
-  const handleTaskCommand = async (taskDescription: string) => {
-    addSystemMessage(`📋 Parsing task: ${taskDescription}`);
+  // Telegram toggle
+  const handleTelegramToggle = useCallback(async () => {
+    if (telegram.isEnabled) {
+      await telegram.stop();
+      chat.addSystemMessage('📱 Telegram stopped.');
+    } else {
+      chat.addSystemMessage('📱 Starting Telegram...');
+      setStatus('Starting Telegram...');
+      try {
+        await telegram.start();
+        chat.addSystemMessage(
+          '📱 Telegram started!\n' +
+          'Send /start to your bot to connect.\n' +
+          'Commands: /screen, /describe, /run, /status'
+        );
+      } catch {
+        chat.addSystemMessage(`❌ ${telegram.error || 'Telegram failed'}`);
+      } finally {
+        setStatus('Ready');
+      }
+    }
+  }, [chat, telegram]);
+
+  // Task command
+  const handleTaskCommand = useCallback(async (description: string) => {
+    chat.addSystemMessage(`📋 Parsing: ${description}`);
     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}`);
+      const task = await tasks.run(description);
+      chat.addSystemMessage(`\n${tasks.format(task)}`);
+      chat.addSystemMessage(task.status === 'completed'
+        ? '✅ Task completed!'
+        : '❌ Task failed.'
+      );
+    } catch {
+      chat.addSystemMessage(`❌ ${tasks.error || 'Task failed'}`);
     } finally {
-      setIsProcessing(false);
       setStatus('Ready');
     }
-  };
+  }, [chat, tasks]);
 
-  const handleTelegramToggle = async () => {
-    const bot = getTelegramBot();
+  // Submit handler
+  const handleSubmit = useCallback(async (value: string) => {
+    if (!value.trim()) return;
 
-    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}`);
-      }
+    if (value.startsWith('/')) {
+      await handleCommand(value);
     } 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}`);
-        });
+      setStatus('Thinking...');
+      await chat.sendMessage(value);
+      setStatus('Ready');
+    }
+  }, [chat, handleCommand]);
 
-        bot.on('error', (error: Error) => {
-          addSystemMessage(`📱 Telegram error: ${error.message}`);
-        });
+  // Provider selection callback
+  const handleProviderSelect = useCallback((provider: string, model: string) => {
+    chat.addSystemMessage(`✅ Updated: ${provider} / ${model}`);
+  }, [chat]);
 
-        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');
-      }
-    }
-  };
-
-  const addSystemMessage = (content: string) => {
-    setMessages((prev) => [
-      ...prev,
-      {
-        id: Date.now().toString(),
-        role: 'system',
-        content,
-        timestamp: new Date(),
-      },
-    ]);
-  };
-
-  // Only show last N messages that fit
-  const visibleMessages = messages.slice(-20);
-
-  // If help menu is open, show it as overlay
-  if (showHelpMenu) {
+  // Render overlays
+  if (overlay === 'help') {
     return (
       <Box flexDirection="column" height="100%" alignItems="center" justifyContent="center">
         <HelpMenu
-          onClose={() => setShowHelpMenu(false)}
-          onSelect={handleHelpMenuSelect}
+          onClose={() => setOverlay('none')}
+          onSelect={(cmd) => { setOverlay('none'); handleCommand(cmd); }}
         />
       </Box>
     );
   }
 
+  if (overlay === 'provider') {
+    return (
+      <Box flexDirection="column" height="100%" alignItems="center" justifyContent="center">
+        <ProviderSelector
+          onClose={() => setOverlay('none')}
+          onSelect={handleProviderSelect}
+        />
+      </Box>
+    );
+  }
+
+  // Main UI
+  const visibleMessages = chat.messages.slice(-20);
+  const isProcessing = chat.isProcessing || vision.isAnalyzing || tasks.isRunning || telegram.isStarting;
+
   return (
     <Box flexDirection="column" height="100%">
-      <Header screenWatch={screenWatch} telegramEnabled={telegramEnabled} />
+      <Header screenWatch={screenWatch} telegramEnabled={telegram.isEnabled} />
 
       <Box flexDirection="column" flexGrow={1} borderStyle="round" borderColor="gray" padding={1}>
         <Text bold color="gray"> Chat </Text>
@@ -381,15 +262,15 @@ export function App() {
         ))}
       </Box>
 
-      {error && (
+      {chat.error && (
         <Box marginY={1}>
-          <Text color="red">Error: {error}</Text>
+          <Text color="red">Error: {chat.error}</Text>
         </Box>
       )}
 
       <ChatInput
-        value={input}
-        onChange={setInput}
+        value=""
+        onChange={() => {}}
         onSubmit={handleSubmit}
         isProcessing={isProcessing}
       />