mcpgraph-ux 0.1.1 → 0.1.3

package/components/DebugControls.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import styles from './DebugControls.module.css';
+
+export type ExecutionStatus = 'not_started' | 'running' | 'paused' | 'finished' | 'error' | 'stopped';
+
+interface DebugControlsProps {
+  executionId: string | null;
+  status: ExecutionStatus;
+  currentNodeId: string | null;
+  onStatusChange?: (status: ExecutionStatus) => void;
+  onRun?: () => void;
+  onStepFromStart?: () => void;
+  onClear?: () => void;
+  disabled?: boolean;
+}
+
+export default function DebugControls({
+  executionId,
+  status,
+  currentNodeId,
+  onStatusChange,
+  onRun,
+  onStepFromStart,
+  onClear,
+  disabled,
+}: DebugControlsProps) {
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handlePause = async () => {
+    if (!executionId || status !== 'running') return;
+    
+    setIsProcessing(true);
+    try {
+      const response = await fetch('/api/execution/controller', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ executionId, action: 'pause' }),
+      });
+      
+      const data = await response.json();
+      if (data.error) {
+        console.error('Error pausing:', data.error);
+      }
+      // Don't set status here - onPause hook will send stateUpdate with actual state
+    } catch (error) {
+      console.error('Error pausing execution:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleResume = async () => {
+    if (!executionId || status !== 'paused') return;
+    
+    setIsProcessing(true);
+    try {
+      const response = await fetch('/api/execution/controller', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ executionId, action: 'resume' }),
+      });
+      
+      const data = await response.json();
+      if (data.error) {
+        console.error('Error resuming:', data.error);
+      }
+      // Don't set status here - hooks will tell us the actual state
+    } catch (error) {
+      console.error('Error resuming execution:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleStep = async () => {
+    if (!executionId || status !== 'paused') return;
+    
+    setIsProcessing(true);
+    try {
+      const response = await fetch('/api/execution/controller', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ executionId, action: 'step' }),
+      });
+      
+      const data = await response.json();
+      if (data.error) {
+        console.error('Error stepping:', data.error);
+      }
+      // Don't set status here - onPause hook will send stateUpdate with actual state after step
+    } catch (error) {
+      console.error('Error stepping execution:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleRun = () => {
+    if (onRun) {
+      onRun();
+    }
+  };
+
+  const handleStop = async () => {
+    if (!executionId || (status !== 'running' && status !== 'paused')) return;
+    
+    setIsProcessing(true);
+    try {
+      const response = await fetch('/api/execution/controller', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ executionId, action: 'stop' }),
+      });
+      
+      const data = await response.json();
+      if (data.error) {
+        console.error('Error stopping:', data.error);
+      }
+      // Don't set status here - executionStopped event will be sent and handled in ToolTester
+    } catch (error) {
+      console.error('Error stopping execution:', error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleClear = () => {
+    if (onClear) {
+      onClear();
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.controlsRow}>
+        <div className={styles.controls}>
+        <button
+          onClick={handleRun}
+          disabled={disabled || isProcessing || status === 'running' || status === 'paused'}
+          className={styles.button}
+          title="Run execution"
+        >
+          ▶ Run
+        </button>
+        <button
+          onClick={status === 'paused' ? handleStep : (onStepFromStart || handleRun)}
+          disabled={isProcessing || (status !== 'paused' && status !== 'not_started' && status !== 'finished' && status !== 'error' && status !== 'stopped') || (status === 'not_started' && disabled)}
+          className={styles.button}
+          title={status === 'paused' ? 'Step to next node' : 'Start execution and pause at first node'}
+        >
+          ⏭ Step
+        </button>
+        <button
+          onClick={handlePause}
+          disabled={isProcessing || status !== 'running'}
+          className={styles.button}
+          title="Pause execution"
+        >
+          ⏸ Pause
+        </button>
+        <button
+          onClick={handleResume}
+          disabled={isProcessing || status !== 'paused'}
+          className={styles.button}
+          title="Resume execution"
+        >
+          ▶ Resume
+        </button>
+        <button
+          onClick={handleStop}
+          disabled={isProcessing || (status !== 'running' && status !== 'paused')}
+          className={styles.button}
+          title="Stop/cancel execution"
+        >
+          ⏹ Stop
+        </button>
+        <button
+          onClick={handleClear}
+          disabled={isProcessing || (status !== 'finished' && status !== 'error' && status !== 'stopped')}
+          className={styles.button}
+          title="Clear execution history and reset state"
+        >
+          × Clear
+        </button>
+        </div>
+        
+        {(status === 'running' || status === 'paused' || status === 'finished' || status === 'error' || status === 'stopped') && (
+          <div className={styles.statusInfo}>
+            {currentNodeId && (
+              <>
+                <span className={styles.currentNode}>
+                  Current: <code>{currentNodeId}</code>
+                </span>
+                <span className={styles.separator}>•</span>
+              </>
+            )}
+            <span className={styles.statusLabel}>Status:</span>
+            <span className={`${styles.statusBadge} ${styles[status]}`}>
+              {status.toUpperCase()}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/components/ExecutionHistory.module.css

@@ -0,0 +1,268 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: white;
+  overflow: hidden;
+}
+
+
+.empty {
+  padding: 24px;
+  text-align: center;
+  color: #999;
+  font-style: italic;
+}
+
+.list {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.item {
+  border-bottom: 1px solid #e0e0e0;
+  transition: background-color 0.2s;
+}
+
+.item:hover {
+  background-color: #f9f9f9;
+}
+
+.item.error {
+  border-left: 4px solid #ef5350;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.nodeInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.nodeId {
+  font-weight: 600;
+  color: #333;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+}
+
+.nodeType {
+  font-size: 11px;
+  color: #666;
+  background: #e8e8e8;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+.errorBadge {
+  font-size: 10px;
+  color: white;
+  background: #ef5350;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.timing {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 12px;
+}
+
+.duration {
+  font-weight: 600;
+  color: #2196f3;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.time {
+  font-size: 11px;
+  color: #999;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.expandButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 10px;
+  color: #666;
+  padding: 4px 8px;
+  margin-left: 8px;
+}
+
+.expandButton:hover {
+  color: #333;
+}
+
+.details {
+  padding: 12px 16px;
+  background: #fafafa;
+  border-top: 1px solid #e0e0e0;
+}
+
+.errorSection {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: #ffebee;
+  border-radius: 4px;
+  border-left: 4px solid #ef5350;
+}
+
+.errorSection strong {
+  display: block;
+  margin-bottom: 8px;
+  color: #c62828;
+}
+
+.errorMessage {
+  margin: 0;
+  font-size: 12px;
+  color: #c62828;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.stackTrace {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #999;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.dataSection {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.dataItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dataItem strong {
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.jsonData {
+  margin: 0;
+  padding: 8px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.metadata {
+  display: flex;
+  gap: 16px;
+  font-size: 11px;
+  color: #666;
+  padding-top: 8px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.metadata div {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+/* Result item - styled to stand out at the bottom */
+.resultItem {
+  border-top: 3px solid #4caf50;
+  background: linear-gradient(to bottom, #f1f8f4 0%, #ffffff 100%);
+  margin-top: auto;
+}
+
+.resultHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 2px solid #4caf50;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.resultTitle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #2e7d32;
+}
+
+.resultIcon {
+  font-size: 18px;
+  color: #4caf50;
+  font-weight: bold;
+}
+
+.resultStats {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.statItem {
+  color: #666;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.statItem strong {
+  color: #333;
+  margin-right: 4px;
+}
+
+.errorStat {
+  color: #d32f2f;
+}
+
+.resultContent {
+  padding: 16px;
+  background: white;
+}
+
+.resultPre {
+  margin: 0;
+  padding: 12px;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #333;
+}
+

package/components/ExecutionHistory.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useState } from 'react';
+import styles from './ExecutionHistory.module.css';
+
+export interface NodeExecutionRecord {
+  nodeId: string;
+  nodeType: string;
+  startTime: number;
+  endTime?: number; // Optional for pending/running nodes
+  duration?: number; // Optional for pending/running nodes
+  input: unknown;
+  output?: unknown; // Optional for pending/running nodes
+  error?: Error;
+  executionIndex?: number; // For tracking specific node instances
+}
+
+interface ExecutionHistoryProps {
+  history: NodeExecutionRecord[];
+  onNodeClick?: (nodeId: string) => void;
+  result?: unknown;
+  telemetry?: {
+    totalDuration: number;
+    nodeCounts: Record<string, number>;
+    errorCount: number;
+  };
+}
+
+export default function ExecutionHistory({ history, onNodeClick, result, telemetry }: ExecutionHistoryProps) {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+
+  const toggleExpand = (nodeId: string) => {
+    const newExpanded = new Set(expandedNodes);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedNodes(newExpanded);
+  };
+
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3,
+    });
+  };
+
+  const formatDuration = (ms: number) => {
+    if (ms < 1) return `${(ms * 1000).toFixed(0)}μs`;
+    if (ms < 1000) return `${ms.toFixed(2)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  const formatJSON = (data: unknown) => {
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch {
+      return String(data);
+    }
+  };
+
+  if (history.length === 0 && !result) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.empty}>No execution history available</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.list}>
+        {history.map((record, index) => {
+          const isExpanded = expandedNodes.has(record.nodeId);
+          const hasError = !!record.error;
+          
+          return (
+            <div
+              key={`${record.nodeId}-${index}`}
+              className={`${styles.item} ${hasError ? styles.error : ''}`}
+            >
+              <div
+                className={styles.header}
+                onClick={() => {
+                  toggleExpand(record.nodeId);
+                  onNodeClick?.(record.nodeId);
+                }}
+              >
+                <div className={styles.nodeInfo}>
+                  <span className={styles.nodeId}>{record.nodeId}</span>
+                  <span className={styles.nodeType}>{record.nodeType}</span>
+                  {hasError && <span className={styles.errorBadge}>ERROR</span>}
+                </div>
+                <div className={styles.timing}>
+                  {record.duration !== undefined ? (
+                    <span className={styles.duration}>{formatDuration(record.duration)}</span>
+                  ) : (
+                    <span className={styles.duration} style={{ fontStyle: 'italic', color: '#666' }}>pending</span>
+                  )}
+                  <span className={styles.time}>{formatTime(record.startTime)}</span>
+                </div>
+                <button className={styles.expandButton}>
+                  {isExpanded ? '▼' : '▶'}
+                </button>
+              </div>
+              
+              {isExpanded && (
+                <div className={styles.details}>
+                  {hasError && (
+                    <div className={styles.errorSection}>
+                      <strong>Error:</strong>
+                      <pre className={styles.errorMessage}>
+                        {record.error?.message || 'Unknown error'}
+                        {record.error?.stack && (
+                          <div className={styles.stackTrace}>
+                            {record.error.stack}
+                          </div>
+                        )}
+                      </pre>
+                    </div>
+                  )}
+                  
+                  <div className={styles.dataSection}>
+                    <div className={styles.dataItem}>
+                      <strong>Input:</strong>
+                      <pre className={styles.jsonData}>{formatJSON(record.input)}</pre>
+                    </div>
+                    {!hasError && record.output !== undefined && (
+                      <div className={styles.dataItem}>
+                        <strong>Output:</strong>
+                        <pre className={styles.jsonData}>{formatJSON(record.output)}</pre>
+                      </div>
+                    )}
+                    {!hasError && record.output === undefined && (
+                      <div className={styles.dataItem}>
+                        <strong>Output:</strong>
+                        <div style={{ fontStyle: 'italic', color: '#666' }}>Pending execution</div>
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className={styles.metadata}>
+                    <div>Start: {formatTime(record.startTime)}</div>
+                    {record.endTime !== undefined && (
+                      <div>End: {formatTime(record.endTime)}</div>
+                    )}
+                    {record.duration !== undefined && (
+                      <div>Duration: {formatDuration(record.duration)}</div>
+                    )}
+                    {(record.endTime === undefined || record.duration === undefined) && (
+                      <div style={{ fontStyle: 'italic', color: '#666' }}>Status: Pending</div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      
+      {/* Result display at the bottom - always expanded and styled to stand out */}
+      {result !== null && result !== undefined && (
+        <div className={styles.resultItem}>
+          <div className={styles.resultHeader}>
+            <div className={styles.resultTitle}>
+              <span className={styles.resultIcon}>✓</span>
+              <strong>Final Result</strong>
+            </div>
+            {telemetry && (
+              <div className={styles.resultStats}>
+                <span className={styles.statItem}>
+                  <strong>Elapsed:</strong> {formatDuration(telemetry.totalDuration)}
+                </span>
+                <span className={styles.statItem}>
+                  <strong>Nodes:</strong> {Object.values(telemetry.nodeCounts).reduce((sum, count) => sum + count, 0)}
+                </span>
+                {telemetry.errorCount > 0 && (
+                  <span className={`${styles.statItem} ${styles.errorStat}`}>
+                    <strong>Errors:</strong> {telemetry.errorCount}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+          <div className={styles.resultContent}>
+            <pre className={styles.resultPre}>{formatJSON(result)}</pre>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/GraphVisualization.module.css

@@ -4,3 +4,14 @@
   flex: 1;
 }
 
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+}
+