mcpgraph-ux 0.1.2 → 0.1.4

package/components/DebugControls.module.css

@@ -0,0 +1,124 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  background: #f5f5f5;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+.controlsRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.statusInfo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  margin-left: auto;
+}
+
+.statusLabel {
+  font-weight: 600;
+  color: #666;
+}
+
+.statusBadge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.statusBadge.not_started {
+  background: #e0e0e0;
+  color: #666;
+}
+
+.statusBadge.running {
+  background: #e3f2fd;
+  color: #1976d2;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.statusBadge.paused {
+  background: #fff3e0;
+  color: #f57c00;
+}
+
+.statusBadge.finished {
+  background: #e8f5e9;
+  color: #2e7d32;
+}
+
+.statusBadge.error {
+  background: #ffebee;
+  color: #c62828;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+.separator {
+  color: #999;
+}
+
+.currentNode {
+  color: #666;
+  font-size: 12px;
+}
+
+.currentNode code {
+  background: #fff;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 11px;
+  color: #333;
+  border: 1px solid #ddd;
+}
+
+.controls {
+  display: flex;
+  gap: 8px;
+}
+
+.button {
+  padding: 8px 16px;
+  background: #2196f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.button:hover:not(:disabled) {
+  background: #1976d2;
+}
+
+.button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+

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,371 @@
+.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;
+}
+
+
+.errorTypeBadge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 4px 8px;
+  background: rgba(198, 40, 40, 0.1);
+  border: 1px solid rgba(198, 40, 40, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #c62828;
+}
+
+.errorSection {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(198, 40, 40, 0.3);
+}
+
+.errorSection strong {
+  display: block;
+  margin-bottom: 4px;
+  color: #c62828;
+  font-size: 11px;
+}
+
+.errorDataPre {
+  margin: 0;
+  padding: 8px;
+  background: rgba(198, 40, 40, 0.1);
+  border: 1px solid rgba(198, 40, 40, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #c62828;
+}
+
+.stderrOutput {
+  margin: 0;
+  padding: 8px;
+  background: rgba(255, 152, 0, 0.1);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  overflow-x: auto;
+  max-height: 200px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #e65100;
+}
+
+.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;
+}
+
+.errorOutput {
+  margin: 0;
+  padding: 8px;
+  background: #ffebee;
+  border: 1px solid #ef5350;
+  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;
+  color: #c62828;
+}
+
+.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;
+}
+
+.errorResultItem {
+  border-top: 3px solid #ef5350;
+  background: linear-gradient(to bottom, #ffebee 0%, #ffffff 100%);
+}
+
+.errorResultItem .resultHeader {
+  border-bottom: 2px solid #ef5350;
+}
+
+.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;
+}
+
+.errorIcon {
+  font-size: 18px;
+  color: #ef5350;
+  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;
+}
+
+.errorResult {
+  padding: 16px;
+  background: white;
+}
+
+.errorPre {
+  margin: 0;
+  padding: 12px;
+  background: #ffebee;
+  border: 1px solid #ef5350;
+  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: #c62828;
+}
+