mcpgraph-ux 0.1.1 → 0.1.3

package/components/TelemetryDashboard.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import styles from './TelemetryDashboard.module.css';
+
+export interface ExecutionTelemetry {
+  totalDuration: number;
+  nodeDurations: Record<string, number>;
+  nodeCounts: Record<string, number>;
+  errorCount: number;
+}
+
+interface TelemetryDashboardProps {
+  telemetry: ExecutionTelemetry | null;
+}
+
+export default function TelemetryDashboard({ telemetry }: TelemetryDashboardProps) {
+  if (!telemetry) {
+    return (
+      <div className={styles.container}>
+        <h3 className={styles.title}>Performance Metrics</h3>
+        <div className={styles.empty}>No telemetry data available</div>
+      </div>
+    );
+  }
+
+  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 formatPercentage = (value: number, total: number) => {
+    if (total === 0) return '0%';
+    return `${((value / total) * 100).toFixed(1)}%`;
+  };
+
+  // Calculate averages per node type
+  const nodeTypeStats: Record<string, {
+    totalDuration: number;
+    count: number;
+    averageDuration: number;
+  }> = {};
+
+  Object.entries(telemetry.nodeDurations).forEach(([nodeId, duration]) => {
+    // Extract node type from nodeId (simplified - in real implementation, we'd need node metadata)
+    // For now, we'll group by the pattern we see in nodeIds
+    const nodeType = nodeId.split('_')[0] || 'unknown';
+    
+    if (!nodeTypeStats[nodeType]) {
+      nodeTypeStats[nodeType] = {
+        totalDuration: 0,
+        count: 0,
+        averageDuration: 0,
+      };
+    }
+    
+    nodeTypeStats[nodeType].totalDuration += duration;
+    nodeTypeStats[nodeType].count += 1;
+  });
+
+  // Calculate averages
+  Object.keys(nodeTypeStats).forEach(nodeType => {
+    const stats = nodeTypeStats[nodeType];
+    stats.averageDuration = stats.totalDuration / stats.count;
+  });
+
+  // Sort nodes by duration (descending)
+  const sortedNodes = Object.entries(telemetry.nodeDurations)
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, 10); // Top 10 slowest nodes
+
+  // Sort node types by total duration
+  const sortedNodeTypes = Object.entries(nodeTypeStats)
+    .sort(([, a], [, b]) => b.totalDuration - a.totalDuration);
+
+  return (
+    <div className={styles.container}>
+      <h3 className={styles.title}>Performance Metrics</h3>
+      
+      <div className={styles.metrics}>
+        <div className={styles.metricCard}>
+          <div className={styles.metricLabel}>Total Duration</div>
+          <div className={styles.metricValue}>{formatDuration(telemetry.totalDuration)}</div>
+        </div>
+        
+        <div className={styles.metricCard}>
+          <div className={styles.metricLabel}>Nodes Executed</div>
+          <div className={styles.metricValue}>
+            {Object.values(telemetry.nodeCounts).reduce((sum, count) => sum + count, 0)}
+          </div>
+        </div>
+        
+        <div className={styles.metricCard}>
+          <div className={styles.metricLabel}>Errors</div>
+          <div className={`${styles.metricValue} ${telemetry.errorCount > 0 ? styles.error : ''}`}>
+            {telemetry.errorCount}
+          </div>
+        </div>
+      </div>
+
+      {sortedNodeTypes.length > 0 && (
+        <div className={styles.section}>
+          <h4 className={styles.sectionTitle}>Duration by Node Type</h4>
+          <div className={styles.nodeTypeList}>
+            {sortedNodeTypes.map(([nodeType, stats]) => (
+              <div key={nodeType} className={styles.nodeTypeItem}>
+                <div className={styles.nodeTypeHeader}>
+                  <span className={styles.nodeTypeName}>{nodeType}</span>
+                  <span className={styles.nodeTypeCount}>{stats.count} nodes</span>
+                </div>
+                <div className={styles.progressBar}>
+                  <div
+                    className={styles.progressFill}
+                    style={{
+                      width: `${(stats.totalDuration / telemetry.totalDuration) * 100}%`,
+                    }}
+                  />
+                </div>
+                <div className={styles.nodeTypeStats}>
+                  <span>Total: {formatDuration(stats.totalDuration)}</span>
+                  <span>Avg: {formatDuration(stats.averageDuration)}</span>
+                  <span>{formatPercentage(stats.totalDuration, telemetry.totalDuration)}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {sortedNodes.length > 0 && (
+        <div className={styles.section}>
+          <h4 className={styles.sectionTitle}>Slowest Nodes</h4>
+          <div className={styles.slowNodesList}>
+            {sortedNodes.map(([nodeId, duration]) => (
+              <div key={nodeId} className={styles.slowNodeItem}>
+                <span className={styles.slowNodeId}>{nodeId}</span>
+                <span className={styles.slowNodeDuration}>{formatDuration(duration)}</span>
+                <div className={styles.slowNodeBar}>
+                  <div
+                    className={styles.slowNodeFill}
+                    style={{
+                      width: `${(duration / telemetry.totalDuration) * 100}%`,
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/ToolList.module.css

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-shrink: 0;
 }
 
 .title {
@@ -14,8 +14,8 @@
 }
 
 .toolList {
-  flex: 1;
   overflow-y: auto;
+  max-height: 400px;
 }
 
 .toolItem {

package/components/ToolTester.module.css

@@ -1,102 +1,40 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  height: 100%;
+  gap: 0;
 }
 
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.inputs {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.label {
-  font-weight: 500;
-  color: #333;
-  font-size: 0.9rem;
-}
-
-.required {
-  color: #d32f2f;
-  margin-left: 0.25rem;
-}
-
-.input,
-.textarea {
-  padding: 0.75rem;
+.debugControlsHeader {
+  border-radius: 8px 8px 0 0;
+  background-color: #fff;
   border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.9rem;
-  font-family: inherit;
-  transition: border-color 0.2s;
-}
-
-.input:focus,
-.textarea:focus {
-  outline: none;
-  border-color: #2196f3;
-}
-
-.textarea {
-  resize: vertical;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.85rem;
-}
-
-.hint {
-  font-size: 0.8rem;
-  color: #666;
-  font-style: italic;
+  border-bottom: none;
+  padding: 0;
 }
 
-.checkboxLabel {
+.graphHistoryContainer {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-weight: 500;
-  color: #333;
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
-.checkbox {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-.submitButton {
-  padding: 0.75rem 1.5rem;
-  background-color: #2196f3;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  align-self: flex-start;
+  flex: 1;
+  gap: 0;
+  border-radius: 0 0 8px 8px;
+  border: 1px solid #ddd;
+  border-top: none;
+  overflow: hidden;
 }
 
-.submitButton:hover:not(:disabled) {
-  background-color: #1976d2;
+.graphSection {
+  flex: 1;
+  min-width: 0;
+  background-color: #fff;
 }
 
-.submitButton:disabled {
-  background-color: #ccc;
-  cursor: not-allowed;
+.historySection {
+  flex: 1;
+  min-width: 0;
+  background-color: #fff;
+  border-left: 1px solid #ddd;
+  overflow-y: auto;
 }
 
 .error {
@@ -107,36 +45,3 @@
   color: #c62828;
 }
 
-.result {
-  padding: 1rem;
-  background-color: #f5f5f5;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.result h3 {
-  margin-bottom: 0.75rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.resultContent {
-  background-color: #fff;
-  padding: 1rem;
-  border-radius: 4px;
-  overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.85rem;
-  line-height: 1.5;
-  color: #333;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.loading {
-  padding: 2rem;
-  text-align: center;
-  color: #666;
-}
-