@marktoflow/gui 2.0.0-alpha.1

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

@@ -0,0 +1,281 @@
+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

@@ -0,0 +1,209 @@
+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

@@ -0,0 +1,108 @@
+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>
+  );
+}