@projectservan8n/cnapse 0.2.1 → 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/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>
+  );
+}

package/src/components/TaskProgress.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { Task, TaskStep } from '../lib/tasks.js';
+
+interface TaskProgressProps {
+  task: Task;
+}
+
+const statusEmoji: Record<Task['status'], string> = {
+  pending: '⏳',
+  running: '🔄',
+  completed: '✅',
+  failed: '❌',
+};
+
+const stepStatusEmoji: Record<TaskStep['status'], string> = {
+  pending: '○',
+  running: '◐',
+  completed: '●',
+  failed: '✗',
+  skipped: '◌',
+};
+
+const stepStatusColor: Record<TaskStep['status'], string> = {
+  pending: 'gray',
+  running: 'yellow',
+  completed: 'green',
+  failed: 'red',
+  skipped: 'gray',
+};
+
+export function TaskProgress({ task }: TaskProgressProps) {
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1} marginY={1}>
+      <Box marginBottom={1}>
+        <Text bold>
+          {statusEmoji[task.status]} Task: {task.description}
+        </Text>
+      </Box>
+
+      {task.steps.map((step, index) => (
+        <Box key={step.id} marginLeft={2}>
+          <Text color={stepStatusColor[step.status]}>
+            {stepStatusEmoji[step.status]} {step.description}
+          </Text>
+          {step.result && (
+            <Text color="gray" dimColor> → {step.result}</Text>
+          )}
+          {step.error && (
+            <Text color="red"> (Error: {step.error})</Text>
+          )}
+        </Box>
+      ))}
+
+      {task.status === 'completed' && (
+        <Box marginTop={1}>
+          <Text color="green">✓ Task completed</Text>
+        </Box>
+      )}
+
+      {task.status === 'failed' && (
+        <Box marginTop={1}>
+          <Text color="red">✗ Task failed</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,
+  };
+}