agentgate 0.1.0

package/public/style.css

@@ -0,0 +1,584 @@
+* { box-sizing: border-box; }
+
+html {
+  background: #0f0f1a;
+}
+
+:root {
+  --primary: #6366f1;
+  --primary-dark: #4f46e5;
+  --primary-light: #818cf8;
+  --primary-glow: rgba(99, 102, 241, 0.4);
+  --danger: #ef4444;
+  --danger-dark: #dc2626;
+  --success: #10b981;
+  --success-bg: #d1fae5;
+  --warning: #f59e0b;
+  --warning-bg: #fef3c7;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --radius: 16px;
+  --radius-sm: 10px;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px;
+  background: linear-gradient(160deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
+  min-height: 100vh;
+  color: var(--gray-200);
+  line-height: 1.6;
+}
+
+/* Animated background pattern */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+h1 {
+  font-size: 2.25rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #c4b5fd 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0 0 60px rgba(165, 180, 252, 0.5);
+}
+
+h2 {
+  color: var(--gray-100);
+  margin-top: 48px;
+  margin-bottom: 20px;
+  font-size: 1.35rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  letter-spacing: -0.02em;
+}
+
+h2::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 24px;
+  background: linear-gradient(180deg, var(--primary) 0%, #a855f7 100%);
+  border-radius: 4px;
+  box-shadow: 0 0 12px var(--primary-glow);
+}
+
+h3 {
+  margin-bottom: 14px;
+  color: var(--gray-100);
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.card {
+  background: linear-gradient(145deg, rgba(30, 30, 50, 0.9) 0%, rgba(25, 25, 40, 0.95) 100%);
+  border-radius: var(--radius);
+  padding: 28px;
+  margin: 20px 0;
+  box-shadow: var(--shadow), var(--shadow-glow);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg), 0 0 60px rgba(99, 102, 241, 0.2);
+  transform: translateY(-4px);
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 14px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.status::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.status.configured {
+  background: rgba(16, 185, 129, 0.15);
+  color: #34d399;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.status.configured::before {
+  background: var(--success);
+  box-shadow: 0 0 12px var(--success);
+}
+
+.status.not-configured {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.status.not-configured::before {
+  background: var(--warning);
+}
+
+input[type="text"], input[type="password"] {
+  width: 100%;
+  padding: 14px 18px;
+  margin: 8px 0 18px;
+  border: 2px solid rgba(99, 102, 241, 0.2);
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  transition: all 0.3s ease;
+  background: rgba(15, 15, 25, 0.6);
+  color: var(--gray-100);
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.2);
+  background: rgba(15, 15, 25, 0.8);
+}
+
+input[type="text"]::placeholder, input[type="password"]::placeholder {
+  color: var(--gray-500);
+}
+
+button, input[type="submit"] {
+  padding: 12px 24px;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #7c3aed 0%, var(--primary) 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
+}
+
+.btn-secondary {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--primary-light);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.btn-secondary:hover {
+  background: rgba(99, 102, 241, 0.2);
+  border-color: var(--primary);
+  transform: translateY(-2px);
+}
+
+.btn-danger {
+  background: linear-gradient(135deg, var(--danger) 0%, #f87171 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+}
+
+.btn-danger:hover {
+  background: linear-gradient(135deg, var(--danger-dark) 0%, var(--danger) 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
+}
+
+.btn-sm {
+  padding: 8px 16px;
+  font-size: 13px;
+  border-radius: 8px;
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--gray-400);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--gray-200);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Header nav buttons */
+.nav-btn {
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  border-radius: 10px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-btn-default {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--gray-300);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-btn-default:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.2);
+  transform: translateY(-2px);
+}
+
+.nav-btn-primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #8b5cf6 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+}
+
+.nav-btn-primary:hover {
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
+  transform: translateY(-2px);
+}
+
+.account-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--radius-sm);
+  margin: 12px 0;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  transition: all 0.3s ease;
+}
+
+.account-item:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.account-item span {
+  color: var(--gray-300);
+}
+
+.account-item strong {
+  color: var(--gray-100);
+}
+
+label {
+  font-weight: 600;
+  color: var(--gray-300);
+  display: block;
+  font-size: 13px;
+  margin-bottom: 4px;
+  letter-spacing: 0.02em;
+}
+
+.help {
+  font-size: 13px;
+  color: var(--gray-500);
+  margin-bottom: 14px;
+}
+
+.help a {
+  color: var(--primary-light);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.help a:hover {
+  text-decoration: underline;
+}
+
+.copyable {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 8px 14px;
+  border-radius: var(--radius-sm);
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 13px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--gray-200);
+}
+
+.copy-btn {
+  padding: 6px 12px;
+  font-size: 11px;
+  background: rgba(99, 102, 241, 0.2);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--primary-light);
+  transition: all 0.2s ease;
+}
+
+.copy-btn:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+details {
+  margin-top: 18px;
+}
+
+summary {
+  cursor: pointer;
+  color: var(--primary-light);
+  font-weight: 600;
+  padding: 10px 0;
+  transition: color 0.2s ease;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary::before {
+  content: '+';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: rgba(99, 102, 241, 0.15);
+  border-radius: 50%;
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--primary-light);
+  transition: all 0.3s ease;
+}
+
+details[open] summary::before {
+  content: '-';
+  background: var(--primary);
+  color: white;
+  box-shadow: 0 0 15px var(--primary-glow);
+}
+
+summary:hover {
+  color: white;
+}
+
+summary:hover::before {
+  background: rgba(99, 102, 241, 0.3);
+}
+
+.service-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.service-header h3 {
+  margin: 0;
+}
+
+.service-icon {
+  width: 32px;
+  height: 32px;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+pre {
+  background: linear-gradient(145deg, rgba(10, 10, 20, 0.9) 0%, rgba(15, 15, 30, 0.95) 100%);
+  color: #e2e8f0;
+  padding: 24px;
+  border-radius: var(--radius-sm);
+  overflow-x: auto;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 13px;
+  line-height: 1.8;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+code {
+  background: rgba(99, 102, 241, 0.1);
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 13px;
+  color: var(--primary-light);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+/* Header styles */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+/* Intro text */
+body > p:first-of-type {
+  color: var(--gray-400);
+  font-size: 16px;
+  margin-top: 0;
+}
+
+/* Login/Setup specific styles */
+.login-card {
+  max-width: 420px;
+  margin: 100px auto;
+  text-align: center;
+  background: linear-gradient(145deg, rgba(30, 30, 50, 0.95) 0%, rgba(20, 20, 35, 0.98) 100%);
+  box-shadow: var(--shadow-lg), 0 0 80px rgba(99, 102, 241, 0.15);
+}
+
+.login-card h1 {
+  margin-bottom: 8px;
+}
+
+.login-card h3 {
+  color: var(--gray-400);
+  font-weight: 500;
+  margin-bottom: 28px;
+}
+
+.login-card form {
+  text-align: left;
+}
+
+.login-card .btn-primary {
+  width: 100%;
+  margin-top: 12px;
+  padding: 14px 24px;
+}
+
+.error-message {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #f87171;
+  padding: 14px 18px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 18px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Animations - removed fadeIn on cards to prevent flash */
+
+/* Connected status pulse */
+@keyframes pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--success); }
+  50% { opacity: 0.6; box-shadow: 0 0 20px var(--success); }
+}
+
+.status.configured::before {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* Badge for queue count */
+.badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
+  color: white;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
+  animation: badgePulse 2s ease-in-out infinite;
+}
+
+@keyframes badgePulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
+
+/* Divider for nav buttons */
+.nav-divider {
+  width: 1px;
+  height: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 0 8px;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(99, 102, 241, 0.3);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(99, 102, 241, 0.5);
+}
+
+/* Selection styling */
+::selection {
+  background: rgba(99, 102, 241, 0.3);
+  color: white;
+}

package/src/cli.js

@@ -0,0 +1,77 @@
+#!/usr/bin/env node
+
+import { createApiKey, listApiKeys, deleteApiKey } from './lib/db.js';
+
+const [,, command, ...args] = process.argv;
+
+function printUsage() {
+  console.log(`
+Usage: node src/cli.js <command>
+
+Commands:
+  list                  List all API keys
+  create <name>         Create a new API key
+  delete <id>           Delete an API key by ID
+`);
+}
+
+async function main() {
+  switch (command) {
+  case 'list': {
+    const keys = listApiKeys();
+    if (keys.length === 0) {
+      console.log('No API keys found.');
+    } else {
+      console.log('\nAPI Keys:\n');
+      for (const k of keys) {
+        console.log(`  ID:      ${k.id}`);
+        console.log(`  Name:    ${k.name}`);
+        console.log(`  Key:     ${k.key_prefix} (hashed - full key shown only at creation)`);
+        console.log(`  Created: ${k.created_at}`);
+        console.log('');
+      }
+    }
+    break;
+  }
+
+  case 'create': {
+    const name = args[0];
+    if (!name) {
+      console.error('Error: name required\n');
+      console.log('Usage: node src/cli.js create <name>');
+      process.exit(1);
+    }
+    const key = await createApiKey(name);
+    console.log('\nAPI key created:\n');
+    console.log(`  Name: ${key.name}`);
+    console.log(`  Key:  ${key.key}`);
+    console.log('\n  ⚠️  Save this key now - you won\'t be able to see it again!\n');
+    break;
+  }
+
+  case 'delete': {
+    const id = args[0];
+    if (!id) {
+      console.error('Error: id required\n');
+      console.log('Usage: node src/cli.js delete <id>');
+      process.exit(1);
+    }
+    const result = deleteApiKey(id);
+    if (result.changes > 0) {
+      console.log(`API key ${id} deleted.`);
+    } else {
+      console.log(`No API key found with ID: ${id}`);
+    }
+    break;
+  }
+
+  default:
+    printUsage();
+    break;
+  }
+}
+
+main().catch(err => {
+  console.error('Error:', err.message);
+  process.exit(1);
+});