Merge branch 'ui'

keygenServer/client/app/globals.css

@@ -1,26 +1,176 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+  /* Sleek modern neumorphic palette */
+  --background: #f0f0f3;
+  --surface: #f8f9fa;
+  --foreground: #1a1a1a;
+  --text-muted: #6c757d;
+  --text-button: #2d3748;
+  --text-button-hover: #1a202c;
+
+  /* Refined shadow system - more subtle and realistic */
+  --shadow-light: #ffffff;
+  --shadow-dark: #d1d5db;
+  --shadow-darker: #c7cbcf;
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  /* Modern accent colors */
+  --primary: #475569;
+  --primary-dark: #334155;
+  --accent: #8b5cf6;
+  --success: #10b981;
+  --error: #ef4444;
+  --warning: #f59e0b;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #1e1e1e;
+    --surface: #2a2a2a;
+    --foreground: #ffffff;
+    --text-muted: #a0a0a0;
+    --text-button: #ffffff;
+    --text-button-hover: #f0f0f0;
+    --shadow-light: #2a2a2a;
+    --shadow-dark: #0a0a0a;
+    --shadow-darker: #000000;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-vollkorn), serif;
+  min-height: 100vh;
+  overflow-x: hidden;
+  /* Prevent horizontal scroll */
+  width: 100vw;
+  max-width: 100%;
+}
+
+/* Sleek Neumorphic Components - All Elements Pop Out */
+
+/* Main container - elevated with subtle shadows */
+.neuro-container {
+  background: var(--surface);
+  box-shadow:
+    6px 6px 12px var(--shadow-dark),
+    -6px -6px 12px var(--shadow-light);
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Cards - medium elevation, compact */
+.neuro-card {
+  background: var(--surface);
+  box-shadow:
+    4px 4px 8px var(--shadow-dark),
+    -4px -4px 8px var(--shadow-light);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Primary action button - sleek and modern */
+.neuro-button {
+  background: var(--surface);
+  color: var(--text-button);
+  box-shadow:
+    3px 3px 6px var(--shadow-dark),
+    -3px -3px 6px var(--shadow-light);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
+
+.neuro-button:hover {
+  color: var(--text-button-hover);
+  transform: translateY(-1px);
+  box-shadow:
+    4px 4px 8px var(--shadow-dark),
+    -4px -4px 8px var(--shadow-light);
+}
+
+.neuro-button:active {
+  transform: translateY(0px);
+  box-shadow:
+    2px 2px 4px var(--shadow-dark),
+    -2px -2px 4px var(--shadow-light);
+}
+
+/* Accent button for primary actions */
+.neuro-button-primary {
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: white;
+  box-shadow:
+    3px 3px 6px var(--shadow-dark),
+    -3px -3px 6px var(--shadow-light);
+  border-radius: 10px;
+  border: none;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.neuro-button-primary:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    4px 4px 8px var(--shadow-dark),
+    -4px -4px 8px var(--shadow-light);
+}
+
+.neuro-button-primary:active {
+  transform: translateY(0px);
+  box-shadow:
+    2px 2px 4px var(--shadow-dark),
+    -2px -2px 4px var(--shadow-light);
+}
+
+/* Content display areas - minimal elevation */
+.neuro-display {
+  background: var(--background);
+  box-shadow:
+    2px 2px 4px var(--shadow-dark),
+    -2px -2px 4px var(--shadow-light);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+/* Input fields - completely flat, no shadows */
+.neuro-input {
+  background: var(--background);
+  border: 1px solid var(--shadow-dark);
+  border-radius: 6px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.neuro-input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+/* Text color utilities */
+.text-primary {
+  color: var(--foreground);
+}
+
+.text-secondary {
+  color: var(--text-muted);
+}
+
+.text-button {
+  color: var(--text-button);
+}
+
+.text-button:hover {
+  color: var(--text-button-hover);
+}

keygenServer/client/app/layout.tsx

@@ -1,20 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Vollkorn } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const vollkorn = Vollkorn({
+  variable: "--font-vollkorn",
   subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "API Key Generator",
+  description: "Generate and manage your API keys",
 };
 
 export default function RootLayout({
@@ -25,7 +21,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${vollkorn.variable} antialiased font-vollkorn`}
       >
         {children}
       </body>

keygenServer/client/app/main/page.tsx

@@ -10,7 +10,6 @@ export default function MainPage() {
   const [apiKey, setApiKey] = useState('');
   const [error, setError] = useState('');
   const router = useRouter();
-
   useEffect(() => {
     const unsub = auth.onAuthStateChanged((user) => {
       if (!user) {
@@ -22,7 +21,7 @@ export default function MainPage() {
       }
     });
     return () => unsub();
-  }, []);
+  }, [router]);
 
   const generateApiKey = async () => {
     try {
@@ -47,40 +46,149 @@ export default function MainPage() {
     }
   };
 
-  if (loading) return <p>Loading...</p>;
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(apiKey);
+      const toast = document.createElement('div');
+      toast.textContent = 'API key copied to clipboard!';
+      toast.className = 'fixed top-4 right-4 neuro-card px-4 py-2 text-sm text-primary font-medium z-50 transition-opacity duration-300';
+      document.body.appendChild(toast);
+      setTimeout(() => {
+        toast.style.opacity = '0';
+        setTimeout(() => document.body.removeChild(toast), 300);
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  }; if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="neuro-container p-6">
+          <div className="flex items-center space-x-3">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
+            <span className="text-base text-secondary">Loading...</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <main className="p-4">
-      <h1 className="text-xl mb-4">Welcome, {userDisplayName}!</h1>
-      
-      <div className="space-y-4">
-        <button 
-          onClick={generateApiKey}
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-        >
-          Generate API Key
-        </button>
-
-        {apiKey && (
-          <div className="mt-4 p-4 bg-gray-100 rounded">
-            <p className="font-semibold">Your API Key:</p>
-            <code className="block mt-2 p-2 bg-white rounded border">{apiKey}</code>
+    <div className="min-h-screen p-4 md:p-6 flex justify-center items-center">
+      <div className="w-full max-w-4xl py-6 ">
+        {/* Header */}
+        <div className="neuro-container p-4 md:p-6 mb-6">
+          <div className="flex justify-between items-center gap-4">
+            <div>
+              <h1 className="text-xl md:text-2xl font-bold text-primary mb-1">
+                Welcome back, {userDisplayName}!
+              </h1>
+              <p className="text-sm md:text-base text-secondary">
+                Generate your MCP API key for monitoring APIs
+              </p>
+            </div>            <button
+              onClick={() => auth.signOut().then(() => router.push('/'))}
+              className="neuro-button px-3 py-2 md:px-4 md:py-2 text-sm md:text-base text-button font-medium"
+            >
+              Sign Out
+            </button>
           </div>
-        )}
+        </div>
 
-        {error && (
-          <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">
-            {error}
-          </div>
-        )}
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">          {/* API Key Generation */}
+          <div className="neuro-card p-4 md:p-6">
+            <h2 className="text-lg md:text-xl font-semibold text-primary mb-4">
+              Generate MCP API Key
+            </h2>
+
+            <div className="space-y-4">
+              <button
+                onClick={generateApiKey}
+                className="neuro-button-primary w-full py-3 px-4 text-base md:text-lg font-semibold"
+              >
+                <span className="flex items-center justify-center space-x-2">
+                  <span>Generate New MCP API Key</span>
+                </span>
+              </button>              {apiKey && (
+                <div className="neuro-display p-4">
+                  <div className="flex justify-between items-center mb-3">
+                    <h3 className="text-sm md:text-base font-semibold text-primary">Your MCP API Key</h3>
+                    <button
+                      onClick={copyToClipboard}
+                      className="neuro-button px-2 py-1 text-xs text-button"
+                      title="Copy to clipboard"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      </svg>
+                    </button>
+                  </div>
+                  <div className="neuro-input p-3">
+                    <code className="text-sm text-primary font-mono break-all">
+                      {apiKey}
+                    </code>
+                  </div>
+                  <p className="text-xs text-secondary mt-2">
+                    Keep this key secure
+                  </p>
+                </div>
+              )}              {error && (
+                <div className="neuro-display p-3 border-l-4 border-red-400">
+                  <div className="flex items-center">
+                    <svg className="w-4 h-4 text-red-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span className="text-red-700 text-sm font-medium">{error}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>          {/* User Info & Instructions */}
+          <div className="space-y-4">
+            {/* User Profile */}
+            <div className="neuro-card p-4 md:p-6">
+              <h2 className="text-lg md:text-xl font-semibold text-primary mb-4">
+                Account Information
+              </h2>
+              <div className="space-y-3">
+                <div className="neuro-display p-3 flex flex-col space-y-4">
+                  <div>
+                    <label className="text-xs font-medium text-secondary">Email</label>
+                    <p className="text-primary font-medium">{userEmail}</p>
+                  </div>
 
-        <button 
-          onClick={() => auth.signOut().then(() => router.push('/'))}
-          className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-        >
-          Logout
-        </button>
+                  <div>
+                    <label className="text-xs font-medium text-secondary">Display Name</label>
+                    <p className="text-primary font-medium">{userDisplayName}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Usage Instructions */}
+            <div className="neuro-card p-4 md:p-6">
+              <h2 className="text-lg md:text-xl font-semibold text-primary mb-4">
+                How to Use Your MCP API Key
+              </h2>
+              <div className="space-y-3 text-sm text-secondary">
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-5 h-5 bg-slate-600 text-white rounded-full flex items-center justify-center text-xs font-semibold">1</span>
+                  <p>Use this key with the MCP API monitoring system to track APIs</p>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-5 h-5 bg-slate-600 text-white rounded-full flex items-center justify-center text-xs font-semibold">2</span>
+                  <p>Set up API monitoring rules for automated API calls</p>
+                </div>
+                <div className="flex items-start space-x-3">
+                  <span className="flex-shrink-0 w-5 h-5 bg-slate-600 text-white rounded-full flex items-center justify-center text-xs font-semibold">3</span>
+                  <p>Monitor API responses and receive alerts when services change</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-    </main>
+    </div>
   );
 }

keygenServer/client/app/page.tsx

@@ -17,12 +17,38 @@ export default function LoginPage() {
   };
 
   return (
-    <main className="p-4">
-      <h1 className="text-xl mb-4">Sign In</h1>
-      <button onClick={signInWithGoogle} className="bg-blue-500 text-white px-4 py-2 rounded">
-        Sign in with Google
-      </button>
-    </main>
+    <div className="min-h-screen flex items-center justify-center p-3 md:p-6 max-w-2xl mx-auto">
+      <div className="neuro-container w-full max-w-md p-4 md:p-8">
+        <div className="text-center mb-6 md:mb-8">
+          <h1 className="text-2xl md:text-4xl font-bold mb-4 text-primary">
+            MCP API Monitoring System
+          </h1>
+          <p className="text-sm md:text-lg text-secondary">
+            Sign in to generate and view your MCP API key
+          </p>
+        </div>
+        <div className="space-y-4 md:space-y-6">
+          <button
+            onClick={signInWithGoogle}
+            className="neuro-button-primary w-full py-3 px-4 md:py-4 md:px-6 text-base md:text-lg font-semibold"
+          >
+            <svg className="w-5 h-5 md:w-6 md:h-6 mr-3" viewBox="0 0 24 24">
+              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+            </svg>
+            <span>Continue with Google</span>
+          </button>
+
+          <div className="neuro-display p-4">
+            <p className="text-sm text-secondary text-center">
+              Generate your MCP API key, then head to your MCP-enabled application to start.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }