@projectservan8n/cnapse 0.4.0 → 0.5.0

package/src/components/ProviderSelector.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { getConfig, setProvider, setModel } from '../lib/config.js';
+
+interface ProviderSelectorProps {
+  onClose: () => void;
+  onSelect: (provider: string, model: string) => void;
+}
+
+interface ProviderOption {
+  id: 'ollama' | 'openrouter' | 'anthropic' | 'openai';
+  name: string;
+  description: string;
+  defaultModel: string;
+  models: string[];
+}
+
+const PROVIDERS: ProviderOption[] = [
+  {
+    id: 'ollama',
+    name: 'Ollama',
+    description: 'Local AI - Free, private, no API key',
+    defaultModel: 'qwen2.5:0.5b',
+    models: ['qwen2.5:0.5b', 'qwen2.5:1.5b', 'qwen2.5:7b', 'llama3.2:1b', 'llama3.2:3b', 'mistral:7b', 'codellama:7b', 'llava:7b'],
+  },
+  {
+    id: 'openrouter',
+    name: 'OpenRouter',
+    description: 'Many models, pay-per-use',
+    defaultModel: 'qwen/qwen-2.5-coder-32b-instruct',
+    models: [
+      'qwen/qwen-2.5-coder-32b-instruct',
+      'anthropic/claude-3.5-sonnet',
+      'openai/gpt-4o',
+      'openai/gpt-4o-mini',
+      'google/gemini-pro-1.5',
+      'meta-llama/llama-3.1-70b-instruct',
+    ],
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    description: 'Claude models - Best for coding',
+    defaultModel: 'claude-3-5-sonnet-20241022',
+    models: ['claude-3-5-sonnet-20241022', 'claude-3-opus-20240229', 'claude-3-haiku-20240307'],
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    description: 'GPT models',
+    defaultModel: 'gpt-4o',
+    models: ['gpt-4o', 'gpt-4o-mini', 'gpt-4-turbo', 'gpt-3.5-turbo'],
+  },
+];
+
+type SelectionMode = 'provider' | 'model';
+
+export function ProviderSelector({ onClose, onSelect }: ProviderSelectorProps) {
+  const config = getConfig();
+  const [mode, setMode] = useState<SelectionMode>('provider');
+  const [providerIndex, setProviderIndex] = useState(() => {
+    const idx = PROVIDERS.findIndex(p => p.id === config.provider);
+    return idx >= 0 ? idx : 0;
+  });
+  const [modelIndex, setModelIndex] = useState(0);
+  const [selectedProvider, setSelectedProvider] = useState<ProviderOption | null>(null);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    if (mode === 'provider') {
+      if (key.upArrow) {
+        setProviderIndex(prev => (prev > 0 ? prev - 1 : PROVIDERS.length - 1));
+      } else if (key.downArrow) {
+        setProviderIndex(prev => (prev < PROVIDERS.length - 1 ? prev + 1 : 0));
+      } else if (key.return) {
+        const provider = PROVIDERS[providerIndex]!;
+        setSelectedProvider(provider);
+        // Find current model index if it exists in the provider's models
+        const currentModelIdx = provider.models.findIndex(m => m === config.model);
+        setModelIndex(currentModelIdx >= 0 ? currentModelIdx : 0);
+        setMode('model');
+      }
+    } else if (mode === 'model' && selectedProvider) {
+      if (key.upArrow) {
+        setModelIndex(prev => (prev > 0 ? prev - 1 : selectedProvider.models.length - 1));
+      } else if (key.downArrow) {
+        setModelIndex(prev => (prev < selectedProvider.models.length - 1 ? prev + 1 : 0));
+      } else if (key.return) {
+        const model = selectedProvider.models[modelIndex]!;
+        // Save to config
+        setProvider(selectedProvider.id);
+        setModel(model);
+        onSelect(selectedProvider.id, model);
+        onClose();
+      } else if (key.leftArrow || input === 'b') {
+        setMode('provider');
+      }
+    }
+  });
+
+  if (mode === 'provider') {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+        <Box marginBottom={1}>
+          <Text bold color="cyan">Select Provider</Text>
+        </Box>
+        <Box marginBottom={1}>
+          <Text color="gray">Use arrows to navigate, Enter to select, Esc to cancel</Text>
+        </Box>
+
+        {PROVIDERS.map((provider, index) => {
+          const isSelected = index === providerIndex;
+          const isCurrent = provider.id === config.provider;
+
+          return (
+            <Box key={provider.id} marginY={0}>
+              <Text color={isSelected ? 'cyan' : 'white'}>
+                {isSelected ? '❯ ' : '  '}
+                {provider.name}
+                {isCurrent && <Text color="green"> (current)</Text>}
+              </Text>
+              {isSelected && (
+                <Text color="gray"> - {provider.description}</Text>
+              )}
+            </Box>
+          );
+        })}
+
+        <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text color="gray">
+            Current: {config.provider} / {config.model}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Model selection mode
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      <Box marginBottom={1}>
+        <Text bold color="cyan">Select Model for {selectedProvider?.name}</Text>
+      </Box>
+      <Box marginBottom={1}>
+        <Text color="gray">Arrows to navigate, Enter to select, B/Left to go back</Text>
+      </Box>
+
+      {selectedProvider?.models.map((model, index) => {
+        const isSelected = index === modelIndex;
+        const isCurrent = model === config.model && selectedProvider.id === config.provider;
+        const isDefault = model === selectedProvider.defaultModel;
+
+        return (
+          <Box key={model} marginY={0}>
+            <Text color={isSelected ? 'cyan' : 'white'}>
+              {isSelected ? '❯ ' : '  '}
+              {model}
+              {isCurrent && <Text color="green"> (current)</Text>}
+              {isDefault && !isCurrent && <Text color="yellow"> (default)</Text>}
+            </Text>
+          </Box>
+        );
+      })}
+
+      <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
+        <Text color="gray">
+          Provider: {selectedProvider?.name}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Custom hooks for C-napse
+ */
+
+export { useChat } from './useChat.js';
+export type { ChatMessage, UseChatResult } from './useChat.js';
+
+export { useVision } from './useVision.js';
+export type { UseVisionResult } from './useVision.js';
+
+export { useTelegram } from './useTelegram.js';
+export type { UseTelegramResult } from './useTelegram.js';
+
+export { useTasks } from './useTasks.js';
+export type { UseTasksResult } from './useTasks.js';

package/src/hooks/useChat.ts

@@ -0,0 +1,149 @@
+/**
+ * Chat Hook - AI conversation management
+ */
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { chat, Message } from '../lib/api.js';
+import { getScreenDescription } from '../lib/screen.js';
+
+export interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: Date;
+  isStreaming?: boolean;
+}
+
+export interface UseChatResult {
+  messages: ChatMessage[];
+  isProcessing: boolean;
+  error: string | null;
+  sendMessage: (content: string) => Promise<void>;
+  addSystemMessage: (content: string) => void;
+  clearMessages: () => void;
+}
+
+const WELCOME_MESSAGE: ChatMessage = {
+  id: '0',
+  role: 'system',
+  content: 'Welcome to C-napse! Type your message and press Enter.\n\nShortcuts: Ctrl+H for help, Ctrl+P for provider',
+  timestamp: new Date(),
+};
+
+export function useChat(screenWatch: boolean = false): UseChatResult {
+  const [messages, setMessages] = useState<ChatMessage[]>([WELCOME_MESSAGE]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  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);
+    return () => clearInterval(interval);
+  }, [screenWatch]);
+
+  const addSystemMessage = useCallback((content: string) => {
+    setMessages(prev => [
+      ...prev,
+      {
+        id: Date.now().toString(),
+        role: 'system',
+        content,
+        timestamp: new Date(),
+      },
+    ]);
+  }, []);
+
+  const sendMessage = useCallback(async (content: string) => {
+    if (!content.trim() || isProcessing) return;
+
+    setError(null);
+
+    // Add user message
+    const userMsg: ChatMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content,
+      timestamp: new Date(),
+    };
+
+    // Add assistant placeholder
+    const assistantId = (Date.now() + 1).toString();
+    const assistantMsg: ChatMessage = {
+      id: assistantId,
+      role: 'assistant',
+      content: '',
+      timestamp: new Date(),
+      isStreaming: true,
+    };
+
+    setMessages(prev => [...prev, userMsg, assistantMsg]);
+    setIsProcessing(true);
+
+    try {
+      // Build message history
+      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 finalContent = content;
+      if (screenWatch && screenContextRef.current) {
+        finalContent = `[Screen context: ${screenContextRef.current}]\n\n${content}`;
+      }
+
+      apiMessages.push({ role: 'user', content: finalContent });
+
+      const response = await chat(apiMessages);
+
+      // Update assistant message
+      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);
+      setMessages(prev =>
+        prev.map(m =>
+          m.id === assistantId
+            ? { ...m, content: `Error: ${errorMsg}`, isStreaming: false }
+            : m
+        )
+      );
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [messages, isProcessing, screenWatch]);
+
+  const clearMessages = useCallback(() => {
+    setMessages([WELCOME_MESSAGE]);
+    setError(null);
+  }, []);
+
+  return {
+    messages,
+    isProcessing,
+    error,
+    sendMessage,
+    addSystemMessage,
+    clearMessages,
+  };
+}

package/src/hooks/useTasks.ts

@@ -0,0 +1,63 @@
+/**
+ * Tasks Hook - Multi-step task automation
+ */
+
+import { useState, useCallback } from 'react';
+import { parseTask, executeTask, formatTask, getTaskMemoryStats, clearTaskMemory, Task, TaskStep } from '../lib/tasks.js';
+
+export interface UseTasksResult {
+  isRunning: boolean;
+  currentTask: Task | null;
+  currentStep: TaskStep | null;
+  error: string | null;
+  run: (description: string) => Promise<Task>;
+  format: (task: Task) => string;
+  getMemoryStats: () => { patternCount: number; totalUses: number; topPatterns: string[] };
+  clearMemory: () => void;
+}
+
+export function useTasks(onProgress?: (task: Task, step: TaskStep) => void): UseTasksResult {
+  const [isRunning, setIsRunning] = useState(false);
+  const [currentTask, setCurrentTask] = useState<Task | null>(null);
+  const [currentStep, setCurrentStep] = useState<TaskStep | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = useCallback(async (description: string): Promise<Task> => {
+    setIsRunning(true);
+    setError(null);
+
+    try {
+      // Parse the task
+      const task = await parseTask(description);
+      setCurrentTask(task);
+
+      // Execute with progress callback
+      const result = await executeTask(task, (updatedTask, step) => {
+        setCurrentTask({ ...updatedTask });
+        setCurrentStep(step);
+        onProgress?.(updatedTask, step);
+      });
+
+      setCurrentTask(result);
+      return result;
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Task failed';
+      setError(errorMsg);
+      throw err;
+    } finally {
+      setIsRunning(false);
+      setCurrentStep(null);
+    }
+  }, [onProgress]);
+
+  return {
+    isRunning,
+    currentTask,
+    currentStep,
+    error,
+    run,
+    format: formatTask,
+    getMemoryStats: getTaskMemoryStats,
+    clearMemory: clearTaskMemory,
+  };
+}

