@marktoflow/gui 2.0.0-alpha.3 → 2.0.0-alpha.5

package/src/client/components/Settings/ProviderSwitcher.tsx

@@ -0,0 +1,228 @@
+/**
+ * Provider Switcher Component
+ * Allows users to switch between AI providers and configure them
+ */
+
+import { useEffect, useState } from 'react';
+import { useAgentStore } from '../../stores/agentStore';
+import { Modal, ModalFooter } from '../common/Modal';
+import { Button } from '../common/Button';
+import { Check, Settings, AlertCircle, Loader2 } from 'lucide-react';
+
+interface ProviderSwitcherProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ProviderSwitcher({ open, onOpenChange }: ProviderSwitcherProps) {
+  const { providers, activeProviderId, isLoading, error, loadProviders, setProvider } = useAgentStore();
+  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
+  const [showConfig, setShowConfig] = useState(false);
+  const [configData, setConfigData] = useState({
+    apiKey: '',
+    baseUrl: '',
+    model: '',
+  });
+
+  useEffect(() => {
+    if (open) {
+      loadProviders();
+    }
+  }, [open, loadProviders]);
+
+  const handleProviderClick = async (providerId: string) => {
+    const provider = providers.find((p) => p.id === providerId);
+    if (!provider) return;
+
+    if (provider.status === 'needs_config') {
+      // Show config modal
+      setSelectedProviderId(providerId);
+      setShowConfig(true);
+    } else if (provider.status === 'ready') {
+      // Switch provider directly
+      const success = await setProvider(providerId);
+      if (success) {
+        onOpenChange(false);
+      }
+    }
+  };
+
+  const handleConfigSave = async () => {
+    if (!selectedProviderId) return;
+
+    const success = await setProvider(selectedProviderId, configData);
+    if (success) {
+      setShowConfig(false);
+      setConfigData({ apiKey: '', baseUrl: '', model: '' });
+      onOpenChange(false);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'ready':
+        return <div className="w-2 h-2 rounded-full bg-green-500" />;
+      case 'needs_config':
+        return <div className="w-2 h-2 rounded-full bg-yellow-500" />;
+      case 'unavailable':
+        return <div className="w-2 h-2 rounded-full bg-red-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const getStatusLabel = (status: string) => {
+    switch (status) {
+      case 'ready':
+        return 'Ready';
+      case 'needs_config':
+        return 'Needs Configuration';
+      case 'unavailable':
+        return 'Unavailable';
+      default:
+        return 'Unknown';
+    }
+  };
+
+  if (showConfig) {
+    const provider = providers.find((p) => p.id === selectedProviderId);
+    if (!provider) return null;
+
+    return (
+      <Modal
+        open={showConfig}
+        onOpenChange={setShowConfig}
+        title={`Configure ${provider.name}`}
+        description="Enter configuration details for this provider"
+        size="md"
+      >
+        <div className="p-4 space-y-4">
+          {provider.configOptions?.apiKey && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                API Key
+              </label>
+              <input
+                type="password"
+                value={configData.apiKey}
+                onChange={(e) => setConfigData({ ...configData, apiKey: e.target.value })}
+                className="w-full px-3 py-2 bg-node-bg border border-node-border rounded text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Enter API key"
+              />
+            </div>
+          )}
+
+          {provider.configOptions?.baseUrl && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Base URL
+              </label>
+              <input
+                type="text"
+                value={configData.baseUrl}
+                onChange={(e) => setConfigData({ ...configData, baseUrl: e.target.value })}
+                className="w-full px-3 py-2 bg-node-bg border border-node-border rounded text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Enter base URL"
+              />
+            </div>
+          )}
+
+          {provider.configOptions?.model && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Model
+              </label>
+              <input
+                type="text"
+                value={configData.model}
+                onChange={(e) => setConfigData({ ...configData, model: e.target.value })}
+                className="w-full px-3 py-2 bg-node-bg border border-node-border rounded text-gray-300 focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Enter model name"
+              />
+            </div>
+          )}
+        </div>
+
+        <ModalFooter>
+          <Button variant="secondary" onClick={() => setShowConfig(false)}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleConfigSave} disabled={isLoading}>
+            {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Save & Activate'}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title="AI Provider"
+      description="Select which AI provider to use for agent prompts"
+      size="md"
+    >
+      <div className="p-4 space-y-2">
+        {error && (
+          <div className="flex items-center gap-2 p-3 bg-error/10 border border-error/30 rounded text-error text-sm">
+            <AlertCircle className="w-4 h-4 flex-shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {isLoading && providers.length === 0 ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="w-6 h-6 animate-spin text-gray-500" />
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {providers.map((provider) => (
+              <button
+                key={provider.id}
+                onClick={() => handleProviderClick(provider.id)}
+                disabled={provider.status === 'unavailable'}
+                className={`
+                  w-full flex items-center justify-between p-3 rounded border transition-all
+                  ${provider.isActive
+                    ? 'bg-primary/10 border-primary text-white'
+                    : 'bg-node-bg border-node-border text-gray-300 hover:bg-white/5'
+                  }
+                  ${provider.status === 'unavailable' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+                `}
+              >
+                <div className="flex items-center gap-3">
+                  {getStatusIcon(provider.status)}
+                  <div className="text-left">
+                    <div className="font-medium">{provider.name}</div>
+                    {provider.description && (
+                      <div className="text-xs text-gray-500 mt-0.5">{provider.description}</div>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  {provider.isActive && (
+                    <Check className="w-4 h-4 text-primary" />
+                  )}
+                  {provider.status === 'needs_config' && (
+                    <Settings className="w-4 h-4 text-yellow-500" />
+                  )}
+                  <span className="text-xs text-gray-500">
+                    {getStatusLabel(provider.status)}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <ModalFooter>
+        <Button variant="secondary" onClick={() => onOpenChange(false)}>
+          Close
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}

package/src/client/components/Sidebar/ImportDialog.tsx

@@ -0,0 +1,257 @@
+/**
+ * Import Dialog Component
+ * Allows users to import workflow files (.md, .yaml, .yml, .zip)
+ */
+
+import { useState, useRef } from 'react';
+import { Modal, ModalFooter } from '../common/Modal';
+import { Button } from '../common/Button';
+import { Upload, FileText, Archive, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+
+interface ImportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImportComplete?: () => void;
+}
+
+interface ImportResult {
+  success: boolean;
+  filename: string;
+  message?: string;
+}
+
+export function ImportDialog({ open, onOpenChange, onImportComplete }: ImportDialogProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [results, setResults] = useState<ImportResult[]>([]);
+  const [dragActive, setDragActive] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+      setResults([]);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(false);
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragActive(false);
+
+    const file = event.dataTransfer.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+      setResults([]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) return;
+
+    setIsUploading(true);
+    setResults([]);
+
+    try {
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+
+      const response = await fetch('/api/workflows/import', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Upload failed');
+      }
+
+      const data = await response.json();
+
+      // Handle results
+      if (Array.isArray(data.results)) {
+        setResults(data.results);
+      } else if (data.success) {
+        setResults([{
+          success: true,
+          filename: data.filename || selectedFile.name,
+          message: data.message,
+        }]);
+      }
+
+      // Call completion callback after a delay
+      setTimeout(() => {
+        if (onImportComplete) {
+          onImportComplete();
+        }
+      }, 1500);
+    } catch (error) {
+      setResults([{
+        success: false,
+        filename: selectedFile.name,
+        message: error instanceof Error ? error.message : 'Unknown error',
+      }]);
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedFile(null);
+    setResults([]);
+    onOpenChange(false);
+  };
+
+  const isValidFile = (file: File | null): boolean => {
+    if (!file) return false;
+    const validExtensions = ['.md', '.yaml', '.yml', '.zip'];
+    return validExtensions.some(ext => file.name.toLowerCase().endsWith(ext));
+  };
+
+  const getFileIcon = (filename: string) => {
+    if (filename.endsWith('.zip')) {
+      return <Archive className="w-5 h-5 text-purple-400" />;
+    }
+    return <FileText className="w-5 h-5 text-blue-400" />;
+  };
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Import Workflow"
+      description="Upload workflow files from your computer"
+      size="md"
+    >
+      <div className="p-4 space-y-4">
+        {/* File Upload Area */}
+        {!selectedFile && results.length === 0 && (
+          <div
+            onClick={() => fileInputRef.current?.click()}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={`
+              border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors
+              ${dragActive
+                ? 'border-primary bg-primary/10'
+                : 'border-node-border hover:border-primary/50 hover:bg-white/5'
+              }
+            `}
+          >
+            <Upload className="w-12 h-12 mx-auto mb-4 text-gray-500" />
+            <p className="text-sm text-gray-300 mb-2">
+              Drag and drop a file here, or click to browse
+            </p>
+            <p className="text-xs text-gray-500">
+              Supported formats: .md, .yaml, .yml, .zip
+            </p>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".md,.yaml,.yml,.zip"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+          </div>
+        )}
+
+        {/* Selected File */}
+        {selectedFile && results.length === 0 && (
+          <div className="border border-node-border rounded-lg p-4">
+            <div className="flex items-center gap-3">
+              {getFileIcon(selectedFile.name)}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-white truncate">
+                  {selectedFile.name}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {(selectedFile.size / 1024).toFixed(2)} KB
+                </p>
+              </div>
+              {!isValidFile(selectedFile) && (
+                <AlertCircle className="w-5 h-5 text-error flex-shrink-0" />
+              )}
+            </div>
+
+            {!isValidFile(selectedFile) && (
+              <p className="text-xs text-error mt-2">
+                Invalid file type. Please select a .md, .yaml, .yml, or .zip file.
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* Upload Results */}
+        {results.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-medium text-white">Import Results:</h4>
+            {results.map((result, index) => (
+              <div
+                key={index}
+                className={`
+                  flex items-start gap-3 p-3 rounded-lg border
+                  ${result.success
+                    ? 'border-success/30 bg-success/10'
+                    : 'border-error/30 bg-error/10'
+                  }
+                `}
+              >
+                {result.success ? (
+                  <CheckCircle className="w-5 h-5 text-success flex-shrink-0 mt-0.5" />
+                ) : (
+                  <XCircle className="w-5 h-5 text-error flex-shrink-0 mt-0.5" />
+                )}
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-white truncate">
+                    {result.filename}
+                  </p>
+                  {result.message && (
+                    <p className="text-xs text-gray-400 mt-1">
+                      {result.message}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <ModalFooter>
+        {results.length > 0 ? (
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
+        ) : (
+          <>
+            <Button variant="secondary" onClick={handleClose} disabled={isUploading}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleUpload}
+              disabled={!selectedFile || !isValidFile(selectedFile) || isUploading}
+            >
+              {isUploading ? 'Uploading...' : 'Import'}
+            </Button>
+          </>
+        )}
+      </ModalFooter>
+    </Modal>
+  );
+}

package/src/client/components/Sidebar/Sidebar.tsx

@@ -8,10 +8,12 @@ import {
   Search,
   Loader2,
   X,
+  Upload,
 } from 'lucide-react';
 import { useWorkflowStore } from '../../stores/workflowStore';
 import { useNavigationStore } from '../../stores/navigationStore';
 import { useLayoutStore } from '../../stores/layoutStore';
+import { ImportDialog } from './ImportDialog';
 
 export function Sidebar() {
   const [activeTab, setActiveTab] = useState<'workflows' | 'tools'>(
@@ -110,6 +112,9 @@ function SidebarContent({
   onClose,
   showClose,
 }: SidebarContentProps) {
+  const [showImportDialog, setShowImportDialog] = useState(false);
+  const { fetchWorkflows } = useWorkflowStore();
+
   return (
     <>
       {/* Logo/Title */}
@@ -178,15 +183,29 @@ function SidebarContent({
         )}
       </div>
 
-      {/* New workflow button */}
+      {/* New workflow and Import buttons */}
       {activeTab === 'workflows' && (
-        <div className="p-3 border-t border-node-border">
+        <div className="p-3 border-t border-node-border space-y-2">
           <button className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg text-sm font-medium transition-colors">
             <Plus className="w-4 h-4" />
             New Workflow
           </button>
+          <button
+            onClick={() => setShowImportDialog(true)}
+            className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-node-bg border border-node-border hover:bg-white/5 text-gray-300 rounded-lg text-sm font-medium transition-colors"
+          >
+            <Upload className="w-4 h-4" />
+            Import
+          </button>
         </div>
       )}
+
+      {/* Import Dialog */}
+      <ImportDialog
+        open={showImportDialog}
+        onOpenChange={setShowImportDialog}
+        onImportComplete={() => fetchWorkflows()}
+      />
     </>
   );
 }

package/src/client/components/common/KeyboardShortcuts.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Modal, ModalFooter } from './Modal';
 import { Button } from './Button';
 import { Keyboard } from 'lucide-react';
+import { getModKey } from '../../utils/platform';
 
 interface Shortcut {
   keys: string[];
@@ -55,6 +56,9 @@ export function KeyboardShortcuts({ open, onOpenChange }: KeyboardShortcutsProps
   // Group shortcuts by category
   const categories = [...new Set(shortcuts.map((s) => s.category))];
 
+  // Get platform-specific modifier key
+  const modKey = getModKey();
+
   return (
     <Modal
       open={open}
@@ -84,7 +88,7 @@ export function KeyboardShortcuts({ open, onOpenChange }: KeyboardShortcutsProps
                           key={i}
                           className="px-2 py-1 bg-node-bg border border-node-border rounded text-xs font-mono text-gray-300"
                         >
-                          {key}
+                          {key === '⌘' ? modKey : key}
                         </kbd>
                       ))}
                     </div>
@@ -130,11 +134,13 @@ export function useKeyboardShortcuts() {
 
 // Small button to show keyboard shortcuts
 export function KeyboardShortcutsButton({ onClick }: { onClick: () => void }) {
+  const modKey = getModKey();
+
   return (
     <button
       onClick={onClick}
       className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
-      title="Keyboard shortcuts (⌘/)"
+      title={`Keyboard shortcuts (${modKey}/)`}
     >
       <Keyboard className="w-3.5 h-3.5" />
       <span className="hidden sm:inline">Shortcuts</span>

package/src/client/stores/agentStore.ts

@@ -0,0 +1,109 @@
+/**
+ * Agent/AI Provider Store
+ * Manages available AI providers and active provider selection
+ */
+
+import { create } from 'zustand';
+
+export interface Provider {
+  id: string;
+  name: string;
+  status: 'ready' | 'needs_config' | 'unavailable';
+  isActive: boolean;
+  description?: string;
+  configOptions?: {
+    apiKey?: boolean;
+    baseUrl?: boolean;
+    model?: boolean;
+  };
+}
+
+export interface AgentStatus {
+  activeProvider: string | null;
+  providers: Provider[];
+}
+
+interface AgentState {
+  providers: Provider[];
+  activeProviderId: string | null;
+  isLoading: boolean;
+  error: string | null;
+
+  // Actions
+  loadProviders: () => Promise<void>;
+  setProvider: (id: string, config?: { apiKey?: string; baseUrl?: string; model?: string }) => Promise<boolean>;
+  refreshStatus: () => Promise<void>;
+}
+
+export const useAgentStore = create<AgentState>((set, get) => ({
+  providers: [],
+  activeProviderId: null,
+  isLoading: false,
+  error: null,
+
+  loadProviders: async () => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await fetch('/api/ai/providers');
+      if (!response.ok) {
+        throw new Error('Failed to load providers');
+      }
+
+      const status: AgentStatus = await response.json();
+
+      set({
+        providers: status.providers,
+        activeProviderId: status.activeProvider,
+        isLoading: false,
+      });
+    } catch (error) {
+      console.error('Error loading providers:', error);
+      set({
+        error: error instanceof Error ? error.message : 'Unknown error',
+        isLoading: false,
+      });
+    }
+  },
+
+  setProvider: async (id, config) => {
+    set({ isLoading: true, error: null });
+    try {
+      const response = await fetch(`/api/ai/providers/${id}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(config || {}),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to set provider');
+      }
+
+      const result = await response.json();
+
+      if (result.success && result.status) {
+        set({
+          providers: result.status.providers,
+          activeProviderId: result.status.activeProvider,
+          isLoading: false,
+        });
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.error('Error setting provider:', error);
+      set({
+        error: error instanceof Error ? error.message : 'Unknown error',
+        isLoading: false,
+      });
+      return false;
+    }
+  },
+
+  refreshStatus: async () => {
+    await get().loadProviders();
+  },
+}));