create a dark styled web page to go with this file:

import React, { useState, useMemo } from 'react';
import { createRoot } from 'react-dom/client';

type ToolName = 'list_files' | 'read_file' | 'create_file' | 'write_file' | 'delete_file' | 'identify_log_errors';

interface Tool {
value: ToolName;
label: string;
description: string;
params: { name: string; type: 'text' | 'textarea'; label: string }[];
}

const TOOLS: Tool[] = [
{ value: 'list_files', label: 'List Files', description: 'Lists files and directories in a given path.', params: [{ name: 'path', type: 'text', label: 'Directory Path' }] },
{ value: 'read_file', label: 'Read File', description: 'Reads the content of a specific file.', params: [{ name: 'path', type: 'text', label: 'File Path' }] },
{ value: 'create_file', label: 'Create File', description: 'Creates a new file with optional content.', params: [{ name: 'path', type: 'text', label: 'New File Path' }, { name: 'content', type: 'textarea', label: 'Initial Content (optional)' }] },
{ value: 'write_file', label: 'Write to File', description: 'Writes content to a file, creating a backup first.', params: [{ name: 'path', type: 'text', label: 'File Path' }, { name: 'content', type: 'textarea', label: 'New Content' }] },
{ value: 'delete_file', label: 'Delete File', description: 'Deletes a specific file.', params: [{ name: 'path', type: 'text', label: 'File to Delete' }] },
{ value: 'identify_log_errors', label: 'Identify Log Errors', description: 'Scans a log file for common error messages.', params: [{ name: 'log_file_path', type: 'text', label: 'Log File Path' }] },
];

const App = () => {
const [selectedTool, setSelectedTool] = useState<ToolName>(TOOLS[0].value);
const [parameters, setParameters] = useState<Record<string, string>>({ path: 'C:\\temp' });
const [isLoading, setIsLoading] = useState(false);
const [response, setResponse] = useState<any>(null);
const [error, setError] = useState('');

const currentTool = useMemo(() => TOOLS.find(t => t.value === selectedTool)!, [selectedTool]);

const handleToolChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newToolName = e.target.value as ToolName;
setSelectedTool(newToolName);
// Reset parameters when tool changes
setParameters({});
setResponse(null);
setError('');
};

const handleParamChange = (name: string, value: string) => {
setParameters(prev => ({ ...prev, [name]: value }));
};

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
setResponse(null);
setError('');

const invocation_id = `mcp-ui-${Date.now()}`;
const endpoint = `http://127.0.0.1:8000/mcp/invoke/${selectedTool}`;

try {
const res = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tool_name: selectedTool,
invocation_id,
parameters,
}),
});

const data = await res.json();
if (!res.ok || data.result?.status === 'error') {
throw new Error(data.result?.message || `Server responded with status: ${res.status}`);
}
setResponse(data);
} catch (err) {
setError(err instanceof Error ? err.message : 'An unknown error occurred.');
} finally {
setIsLoading(false);
}
};

return (
<div className="container">
<header>
<h1>MCP Toolkit Control Panel</h1>
<p>A client to interact with the Maintenance & Control Program toolkit server.</p>
</header>

<main>
<div className="card form-card">
<h2>Select a Tool</h2>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="tool-select">Tool</label>
<select id="tool-select" value={selectedTool} onChange={handleToolChange}>
{TOOLS.map(tool => (
<option key={tool.value} value={tool.value}>{tool.label}</option>
))}
</select>
<p>{currentTool.description}</p>
</div>

{currentTool.params.map(param => (
<div className="form-group" key={param.name}>
<label htmlFor={param.name}>{param.label}</label>
{param.type === 'textarea' ? (
<textarea
id={param.name}
value={parameters[param.name] || ''}
onChange={(e) => handleParamChange(param.name, e.target.value)}
required
/>
) : (
<input
id={param.name}
type="text"
value={parameters[param.name] || ''}
onChange={(e) => handleParamChange(param.name, e.target.value)}
required
/>
)}
</div>
))}

<button type="submit" disabled={isLoading}>
{isLoading ? 'Running...' : `Run: ${currentTool.label}`}
</button>
</form>
</div>

{isLoading && (
<div className="card status-card">
<div className="loader">
<span></span>
<span></span>
<span></span>
</div>
<p>Communicating with MCP Server...</p>
</div>
)}

{error && (
<div className="card result-card error">
<h2>Error</h2>
<pre>{error}</pre>
</div>
)}

{response && (
<div className="card result-card success">
<h2>Result for Invocation: {response.invocation_id}</h2>
<pre>{JSON.stringify(response.result, null, 2)}</pre>
</div>
)}
</main>
</div>
);
};

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<App />);

index.html

@@ -1 +1,17 @@
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MCP Toolkit Control Panel</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="dark-theme">
+    <div id="root"></div>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script type="text/babel" src="script.js"></script>
+</body>
+</html>

script.js

@@ -1 +1,145 @@
 