package/src/hooks/useTelegram.ts

@@ -0,0 +1,91 @@
+/**
+ * Telegram Hook - Remote PC control via Telegram bot
+ */
+
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { getTelegramBot, TelegramMessage } from '../services/telegram.js';
+
+export interface UseTelegramResult {
+  isEnabled: boolean;
+  isStarting: boolean;
+  error: string | null;
+  lastMessage: TelegramMessage | null;
+  toggle: () => Promise<void>;
+  start: () => Promise<void>;
+  stop: () => Promise<void>;
+}
+
+export function useTelegram(onMessage?: (msg: TelegramMessage) => void): UseTelegramResult {
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastMessage, setLastMessage] = useState<TelegramMessage | null>(null);
+  const onMessageRef = useRef(onMessage);
+
+  // Keep callback ref updated
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+  }, [onMessage]);
+
+  const start = useCallback(async () => {
+    if (isEnabled) return;
+
+    setIsStarting(true);
+    setError(null);
+
+    try {
+      const bot = getTelegramBot();
+
+      // Setup event handlers
+      bot.on('message', (msg: TelegramMessage) => {
+        setLastMessage(msg);
+        onMessageRef.current?.(msg);
+      });
+
+      bot.on('error', (err: Error) => {
+        setError(err.message);
+      });
+
+      await bot.start();
+      setIsEnabled(true);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Failed to start Telegram bot';
+      setError(errorMsg);
+      throw err;
+    } finally {
+      setIsStarting(false);
+    }
+  }, [isEnabled]);
+
+  const stop = useCallback(async () => {
+    if (!isEnabled) return;
+
+    try {
+      const bot = getTelegramBot();
+      await bot.stop();
+      setIsEnabled(false);
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Failed to stop Telegram bot';
+      setError(errorMsg);
+      throw err;
+    }
+  }, [isEnabled]);
+
+  const toggle = useCallback(async () => {
+    if (isEnabled) {
+      await stop();
+    } else {
+      await start();
+    }
+  }, [isEnabled, start, stop]);
+
+  return {
+    isEnabled,
+    isStarting,
+    error,
+    lastMessage,
+    toggle,
+    start,
+    stop,
+  };
+}

package/src/hooks/useVision.ts

@@ -0,0 +1,47 @@
+/**
+ * Vision Hook - Screenshot capture and AI description
+ */
+
+import { useState, useCallback } from 'react';
+import { describeScreen } from '../lib/vision.js';
+
+export interface UseVisionResult {
+  isAnalyzing: boolean;
+  lastDescription: string | null;
+  lastScreenshot: string | null;
+  error: string | null;
+  analyze: () => Promise<string>;
+}
+
+export function useVision(): UseVisionResult {
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [lastDescription, setLastDescription] = useState<string | null>(null);
+  const [lastScreenshot, setLastScreenshot] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const analyze = useCallback(async (): Promise<string> => {
+    setIsAnalyzing(true);
+    setError(null);
+
+    try {
+      const result = await describeScreen();
+      setLastDescription(result.description);
+      setLastScreenshot(result.screenshot);
+      return result.description;
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : 'Vision analysis failed';
+      setError(errorMsg);
+      throw err;
+    } finally {
+      setIsAnalyzing(false);
+    }
+  }, []);
+
+  return {
+    isAnalyzing,
+    lastDescription,
+    lastScreenshot,
+    error,
+    analyze,
+  };
+}