mcpgraph-ux 0.1.2 → 0.1.3

package/components/InputForm.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import styles from './InputForm.module.css';
+
+interface ToolInfo {
+  name: string;
+  description: string;
+  inputSchema: {
+    type: string;
+    properties?: Record<string, any>;
+    required?: string[];
+  };
+  outputSchema?: {
+    type: string;
+    properties?: Record<string, any>;
+  };
+}
+
+export interface InputFormHandle {
+  submit: (startPaused: boolean) => void;
+}
+
+interface InputFormProps {
+  toolName: string;
+  onSubmit: (formData: Record<string, any>, startPaused: boolean) => void;
+  disabled?: boolean;
+}
+
+const InputForm = forwardRef<InputFormHandle, InputFormProps>(({ toolName, onSubmit, disabled }, ref) => {
+  const [toolInfo, setToolInfo] = useState<ToolInfo | null>(null);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [error, setError] = useState<string | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const pendingStartPausedRef = useRef<boolean>(false);
+
+  useEffect(() => {
+    // Fetch tool information
+    fetch(`/api/tools/${toolName}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.error) {
+          setError(data.error);
+          return;
+        }
+        setToolInfo(data.tool);
+        // Initialize form data with default values
+        const defaults: Record<string, any> = {};
+        if (data.tool.inputSchema.properties) {
+          Object.entries(data.tool.inputSchema.properties).forEach(([key, prop]: [string, any]) => {
+            if (prop.type === 'string') {
+              defaults[key] = '';
+            } else if (prop.type === 'number') {
+              defaults[key] = 0;
+            } else if (prop.type === 'boolean') {
+              defaults[key] = false;
+            } else if (prop.type === 'array') {
+              defaults[key] = [];
+            } else if (prop.type === 'object') {
+              defaults[key] = {};
+            }
+          });
+        }
+        setFormData(defaults);
+      })
+      .catch(err => {
+        setError(err.message);
+      });
+  }, [toolName]);
+
+  // Expose submit method to parent via ref
+  useImperativeHandle(ref, () => ({
+    submit: (startPaused: boolean) => {
+      pendingStartPausedRef.current = startPaused;
+      if (formRef.current) {
+        formRef.current.requestSubmit();
+      } else {
+        console.warn('[InputForm] formRef.current is null, cannot submit form');
+      }
+    },
+  }));
+
+  const handleInputChange = (key: string, value: any) => {
+    setFormData(prev => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const startPaused = pendingStartPausedRef.current;
+    pendingStartPausedRef.current = false;
+    
+    // Validate required fields
+    if (toolInfo?.inputSchema.required) {
+      for (const field of toolInfo.inputSchema.required) {
+        if (!formData[field] || (typeof formData[field] === 'string' && formData[field].trim() === '')) {
+          setError(`Field "${field}" is required`);
+          return;
+        }
+      }
+    }
+    
+    setError(null);
+    onSubmit(formData, startPaused);
+  };
+
+  const renderInputField = (key: string, prop: any) => {
+    const value = formData[key];
+    const isRequired = toolInfo?.inputSchema.required?.includes(key);
+
+    switch (prop.type) {
+      case 'string':
+        if (prop.format === 'multiline' || (typeof value === 'string' && value.includes('\n'))) {
+          return (
+            <div key={key} className={styles.field}>
+              <label htmlFor={key} className={styles.label}>
+                {key}
+                {isRequired && <span className={styles.required}>*</span>}
+              </label>
+              <textarea
+                id={key}
+                value={typeof value === 'string' ? value : JSON.stringify(value)}
+                onChange={e => {
+                  try {
+                    const parsed = JSON.parse(e.target.value);
+                    handleInputChange(key, parsed);
+                  } catch {
+                    handleInputChange(key, e.target.value);
+                  }
+                }}
+                className={styles.textarea}
+                placeholder={prop.description || `Enter ${key}`}
+                rows={3}
+                disabled={disabled}
+              />
+              {prop.description && (
+                <div className={styles.hint}>{prop.description}</div>
+              )}
+            </div>
+          );
+        }
+        return (
+          <div key={key} className={styles.field}>
+            <label htmlFor={key} className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <input
+              id={key}
+              type="text"
+              value={typeof value === 'string' ? value : JSON.stringify(value)}
+              onChange={e => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleInputChange(key, parsed);
+                } catch {
+                  handleInputChange(key, e.target.value);
+                }
+              }}
+              className={styles.input}
+              placeholder={prop.description || `Enter ${key}`}
+              disabled={disabled}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'number':
+        return (
+          <div key={key} className={styles.field}>
+            <label htmlFor={key} className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <input
+              id={key}
+              type="number"
+              value={typeof value === 'number' ? value : ''}
+              onChange={e => handleInputChange(key, e.target.value ? Number(e.target.value) : 0)}
+              className={styles.input}
+              placeholder={prop.description || `Enter ${key}`}
+              disabled={disabled}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      case 'boolean':
+        return (
+          <div key={key} className={styles.field}>
+            <label htmlFor={key} className={styles.checkboxLabel}>
+              <input
+                id={key}
+                type="checkbox"
+                checked={value === true}
+                onChange={e => handleInputChange(key, e.target.checked)}
+                className={styles.checkbox}
+                disabled={disabled}
+              />
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+      default:
+        // For complex types (object, array), use textarea with JSON
+        return (
+          <div key={key} className={styles.field}>
+            <label htmlFor={key} className={styles.label}>
+              {key}
+              {isRequired && <span className={styles.required}>*</span>}
+            </label>
+            <textarea
+              id={key}
+              value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+              onChange={e => {
+                try {
+                  const parsed = JSON.parse(e.target.value);
+                  handleInputChange(key, parsed);
+                } catch {
+                  handleInputChange(key, e.target.value);
+                }
+              }}
+              className={styles.textarea}
+              placeholder={prop.description || `Enter ${key}`}
+              rows={3}
+              disabled={disabled}
+            />
+            {prop.description && (
+              <div className={styles.hint}>{prop.description}</div>
+            )}
+          </div>
+        );
+    }
+  };
+
+  if (!toolInfo) {
+    return <div className={styles.loading}>Loading tool information...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.error}>
+        <strong>Error:</strong> {error}
+      </div>
+    );
+  }
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className={styles.form}>
+      <div className={styles.inputs}>
+        {toolInfo.inputSchema.properties &&
+          Object.entries(toolInfo.inputSchema.properties).map(([key, prop]) =>
+            renderInputField(key, prop)
+          )}
+      </div>
+    </form>
+  );
+});
+
+InputForm.displayName = 'InputForm';
+
+export default InputForm;
+

package/components/ServerDetails.module.css

@@ -0,0 +1,118 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 0;
+}
+
+.title {
+  padding: 1rem 1.5rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #fafafa;
+  margin: 0;
+}
+
+.configInfo {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.configName {
+  font-weight: 600;
+  color: #333;
+  font-size: 0.95rem;
+  margin-bottom: 0.25rem;
+}
+
+.configVersion {
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.configDescription {
+  font-size: 0.85rem;
+  color: #666;
+  margin-top: 0.25rem;
+  font-style: italic;
+}
+
+.servers {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.server {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.serverName {
+  font-weight: 600;
+  color: #2196f3;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.serverType,
+.serverCommand,
+.serverArgs,
+.serverCwd,
+.serverUrl,
+.serverHeaders {
+  margin-bottom: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.serverType:last-child,
+.serverCommand:last-child,
+.serverArgs:last-child,
+.serverCwd:last-child,
+.serverUrl:last-child,
+.serverHeaders:last-child {
+  margin-bottom: 0;
+}
+
+.server:last-child {
+  border-bottom: none;
+}
+
+.label {
+  color: #666;
+  margin-right: 0.5rem;
+  font-weight: 500;
+}
+
+.code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.85rem;
+  color: #333;
+  word-break: break-all;
+}
+
+.headers {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  margin-left: 0.5rem;
+}
+
+.header {
+  margin: 0;
+}
+
+.loading,
+.error {
+  padding: 0.5rem;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.error {
+  color: #d32f2f;
+}
+

package/components/ServerDetails.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import styles from './ServerDetails.module.css';
+
+
+interface ServerInfo {
+  name: string;
+  type: string;
+  command?: string;
+  args?: string[];
+  cwd?: string;
+  url?: string;
+  headers?: Record<string, string>;
+}
+
+interface ServerDetailsProps {
+  config: {
+    name: string;
+    version: string;
+    description?: string;
+    servers: ServerInfo[];
+  };
+}
+
+// Server config section
+export function ServerConfig({ config }: ServerDetailsProps) {
+  if (!config || !config.name) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>Server</h2>
+      <div className={styles.configInfo}>
+        <div className={styles.configName}>{config.name}</div>
+        {config.version && (
+          <div className={styles.configVersion}>v{config.version}</div>
+        )}
+        {config.description && (
+          <div className={styles.configDescription}>{config.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// MCP Servers section
+export function McpServers({ config }: ServerDetailsProps) {
+  if (!config || !config.servers || config.servers.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>MCP Servers</h2>
+      <div className={styles.servers}>
+        {config.servers.map((server, index) => (
+          <div key={index} className={styles.server}>
+            <div className={styles.serverName}>{server.name}</div>
+            <div className={styles.serverType}>
+              <span className={styles.label}>Type:</span>
+              <code className={styles.code}>{server.type}</code>
+            </div>
+            {server.command && (
+              <div className={styles.serverCommand}>
+                <span className={styles.label}>Command:</span>
+                <code className={styles.code}>{server.command}</code>
+              </div>
+            )}
+            {server.args && server.args.length > 0 && (
+              <div className={styles.serverArgs}>
+                <span className={styles.label}>Args:</span>
+                <code className={styles.code}>{server.args.join(' ')}</code>
+              </div>
+            )}
+            {server.cwd && (
+              <div className={styles.serverCwd}>
+                <span className={styles.label}>CWD:</span>
+                <code className={styles.code}>{server.cwd}</code>
+              </div>
+            )}
+            {server.url && (
+              <div className={styles.serverUrl}>
+                <span className={styles.label}>URL:</span>
+                <code className={styles.code}>{server.url}</code>
+              </div>
+            )}
+            {server.headers && Object.keys(server.headers).length > 0 && (
+              <div className={styles.serverHeaders}>
+                <span className={styles.label}>Headers:</span>
+                <div className={styles.headers}>
+                  {Object.entries(server.headers).map(([key, value]) => (
+                    <div key={key} className={styles.header}>
+                      <code className={styles.code}>{key}: {value}</code>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Legacy default export for backwards compatibility
+export default function ServerDetails({ config }: ServerDetailsProps) {
+  return (
+    <>
+      <ServerConfig config={config} />
+      <McpServers config={config} />
+    </>
+  );
+}
+

package/components/TelemetryDashboard.module.css

@@ -0,0 +1,177 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: white;
+}
+
+.title {
+  padding: 12px 16px;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f5f5f5;
+  border-radius: 8px 8px 0 0;
+}
+
+.empty {
+  padding: 24px;
+  text-align: center;
+  color: #999;
+  font-style: italic;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  padding: 16px;
+}
+
+.metricCard {
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  background: #f9f9f9;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
+.metricLabel {
+  font-size: 11px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+.metricValue {
+  font-size: 20px;
+  font-weight: 600;
+  color: #2196f3;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.metricValue.error {
+  color: #ef5350;
+}
+
+.section {
+  padding: 16px;
+  border-top: 1px solid #e0e0e0;
+}
+
+.sectionTitle {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.nodeTypeList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nodeTypeItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.nodeTypeHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nodeTypeName {
+  font-weight: 600;
+  font-size: 13px;
+  color: #333;
+  text-transform: capitalize;
+}
+
+.nodeTypeCount {
+  font-size: 11px;
+  color: #666;
+}
+
+.progressBar {
+  height: 8px;
+  background: #e0e0e0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, #2196f3, #42a5f5);
+  transition: width 0.3s ease;
+}
+
+.nodeTypeStats {
+  display: flex;
+  gap: 12px;
+  font-size: 11px;
+  color: #666;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.slowNodesList {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.slowNodeItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: #f9f9f9;
+  border-radius: 4px;
+  position: relative;
+}
+
+.slowNodeId {
+  flex: 1;
+  font-size: 12px;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  color: #333;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slowNodeDuration {
+  font-size: 12px;
+  font-weight: 600;
+  color: #2196f3;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  white-space: nowrap;
+}
+
+.slowNodeBar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  overflow: hidden;
+  border-radius: 0 0 4px 4px;
+}
+
+.slowNodeFill {
+  height: 100%;
+  background: #2196f3;
+  opacity: 0.3;
+  transition: width 0.3s ease;
+}
+