@marktoflow/gui 2.0.0-alpha.1

package/src/server/services/agents/registry.ts

@@ -0,0 +1,289 @@
+/**
+ * Agent Provider Registry
+ * Manages all available AI agent providers and provides a unified interface
+ */
+
+import type {
+  AgentProvider,
+  AgentProviderEntry,
+  AgentConfig,
+  PromptResult,
+  PromptHistoryItem,
+  Workflow,
+} from './types.js';
+import { createClaudeProvider } from './claude-provider.js';
+import { createClaudeCodeProvider } from './claude-code-provider.js';
+import { createCopilotProvider } from './copilot-provider.js';
+import { createDemoProvider } from './demo-provider.js';
+import { createOllamaProvider } from './ollama-provider.js';
+
+/**
+ * Registry of all available agent providers
+ */
+export class AgentRegistry {
+  private providers: Map<string, AgentProvider> = new Map();
+  private activeProviderId: string = 'demo';
+  private history: PromptHistoryItem[] = [];
+
+  constructor() {
+    // Register built-in providers
+    // SDK-based providers with automatic CLI authentication (recommended)
+    this.registerProvider({
+      id: 'claude-code',
+      name: 'Claude Code (SDK)',
+      factory: createClaudeCodeProvider,
+    });
+    this.registerProvider({
+      id: 'copilot',
+      name: 'GitHub Copilot (SDK)',
+      factory: createCopilotProvider,
+    });
+    // API key-based providers
+    this.registerProvider({
+      id: 'claude',
+      name: 'Claude (API Key)',
+      factory: createClaudeProvider,
+    });
+    // Local providers
+    this.registerProvider({
+      id: 'ollama',
+      name: 'Ollama (Local)',
+      factory: createOllamaProvider,
+    });
+    // Demo mode (always available)
+    this.registerProvider({
+      id: 'demo',
+      name: 'Demo Mode',
+      factory: createDemoProvider,
+    });
+  }
+
+  /**
+   * Register a new provider
+   */
+  registerProvider(entry: AgentProviderEntry): void {
+    const provider = entry.factory(entry.defaultConfig);
+    this.providers.set(entry.id, provider);
+  }
+
+  /**
+   * Get all registered providers
+   */
+  getProviders(): Array<{ id: string; name: string; ready: boolean }> {
+    return Array.from(this.providers.entries()).map(([id, provider]) => ({
+      id,
+      name: provider.name,
+      ready: provider.isReady(),
+    }));
+  }
+
+  /**
+   * Get a specific provider
+   */
+  getProvider(id: string): AgentProvider | undefined {
+    return this.providers.get(id);
+  }
+
+  /**
+   * Get the active provider
+   */
+  getActiveProvider(): AgentProvider {
+    return this.providers.get(this.activeProviderId) || this.providers.get('demo')!;
+  }
+
+  /**
+   * Set the active provider
+   */
+  async setActiveProvider(id: string, config?: AgentConfig): Promise<boolean> {
+    const provider = this.providers.get(id);
+    if (!provider) {
+      return false;
+    }
+
+    if (config) {
+      await provider.initialize(config);
+    }
+
+    if (provider.isReady()) {
+      this.activeProviderId = id;
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Get the active provider ID
+   */
+  getActiveProviderId(): string {
+    return this.activeProviderId;
+  }
+
+  /**
+   * Auto-detect and set the best available provider
+   * Priority: SDK-based (auto-auth) > API key-based > Local > Demo
+   */
+  async autoDetectProvider(): Promise<string> {
+    // Try Claude Code SDK first (uses automatic CLI authentication)
+    const claudeCodeProvider = this.providers.get('claude-code');
+    if (claudeCodeProvider) {
+      await claudeCodeProvider.initialize({
+        options: {
+          cwd: process.cwd(),
+        },
+      });
+      if (claudeCodeProvider.isReady()) {
+        this.activeProviderId = 'claude-code';
+        return 'claude-code';
+      }
+    }
+
+    // Try GitHub Copilot SDK (uses automatic CLI authentication)
+    const copilotProvider = this.providers.get('copilot');
+    if (copilotProvider) {
+      await copilotProvider.initialize({
+        baseUrl: process.env.COPILOT_CLI_URL,
+        options: {
+          cliPath: process.env.COPILOT_CLI_PATH,
+        },
+      });
+      if (copilotProvider.isReady()) {
+        this.activeProviderId = 'copilot';
+        return 'copilot';
+      }
+    }
+
+    // Try Claude with API key (requires ANTHROPIC_API_KEY)
+    const claudeProvider = this.providers.get('claude');
+    if (claudeProvider) {
+      await claudeProvider.initialize({
+        apiKey: process.env.ANTHROPIC_API_KEY,
+      });
+      if (claudeProvider.isReady()) {
+        this.activeProviderId = 'claude';
+        return 'claude';
+      }
+    }
+
+    // Try Ollama (if running locally)
+    const ollamaProvider = this.providers.get('ollama');
+    if (ollamaProvider) {
+      await ollamaProvider.initialize({
+        baseUrl: process.env.OLLAMA_BASE_URL || 'http://localhost:11434',
+      });
+      if (ollamaProvider.isReady()) {
+        this.activeProviderId = 'ollama';
+        return 'ollama';
+      }
+    }
+
+    // Fall back to demo mode
+    this.activeProviderId = 'demo';
+    return 'demo';
+  }
+
+  /**
+   * Process a prompt using the active provider
+   */
+  async processPrompt(prompt: string, workflow: Workflow): Promise<PromptResult> {
+    const provider = this.getActiveProvider();
+    const result = await provider.processPrompt(prompt, workflow);
+
+    // Record in history
+    this.history.unshift({
+      prompt,
+      response: result.explanation,
+      timestamp: new Date(),
+      success: !result.error,
+      provider: provider.id,
+    });
+
+    // Keep only last 50 items
+    if (this.history.length > 50) {
+      this.history = this.history.slice(0, 50);
+    }
+
+    return result;
+  }
+
+  /**
+   * Get suggestions using the active provider
+   */
+  async getSuggestions(workflow: Workflow, selectedStepId?: string): Promise<string[]> {
+    const provider = this.getActiveProvider();
+    return provider.getSuggestions(workflow, selectedStepId);
+  }
+
+  /**
+   * Stream a prompt using the active provider (if supported)
+   */
+  async streamPrompt(
+    prompt: string,
+    workflow: Workflow,
+    onChunk: (chunk: string) => void
+  ): Promise<PromptResult> {
+    const provider = this.getActiveProvider();
+
+    if (provider.streamPrompt) {
+      const result = await provider.streamPrompt(prompt, workflow, onChunk);
+
+      this.history.unshift({
+        prompt,
+        response: result.explanation,
+        timestamp: new Date(),
+        success: !result.error,
+        provider: provider.id,
+      });
+
+      return result;
+    }
+
+    // Fall back to non-streaming
+    return this.processPrompt(prompt, workflow);
+  }
+
+  /**
+   * Get prompt history
+   */
+  getHistory(limit: number = 20): PromptHistoryItem[] {
+    return this.history.slice(0, limit);
+  }
+
+  /**
+   * Clear history
+   */
+  clearHistory(): void {
+    this.history = [];
+  }
+
+  /**
+   * Get provider status
+   */
+  getStatus(): {
+    activeProvider: string;
+    providers: Array<{ id: string; name: string; ready: boolean; model?: string; error?: string }>;
+  } {
+    return {
+      activeProvider: this.activeProviderId,
+      providers: Array.from(this.providers.entries()).map(([id, provider]) => ({
+        id,
+        name: provider.name,
+        ...provider.getStatus(),
+      })),
+    };
+  }
+}
+
+// Singleton instance
+let registryInstance: AgentRegistry | null = null;
+
+export function getAgentRegistry(): AgentRegistry {
+  if (!registryInstance) {
+    registryInstance = new AgentRegistry();
+  }
+  return registryInstance;
+}
+
+export function createAgentRegistry(): AgentRegistry {
+  return new AgentRegistry();
+}

package/src/server/services/agents/types.ts

@@ -0,0 +1,146 @@
+/**
+ * Abstract types for AI agent providers
+ * Allows the GUI to work with any agent backend (Claude, OpenCode, Ollama, etc.)
+ */
+
+export interface Workflow {
+  metadata: Record<string, unknown>;
+  steps: WorkflowStep[];
+  tools?: Record<string, unknown>;
+  inputs?: Record<string, unknown>;
+}
+
+export interface WorkflowStep {
+  id: string;
+  name?: string;
+  action?: string;
+  inputs?: Record<string, unknown>;
+  outputVariable?: string;
+  errorHandling?: {
+    action: 'stop' | 'continue' | 'retry';
+    maxRetries?: number;
+  };
+  conditions?: string[];
+}
+
+export interface PromptResult {
+  explanation: string;
+  workflow?: Workflow;
+  diff?: string;
+  error?: string;
+}
+
+export interface PromptHistoryItem {
+  prompt: string;
+  response: string;
+  timestamp: Date;
+  success: boolean;
+  provider: string;
+}
+
+export interface AgentCapabilities {
+  /** Whether the provider supports streaming responses */
+  streaming: boolean;
+  /** Whether the provider supports tool use */
+  toolUse: boolean;
+  /** Whether the provider supports code execution */
+  codeExecution: boolean;
+  /** Whether the provider supports system prompts */
+  systemPrompts: boolean;
+  /** Maximum context length in tokens */
+  maxContextLength?: number;
+  /** List of available models */
+  models: string[];
+}
+
+export interface AgentConfig {
+  /** API key or authentication token */
+  apiKey?: string;
+  /** Base URL for API requests */
+  baseUrl?: string;
+  /** Default model to use */
+  model?: string;
+  /** Request timeout in milliseconds */
+  timeout?: number;
+  /** Additional provider-specific options */
+  options?: Record<string, unknown>;
+}
+
+/**
+ * Abstract interface for AI agent providers
+ * Each provider (Claude, OpenCode, Ollama) implements this interface
+ */
+export interface AgentProvider {
+  /** Unique identifier for this provider */
+  readonly id: string;
+  /** Human-readable name */
+  readonly name: string;
+  /** Provider capabilities */
+  readonly capabilities: AgentCapabilities;
+
+  /**
+   * Initialize the provider with configuration
+   * @param config - Provider configuration
+   */
+  initialize(config: AgentConfig): Promise<void>;
+
+  /**
+   * Check if the provider is ready and properly configured
+   */
+  isReady(): boolean;
+
+  /**
+   * Process a natural language prompt to modify a workflow
+   * @param prompt - User's natural language request
+   * @param workflow - Current workflow to modify
+   */
+  processPrompt(prompt: string, workflow: Workflow): Promise<PromptResult>;
+
+  /**
+   * Get suggested prompts based on the current workflow
+   * @param workflow - Current workflow
+   * @param selectedStepId - Optional selected step ID
+   */
+  getSuggestions(workflow: Workflow, selectedStepId?: string): Promise<string[]>;
+
+  /**
+   * Stream a response (if supported)
+   * @param prompt - User prompt
+   * @param workflow - Current workflow
+   * @param onChunk - Callback for each chunk
+   */
+  streamPrompt?(
+    prompt: string,
+    workflow: Workflow,
+    onChunk: (chunk: string) => void
+  ): Promise<PromptResult>;
+
+  /**
+   * Cancel any ongoing request
+   */
+  cancel?(): Promise<void>;
+
+  /**
+   * Get provider-specific health status
+   */
+  getStatus(): {
+    ready: boolean;
+    model?: string;
+    error?: string;
+  };
+}
+
+/**
+ * Factory function type for creating agent providers
+ */
+export type AgentProviderFactory = (config?: AgentConfig) => AgentProvider;
+
+/**
+ * Registry entry for agent providers
+ */
+export interface AgentProviderEntry {
+  id: string;
+  name: string;
+  factory: AgentProviderFactory;
+  defaultConfig?: AgentConfig;
+}

package/src/server/websocket/index.ts

@@ -0,0 +1,104 @@
+import type { Server as SocketIOServer, Socket } from 'socket.io';
+
+interface ClientState {
+  subscribedWorkflows: Set<string>;
+  subscribedExecutions: Set<string>;
+}
+
+const clients = new Map<string, ClientState>();
+
+export function setupWebSocket(io: SocketIOServer) {
+  io.on('connection', (socket: Socket) => {
+    console.log(`Client connected: ${socket.id}`);
+
+    // Initialize client state
+    clients.set(socket.id, {
+      subscribedWorkflows: new Set(),
+      subscribedExecutions: new Set(),
+    });
+
+    // Handle workflow subscription
+    socket.on('workflow:subscribe', (workflowPath: string) => {
+      const state = clients.get(socket.id);
+      if (state) {
+        state.subscribedWorkflows.add(workflowPath);
+        socket.join(`workflow:${workflowPath}`);
+        console.log(`Client ${socket.id} subscribed to workflow: ${workflowPath}`);
+      }
+    });
+
+    socket.on('workflow:unsubscribe', (workflowPath: string) => {
+      const state = clients.get(socket.id);
+      if (state) {
+        state.subscribedWorkflows.delete(workflowPath);
+        socket.leave(`workflow:${workflowPath}`);
+      }
+    });
+
+    // Handle execution subscription
+    socket.on('execution:subscribe', (runId: string) => {
+      const state = clients.get(socket.id);
+      if (state) {
+        state.subscribedExecutions.add(runId);
+        socket.join(`execution:${runId}`);
+        console.log(`Client ${socket.id} subscribed to execution: ${runId}`);
+      }
+    });
+
+    socket.on('execution:unsubscribe', (runId: string) => {
+      const state = clients.get(socket.id);
+      if (state) {
+        state.subscribedExecutions.delete(runId);
+        socket.leave(`execution:${runId}`);
+      }
+    });
+
+    // Handle disconnect
+    socket.on('disconnect', () => {
+      console.log(`Client disconnected: ${socket.id}`);
+      clients.delete(socket.id);
+    });
+  });
+
+  // Helper functions to emit events
+  return {
+    // Emit to all clients subscribed to a workflow
+    emitWorkflowUpdate(workflowPath: string, data: any) {
+      io.to(`workflow:${workflowPath}`).emit('workflow:updated', {
+        path: workflowPath,
+        ...data,
+      });
+    },
+
+    // Emit execution step update
+    emitExecutionStep(runId: string, data: any) {
+      io.to(`execution:${runId}`).emit('execution:step', {
+        runId,
+        ...data,
+      });
+    },
+
+    // Emit execution completed
+    emitExecutionCompleted(runId: string, data: any) {
+      io.to(`execution:${runId}`).emit('execution:completed', {
+        runId,
+        ...data,
+      });
+    },
+
+    // Emit AI processing status
+    emitAIProcessing(socketId: string, processing: boolean) {
+      io.to(socketId).emit('ai:processing', { processing });
+    },
+
+    // Emit AI response
+    emitAIResponse(socketId: string, response: any) {
+      io.to(socketId).emit('ai:response', response);
+    },
+
+    // Broadcast to all clients
+    broadcast(event: string, data: any) {
+      io.emit(event, data);
+    },
+  };
+}

package/src/shared/constants.ts

@@ -0,0 +1,180 @@
+// Shared constants between client and server
+
+export const API_VERSION = 'v1';
+export const API_BASE_PATH = '/api';
+
+// WebSocket events
+export const WS_EVENTS = {
+  // Server -> Client
+  WORKFLOW_UPDATED: 'workflow:updated',
+  EXECUTION_STARTED: 'execution:started',
+  EXECUTION_STEP: 'execution:step',
+  EXECUTION_COMPLETED: 'execution:completed',
+  AI_PROCESSING: 'ai:processing',
+  AI_RESPONSE: 'ai:response',
+
+  // Client -> Server
+  WORKFLOW_SUBSCRIBE: 'workflow:subscribe',
+  WORKFLOW_UNSUBSCRIBE: 'workflow:unsubscribe',
+  EXECUTION_SUBSCRIBE: 'execution:subscribe',
+  EXECUTION_UNSUBSCRIBE: 'execution:unsubscribe',
+} as const;
+
+// Available services and their methods
+export const SERVICES = {
+  slack: {
+    name: 'Slack',
+    icon: 'slack',
+    methods: [
+      'chat.postMessage',
+      'chat.update',
+      'chat.delete',
+      'conversations.list',
+      'conversations.create',
+      'files.upload',
+      'users.info',
+    ],
+  },
+  github: {
+    name: 'GitHub',
+    icon: 'github',
+    methods: [
+      'pulls.get',
+      'pulls.list',
+      'pulls.create',
+      'pulls.createReview',
+      'pulls.listFiles',
+      'issues.get',
+      'issues.create',
+      'issues.createComment',
+      'repos.getContent',
+      'search.code',
+    ],
+  },
+  jira: {
+    name: 'Jira',
+    icon: 'jira',
+    methods: [
+      'issues.getIssue',
+      'issues.createIssue',
+      'issues.editIssue',
+      'issues.search',
+      'issues.addComment',
+      'issues.transition',
+    ],
+  },
+  gmail: {
+    name: 'Gmail',
+    icon: 'gmail',
+    methods: [
+      'messages.list',
+      'messages.get',
+      'messages.send',
+      'drafts.create',
+      'labels.list',
+    ],
+  },
+  outlook: {
+    name: 'Outlook',
+    icon: 'outlook',
+    methods: [
+      'messages.list',
+      'messages.get',
+      'messages.send',
+      'calendar.events.list',
+      'calendar.events.create',
+    ],
+  },
+  linear: {
+    name: 'Linear',
+    icon: 'linear',
+    methods: [
+      'issues.get',
+      'issues.create',
+      'issues.update',
+      'issues.search',
+      'projects.list',
+    ],
+  },
+  notion: {
+    name: 'Notion',
+    icon: 'notion',
+    methods: [
+      'pages.get',
+      'pages.create',
+      'pages.update',
+      'databases.query',
+      'search',
+    ],
+  },
+  discord: {
+    name: 'Discord',
+    icon: 'discord',
+    methods: [
+      'messages.send',
+      'messages.edit',
+      'messages.delete',
+      'channels.get',
+      'webhooks.execute',
+    ],
+  },
+  airtable: {
+    name: 'Airtable',
+    icon: 'airtable',
+    methods: [
+      'records.list',
+      'records.get',
+      'records.create',
+      'records.update',
+      'records.delete',
+    ],
+  },
+  confluence: {
+    name: 'Confluence',
+    icon: 'confluence',
+    methods: [
+      'pages.list',
+      'pages.get',
+      'pages.create',
+      'pages.update',
+      'search',
+    ],
+  },
+  http: {
+    name: 'HTTP',
+    icon: 'http',
+    methods: ['request', 'get', 'post', 'put', 'patch', 'delete'],
+  },
+  claude: {
+    name: 'Claude',
+    icon: 'claude',
+    methods: ['analyze', 'generate', 'summarize', 'chat'],
+  },
+  opencode: {
+    name: 'OpenCode',
+    icon: 'opencode',
+    methods: ['chat', 'complete', 'analyze'],
+  },
+  ollama: {
+    name: 'Ollama',
+    icon: 'ollama',
+    methods: ['generate', 'chat', 'embeddings'],
+  },
+} as const;
+
+// Default node positions
+export const NODE_LAYOUT = {
+  VERTICAL_SPACING: 120,
+  HORIZONTAL_OFFSET: 250,
+  GROUP_PADDING: 40,
+} as const;
+
+// Status colors
+export const STATUS_COLORS = {
+  pending: { bg: 'bg-gray-400/10', text: 'text-gray-400', border: 'border-gray-400' },
+  running: { bg: 'bg-warning/10', text: 'text-warning', border: 'border-warning' },
+  completed: { bg: 'bg-success/10', text: 'text-success', border: 'border-success' },
+  failed: { bg: 'bg-error/10', text: 'text-error', border: 'border-error' },
+  skipped: { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500' },
+  cancelled: { bg: 'bg-gray-500/10', text: 'text-gray-500', border: 'border-gray-500' },
+} as const;