+const TOOLS = [
+  { value: 'list_files', label: 'List Files', description: 'Lists files and directories in a given path.', params: [{ name: 'path', type: 'text', label: 'Directory Path' }] },
+  { value: 'read_file', label: 'Read File', description: 'Reads the content of a specific file.', params: [{ name: 'path', type: 'text', label: 'File Path' }] },
+  { value: 'create_file', label: 'Create File', description: 'Creates a new file with optional content.', params: [{ name: 'path', type: 'text', label: 'New File Path' }, { name: 'content', type: 'textarea', label: 'Initial Content (optional)' }] },
+  { value: 'write_file', label: 'Write to File', description: 'Writes content to a file, creating a backup first.', params: [{ name: 'path', type: 'text', label: 'File Path' }, { name: 'content', type: 'textarea', label: 'New Content' }] },
+  { value: 'delete_file', label: 'Delete File', description: 'Deletes a specific file.', params: [{ name: 'path', type: 'text', label: 'File to Delete' }] },
+  { value: 'identify_log_errors', label: 'Identify Log Errors', description: 'Scans a log file for common error messages.', params: [{ name: 'log_file_path', type: 'text', label: 'Log File Path' }] },
+];
+
+function App() {
+  const [selectedTool, setSelectedTool] = React.useState(TOOLS[0].value);
+  const [parameters, setParameters] = React.useState({ path: 'C:\\temp' });
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [response, setResponse] = React.useState(null);
+  const [error, setError] = React.useState('');
+
+  const currentTool = React.useMemo(() => TOOLS.find(t => t.value === selectedTool), [selectedTool]);
+
+  const handleToolChange = (e) => {
+    const newToolName = e.target.value;
+    setSelectedTool(newToolName);
+    setParameters({});
+    setResponse(null);
+    setError('');
+  };
+
+  const handleParamChange = (name, value) => {
+    setParameters(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setResponse(null);
+    setError('');
+
+    const invocation_id = `mcp-ui-${Date.now()}`;
+    const endpoint = `http://127.0.0.1:8000/mcp/invoke/${selectedTool}`;
+
+    try {
+      const res = await fetch(endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          tool_name: selectedTool,
+          invocation_id,
+          parameters,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok || data.result?.status === 'error') {
+        throw new Error(data.result?.message || `Server responded with status: ${res.status}`);
+      }
+      setResponse(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An unknown error occurred.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="container">
+      <header>
+        <h1>MCP Toolkit Control Panel</h1>
+        <p>A client to interact with the Maintenance & Control Program toolkit server.</p>
+      </header>
+      
+      <main>
+        <div className="card form-card">
+          <h2>Select a Tool</h2>
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="tool-select">Tool</label>
+              <select id="tool-select" value={selectedTool} onChange={handleToolChange}>
+                {TOOLS.map(tool => (
+                  <option key={tool.value} value={tool.value}>{tool.label}</option>
+                ))}
+              </select>
+              <p>{currentTool.description}</p>
+            </div>
+            
+            {currentTool.params.map(param => (
+              <div className="form-group" key={param.name}>
+                <label htmlFor={param.name}>{param.label}</label>
+                {param.type === 'textarea' ? (
+                  <textarea
+                    id={param.name}
+                    value={parameters[param.name] || ''}
+                    onChange={(e) => handleParamChange(param.name, e.target.value)}
+                    required
+                  />
+                ) : (
+                  <input
+                    id={param.name}
+                    type="text"
+                    value={parameters[param.name] || ''}
+                    onChange={(e) => handleParamChange(param.name, e.target.value)}
+                    required
+                  />
+                )}
+              </div>
+            ))}
+
+            <button type="submit" disabled={isLoading}>
+              {isLoading ? 'Running...' : `Run: ${currentTool.label}`}
+            </button>
+          </form>
+        </div>
+
+        {isLoading && (
+          <div className="card status-card">
+            <div className="loader">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+            <p>Communicating with MCP Server...</p>
+          </div>
+        )}
+
+        {error && (
+          <div className="card result-card error">
+            <h2>Error</h2>
+            <pre>{error}</pre>
+          </div>
+        )}
+
+        {response && (
+          <div className="card result-card success">
+            <h2>Result for Invocation: {response.invocation_id}</h2>
+            <pre>{JSON.stringify(response.result, null, 2)}</pre>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
+
+

style.css

@@ -1 +1,167 @@
 
+:root {
+    --primary: #6366F1;
+    --primary-dark: #4F46E5;
+    --background: #1A1A2E;
+    --card-bg: #16213E;
+    --text: #E6E6E6;
+    --text-muted: #A0AEC0;
+    --error: #F56565;
+    --success: #48BB78;
+}
+
+body.dark-theme {
+    background-color: var(--background);
+    color: var(--text);
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+header {
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+header h1 {
+    color: var(--primary);
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+
+header p {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+}
+
+.card {
+    background-color: var(--card-bg);
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form-card {
+    border-left: 4px solid var(--primary);
+}
+
+.result-card {
+    border-left: 4px solid var(--success);
+}
+
+.result-card.error {
+    border-left-color: var(--error);
+}
+
+h2 {
+    color: var(--primary);
+    margin-top: 0;
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text-muted);
+}
+
+select, input, textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    border: 1px solid #2D3748;
+    background-color: #2D3748;
+    color: var(--text);
+    margin-bottom: 0.5rem;
+}
+
+textarea {
+    min-height: 150px;
+    resize: vertical;
+}
+
+button {
+    background-color: var(--primary);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.2s;
+    margin-top: 1rem;
+}
+
+button:hover {
+    background-color: var(--primary-dark);
+}
+
+button:disabled {
+    background-color: #4A5568;
+    cursor: not-allowed;
+}
+
+.loader {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: 1rem 0;
+}
+
+.loader span {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background-color: var(--primary);
+    animation: bounce 1.4s infinite ease-in-out both;
+}
+
+.loader span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.loader span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+    0%, 80%, 100% {
+        transform: scale(0);
+    }
+    40% {
+        transform: scale(1);
+    }
+}
+
+pre {
+    background-color: #2D3748;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 1rem;
+    }
+    
+    header h1 {
+        font-size: 2rem;
+    }
+}
+
+