@projectservan8n/cnapse 0.2.1 → 0.5.0

package/src/components/App.tsx

@@ -1,155 +1,253 @@
-import React, { useState, useEffect } 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 { chat, Message } from '../lib/api.js';
-
-interface ChatMsg {
-  id: string;
-  role: 'user' | 'assistant' | 'system';
-  content: string;
-  timestamp: Date;
-  isStreaming?: boolean;
-}
+import { HelpMenu } from './HelpMenu.js';
+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  /clear - Clear chat\n  /help  - Show help',
-      timestamp: new Date(),
-    },
-  ]);
-  const [input, setInput] = useState('');
-  const [isProcessing, setIsProcessing] = useState(false);
+
+  // UI State
+  const [overlay, setOverlay] = useState<OverlayType>('none');
+  const [screenWatch, setScreenWatch] = useState(false);
   const [status, setStatus] = useState('Ready');
-  const [error, setError] = useState<string | null>(null);
 
+  // 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 (key.ctrl && inputChar === 'c') {
-      exit();
+    if (overlay !== 'none') return;
+
+    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 => {
+        const newState = !prev;
+        chat.addSystemMessage(newState
+          ? '🖥️ Screen watching enabled.'
+          : '🖥️ Screen watching disabled.'
+        );
+        return newState;
+      });
     }
-    if (key.ctrl && inputChar === 'l') {
-      setMessages([messages[0]!]); // Keep welcome message
-      setError(null);
+    if (key.ctrl && inputChar === 't') {
+      handleTelegramToggle();
     }
   });
 
-  const handleSubmit = async (value: string) => {
-    if (!value.trim() || isProcessing) return;
+  // Command handlers
+  const handleCommand = useCallback(async (cmd: string) => {
+    const parts = cmd.slice(1).split(' ');
+    const command = parts[0];
+    const args = parts.slice(1).join(' ');
 
-    const userInput = value.trim();
-    setInput('');
-    setError(null);
+    switch (command) {
+      case 'clear':
+        chat.clearMessages();
+        chat.addSystemMessage('Chat cleared.');
+        break;
 
-    // Handle commands
-    if (userInput.startsWith('/')) {
-      handleCommand(userInput);
-      return;
+      case 'help':
+        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 => {
+          const newState = !prev;
+          chat.addSystemMessage(newState
+            ? '🖥️ Screen watching enabled.'
+            : '🖥️ Screen watching disabled.'
+          );
+          return newState;
+        });
+        break;
+
+      case 'telegram':
+        await handleTelegramToggle();
+        break;
+
+      case 'task':
+        if (args) {
+          await handleTaskCommand(args);
+        } else {
+          chat.addSystemMessage('Usage: /task <description>\nExample: /task open notepad and type hello');
+        }
+        break;
+
+      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:
+        chat.addSystemMessage(`Unknown command: ${command}\nType /help for commands`);
     }
+  }, [chat, exit]);
 
-    // 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...');
+  // Screen command
+  const handleScreenCommand = useCallback(async () => {
+    chat.addSystemMessage('📸 Analyzing screen...');
+    setStatus('Analyzing...');
 
     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 }));
-
-      apiMessages.push({ role: 'user', content: userInput });
-
-      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
-        )
-      );
+      const description = await vision.analyze();
+      chat.addSystemMessage(`🖥️ Screen:\n\n${description}`);
     } 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
-        )
+      chat.addSystemMessage(`❌ ${vision.error || 'Vision failed'}`);
+    } finally {
+      setStatus('Ready');
+    }
+  }, [chat, vision]);
+
+  // 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...');
+
+    try {
+      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 handleCommand = (cmd: string) => {
-    const parts = cmd.slice(1).split(' ');
-    const command = parts[0];
+  // Submit handler
+  const handleSubmit = useCallback(async (value: string) => {
+    if (!value.trim()) return;
 
-    switch (command) {
-      case 'clear':
-        setMessages([messages[0]!]);
-        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!'
-        );
-        break;
-      default:
-        addSystemMessage(`Unknown command: ${command}`);
+    if (value.startsWith('/')) {
+      await handleCommand(value);
+    } else {
+      setStatus('Thinking...');
+      await chat.sendMessage(value);
+      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);
+  }, [chat, handleCommand]);
+
+  // Provider selection callback
+  const handleProviderSelect = useCallback((provider: string, model: string) => {
+    chat.addSystemMessage(`✅ Updated: ${provider} / ${model}`);
+  }, [chat]);
+
+  // Render overlays
+  if (overlay === 'help') {
+    return (
+      <Box flexDirection="column" height="100%" alignItems="center" justifyContent="center">
+        <HelpMenu
+          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 />
+      <Header screenWatch={screenWatch} telegramEnabled={telegram.isEnabled} />
 
       <Box flexDirection="column" flexGrow={1} borderStyle="round" borderColor="gray" padding={1}>
         <Text bold color="gray"> Chat </Text>
@@ -164,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}
       />

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,144 @@
+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' },
+  { command: '/memory', description: 'View/clear learned task patterns', 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', shortcut: 'Ctrl+P', 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>
+  );
+}