@marktoflow/gui 2.0.0-alpha.1 → 2.0.0-alpha.13

package/src/client/components/Prompt/ChangePreview.tsx

@@ -1,281 +0,0 @@
-import { useState } from 'react';
-import { Modal, ModalFooter } from '../common/Modal';
-import { Button } from '../common/Button';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '../common/Tabs';
-import Editor from '@monaco-editor/react';
-import { stringify } from 'yaml';
-import { Check, X, Eye, Code, GitCompare } from 'lucide-react';
-import type { Workflow } from '@shared/types';
-
-interface ChangePreviewProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  originalWorkflow: Workflow | null;
-  modifiedWorkflow: Workflow | null;
-  explanation: string;
-  onAccept: () => void;
-  onReject: () => void;
-}
-
-export function ChangePreview({
-  open,
-  onOpenChange,
-  originalWorkflow,
-  modifiedWorkflow,
-  explanation,
-  onAccept,
-  onReject,
-}: ChangePreviewProps) {
-  const [activeTab, setActiveTab] = useState('explanation');
-
-  const originalYaml = originalWorkflow
-    ? stringify(originalWorkflow, { indent: 2 })
-    : '';
-  const modifiedYaml = modifiedWorkflow
-    ? stringify(modifiedWorkflow, { indent: 2 })
-    : '';
-
-  const handleAccept = () => {
-    onAccept();
-    onOpenChange(false);
-  };
-
-  const handleReject = () => {
-    onReject();
-    onOpenChange(false);
-  };
-
-  return (
-    <Modal
-      open={open}
-      onOpenChange={onOpenChange}
-      title="Review Changes"
-      description="The AI has suggested the following changes to your workflow"
-      size="xl"
-    >
-      <Tabs value={activeTab} onValueChange={setActiveTab}>
-        <TabsList>
-          <TabsTrigger value="explanation">
-            <Eye className="w-4 h-4 mr-1.5" />
-            Explanation
-          </TabsTrigger>
-          <TabsTrigger value="diff">
-            <GitCompare className="w-4 h-4 mr-1.5" />
-            Side by Side
-          </TabsTrigger>
-          <TabsTrigger value="modified">
-            <Code className="w-4 h-4 mr-1.5" />
-            Modified YAML
-          </TabsTrigger>
-        </TabsList>
-
-        <div className="p-4">
-          <TabsContent value="explanation">
-            <div className="prose prose-invert max-w-none">
-              <div className="p-4 bg-node-bg rounded-lg border border-node-border">
-                <p className="text-gray-300 whitespace-pre-wrap">{explanation}</p>
-              </div>
-
-              {modifiedWorkflow && (
-                <div className="mt-4">
-                  <h4 className="text-sm font-medium text-gray-400 mb-2">
-                    Changes Summary
-                  </h4>
-                  <ul className="space-y-2">
-                    {getChangesSummary(originalWorkflow, modifiedWorkflow).map(
-                      (change, index) => (
-                        <li
-                          key={index}
-                          className={`flex items-start gap-2 text-sm ${
-                            change.type === 'added'
-                              ? 'text-success'
-                              : change.type === 'removed'
-                                ? 'text-error'
-                                : 'text-warning'
-                          }`}
-                        >
-                          <span className="flex-shrink-0">
-                            {change.type === 'added'
-                              ? '+'
-                              : change.type === 'removed'
-                                ? '-'
-                                : '~'}
-                          </span>
-                          <span>{change.description}</span>
-                        </li>
-                      )
-                    )}
-                  </ul>
-                </div>
-              )}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="diff">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <h4 className="text-sm font-medium text-gray-400 mb-2">
-                  Original
-                </h4>
-                <div className="border border-node-border rounded-lg overflow-hidden">
-                  <Editor
-                    height="400px"
-                    language="yaml"
-                    value={originalYaml}
-                    theme="vs-dark"
-                    options={{
-                      readOnly: true,
-                      minimap: { enabled: false },
-                      fontSize: 12,
-                      lineNumbers: 'on',
-                      scrollBeyondLastLine: false,
-                    }}
-                  />
-                </div>
-              </div>
-              <div>
-                <h4 className="text-sm font-medium text-gray-400 mb-2">
-                  Modified
-                </h4>
-                <div className="border border-node-border rounded-lg overflow-hidden">
-                  <Editor
-                    height="400px"
-                    language="yaml"
-                    value={modifiedYaml}
-                    theme="vs-dark"
-                    options={{
-                      readOnly: true,
-                      minimap: { enabled: false },
-                      fontSize: 12,
-                      lineNumbers: 'on',
-                      scrollBeyondLastLine: false,
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="modified">
-            <div className="border border-node-border rounded-lg overflow-hidden">
-              <Editor
-                height="500px"
-                language="yaml"
-                value={modifiedYaml}
-                theme="vs-dark"
-                options={{
-                  readOnly: true,
-                  minimap: { enabled: false },
-                  fontSize: 13,
-                  fontFamily: 'JetBrains Mono, Consolas, monospace',
-                  lineNumbers: 'on',
-                  scrollBeyondLastLine: false,
-                }}
-              />
-            </div>
-          </TabsContent>
-        </div>
-      </Tabs>
-
-      <ModalFooter>
-        <Button
-          variant="secondary"
-          onClick={handleReject}
-          icon={<X className="w-4 h-4" />}
-        >
-          Reject
-        </Button>
-        <Button onClick={handleAccept} icon={<Check className="w-4 h-4" />}>
-          Accept Changes
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-}
-
-interface Change {
-  type: 'added' | 'removed' | 'modified';
-  description: string;
-}
-
-function getChangesSummary(
-  original: Workflow | null,
-  modified: Workflow | null
-): Change[] {
-  const changes: Change[] = [];
-
-  if (!original || !modified) return changes;
-
-  // Check steps
-  const originalStepIds = new Set(original.steps.map((s) => s.id));
-  const modifiedStepIds = new Set(modified.steps.map((s) => s.id));
-
-  // Added steps
-  for (const step of modified.steps) {
-    if (!originalStepIds.has(step.id)) {
-      changes.push({
-        type: 'added',
-        description: `Added step "${step.name || step.id}"`,
-      });
-    }
-  }
-
-  // Removed steps
-  for (const step of original.steps) {
-    if (!modifiedStepIds.has(step.id)) {
-      changes.push({
-        type: 'removed',
-        description: `Removed step "${step.name || step.id}"`,
-      });
-    }
-  }
-
-  // Modified steps
-  for (const modStep of modified.steps) {
-    if (originalStepIds.has(modStep.id)) {
-      const origStep = original.steps.find((s) => s.id === modStep.id);
-      if (origStep) {
-        // Check for modifications
-        if (JSON.stringify(origStep) !== JSON.stringify(modStep)) {
-          const modifications: string[] = [];
-
-          if (origStep.action !== modStep.action) {
-            modifications.push('action');
-          }
-          if (JSON.stringify(origStep.inputs) !== JSON.stringify(modStep.inputs)) {
-            modifications.push('inputs');
-          }
-          if (
-            JSON.stringify(origStep.errorHandling) !==
-            JSON.stringify(modStep.errorHandling)
-          ) {
-            modifications.push('error handling');
-          }
-          if (
-            JSON.stringify(origStep.conditions) !==
-            JSON.stringify(modStep.conditions)
-          ) {
-            modifications.push('conditions');
-          }
-
-          if (modifications.length > 0) {
-            changes.push({
-              type: 'modified',
-              description: `Modified "${modStep.name || modStep.id}": ${modifications.join(', ')}`,
-            });
-          }
-        }
-      }
-    }
-  }
-
-  // Check metadata changes
-  if (original.metadata.name !== modified.metadata.name) {
-    changes.push({
-      type: 'modified',
-      description: `Renamed workflow to "${modified.metadata.name}"`,
-    });
-  }
-
-  return changes;
-}

package/src/client/components/Prompt/PromptHistoryPanel.tsx

@@ -1,209 +0,0 @@
-import { useState } from 'react';
-import {
-  History,
-  ChevronDown,
-  ChevronUp,
-  CheckCircle,
-  XCircle,
-  RefreshCw,
-  Trash2,
-  Clock,
-  Copy,
-  Check,
-  X,
-} from 'lucide-react';
-import { usePromptStore, type PromptHistoryItem } from '../../stores/promptStore';
-import { Button } from '../common/Button';
-
-interface PromptHistoryPanelProps {
-  onSelectPrompt?: (prompt: string) => void;
-}
-
-export function PromptHistoryPanel({ onSelectPrompt }: PromptHistoryPanelProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<PromptHistoryItem | null>(null);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-
-  const { history, clearHistory, sendPrompt, isProcessing } = usePromptStore();
-
-  const handleRerun = async (prompt: string) => {
-    if (isProcessing) return;
-    await sendPrompt(prompt);
-  };
-
-  const handleCopy = async (text: string, id: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopiedId(id);
-      setTimeout(() => setCopiedId(null), 2000);
-    } catch (error) {
-      console.error('Failed to copy:', error);
-    }
-  };
-
-  const formatTime = (date: Date) => {
-    const now = new Date();
-    const diff = now.getTime() - new Date(date).getTime();
-
-    if (diff < 60000) return 'Just now';
-    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-    return new Date(date).toLocaleDateString();
-  };
-
-  if (history.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="border-t border-node-border">
-      {/* Header - always visible */}
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between px-4 py-2 bg-panel-bg hover:bg-white/5 transition-colors"
-      >
-        <div className="flex items-center gap-2">
-          <History className="w-4 h-4 text-gray-400" />
-          <span className="text-sm text-gray-300">Prompt History</span>
-          <span className="text-xs text-gray-500">({history.length})</span>
-        </div>
-        {isExpanded ? (
-          <ChevronDown className="w-4 h-4 text-gray-400" />
-        ) : (
-          <ChevronUp className="w-4 h-4 text-gray-400" />
-        )}
-      </button>
-
-      {/* Expanded content */}
-      {isExpanded && (
-        <div className="bg-panel-bg">
-          {/* Action bar */}
-          <div className="flex items-center justify-between px-4 py-2 border-b border-node-border">
-            <span className="text-xs text-gray-500">
-              {history.filter((h) => h.success).length} successful,{' '}
-              {history.filter((h) => !h.success).length} failed
-            </span>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={clearHistory}
-              icon={<Trash2 className="w-3 h-3" />}
-            >
-              Clear
-            </Button>
-          </div>
-
-          {/* History list */}
-          <div className="max-h-64 overflow-y-auto">
-            {history.map((item, index) => {
-              const itemId = `${index}-${item.timestamp}`;
-              const isSelected = selectedItem === item;
-
-              return (
-                <div
-                  key={itemId}
-                  className="border-b border-node-border last:border-b-0"
-                >
-                  {/* Item header */}
-                  <div
-                    className={`flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors ${
-                      isSelected ? 'bg-primary/10' : 'hover:bg-white/5'
-                    }`}
-                    onClick={() => setSelectedItem(isSelected ? null : item)}
-                  >
-                    {/* Status icon */}
-                    {item.success ? (
-                      <CheckCircle className="w-4 h-4 text-success flex-shrink-0 mt-0.5" />
-                    ) : (
-                      <XCircle className="w-4 h-4 text-error flex-shrink-0 mt-0.5" />
-                    )}
-
-                    {/* Content */}
-                    <div className="flex-1 min-w-0">
-                      <div className="text-sm text-gray-300 line-clamp-2">
-                        {item.prompt}
-                      </div>
-                      <div className="flex items-center gap-2 mt-1">
-                        <Clock className="w-3 h-3 text-gray-500" />
-                        <span className="text-xs text-gray-500">
-                          {formatTime(item.timestamp)}
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center gap-1 flex-shrink-0">
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleCopy(item.prompt, itemId);
-                        }}
-                        className="p-1.5 hover:bg-white/10 rounded transition-colors"
-                        title="Copy prompt"
-                      >
-                        {copiedId === itemId ? (
-                          <Check className="w-3.5 h-3.5 text-success" />
-                        ) : (
-                          <Copy className="w-3.5 h-3.5 text-gray-400" />
-                        )}
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleRerun(item.prompt);
-                        }}
-                        disabled={isProcessing}
-                        className="p-1.5 hover:bg-white/10 rounded transition-colors disabled:opacity-50"
-                        title="Re-run prompt"
-                      >
-                        <RefreshCw className={`w-3.5 h-3.5 text-gray-400 ${isProcessing ? 'animate-spin' : ''}`} />
-                      </button>
-                      {onSelectPrompt && (
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            onSelectPrompt(item.prompt);
-                          }}
-                          className="p-1.5 hover:bg-white/10 rounded transition-colors"
-                          title="Edit prompt"
-                        >
-                          <span className="text-xs text-gray-400">Edit</span>
-                        </button>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Expanded details */}
-                  {isSelected && (
-                    <div className="px-4 pb-3 pl-11">
-                      <div className="bg-node-bg rounded-lg p-3">
-                        <div className="flex items-center justify-between mb-2">
-                          <span className="text-xs font-medium text-gray-500 uppercase">
-                            Response
-                          </span>
-                          <button
-                            onClick={() => handleCopy(item.response, `${itemId}-response`)}
-                            className="p-1 hover:bg-white/10 rounded transition-colors"
-                          >
-                            {copiedId === `${itemId}-response` ? (
-                              <Check className="w-3 h-3 text-success" />
-                            ) : (
-                              <Copy className="w-3 h-3 text-gray-400" />
-                            )}
-                          </button>
-                        </div>
-                        <div className={`text-xs font-mono ${item.success ? 'text-gray-300' : 'text-error'}`}>
-                          {item.response || 'No response'}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/client/components/Prompt/PromptInput.tsx

@@ -1,108 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-import { Send, Loader2, Sparkles } from 'lucide-react';
-import { usePromptStore } from '../../stores/promptStore';
-import { PromptHistoryPanel } from './PromptHistoryPanel';
-
-export function PromptInput() {
-  const [prompt, setPrompt] = useState('');
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  const { isProcessing, history, sendPrompt } = usePromptStore();
-
-  // Auto-resize textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 200)}px`;
-    }
-  }, [prompt]);
-
-  const handleSubmit = async () => {
-    if (!prompt.trim() || isProcessing) return;
-
-    await sendPrompt(prompt);
-    setPrompt('');
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      handleSubmit();
-    }
-    if (e.key === 'ArrowUp' && !prompt && history.length > 0) {
-      setPrompt(history[0].prompt);
-    }
-  };
-
-  const suggestions = [
-    'Add a Slack notification step',
-    'Add error handling with 3 retries',
-    'Convert to a sub-workflow',
-    'Add a condition to skip if draft',
-  ];
-
-  return (
-    <div className="bg-panel-bg">
-      {/* History Panel */}
-      <PromptHistoryPanel onSelectPrompt={setPrompt} />
-
-      {/* Suggestions */}
-      {!prompt && !isProcessing && (
-        <div className="px-4 py-2 border-t border-node-border/50">
-          <div className="flex items-center gap-2 overflow-x-auto pb-1">
-            <Sparkles className="w-4 h-4 text-primary flex-shrink-0" />
-            {suggestions.map((suggestion) => (
-              <button
-                key={suggestion}
-                onClick={() => setPrompt(suggestion)}
-                className="px-3 py-1 bg-node-bg border border-node-border rounded-full text-xs text-gray-300 hover:border-primary hover:text-primary transition-colors whitespace-nowrap"
-              >
-                {suggestion}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Input area */}
-      <div className="p-4 flex items-end gap-3 border-t border-node-border">
-        <div className="flex-1 relative">
-          <textarea
-            ref={textareaRef}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Describe the changes you want to make to the workflow..."
-            disabled={isProcessing}
-            rows={1}
-            className="w-full px-4 py-3 bg-node-bg border border-node-border rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary resize-none disabled:opacity-50"
-          />
-          {isProcessing && (
-            <div className="absolute right-3 top-1/2 -translate-y-1/2">
-              <Loader2 className="w-5 h-5 text-primary animate-spin" />
-            </div>
-          )}
-        </div>
-
-        <button
-          onClick={handleSubmit}
-          disabled={!prompt.trim() || isProcessing}
-          className="w-10 h-10 rounded-lg bg-primary hover:bg-primary-dark disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center transition-colors"
-        >
-          <Send className="w-5 h-5 text-white" />
-        </button>
-      </div>
-
-      {/* Keyboard hint */}
-      <div className="px-4 pb-2 text-xs text-gray-500">
-        Press <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">⌘</kbd> +{' '}
-        <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">Enter</kbd> to send
-        {history.length > 0 && (
-          <span className="ml-4">
-            <kbd className="px-1.5 py-0.5 bg-node-bg rounded text-gray-400">↑</kbd> for last prompt
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}