- Recent Databases
+ Recent Services
View all
@@ -134,45 +192,22 @@ export default function Dashboard() {
{isLoading ? (
Loading...
- ) : databases.length === 0 ? (
+ ) : services.length === 0 ? (
-
-
No databases yet
+
+
No services yet
- Create your first database
+ Create your first service
) : (
- {databases.slice(0, 5).map((db) => (
-
-
-
-
-
- {db.name}
-
-
{db.region}
-
-
- {db.status}
-
-
+ {services.slice(0, 5).map((svc) => (
+
))}
)}
@@ -180,3 +215,40 @@ export default function Dashboard() {
)
}
+
+function ServiceRow({ service }: { service: Service }) {
+ const Icon = serviceTypeIcons[service.service_type] || Database
+ const colors = engineColors[service.engine] || { bg: 'bg-gray-100', text: 'text-gray-600' }
+
+ return (
+
+
+
+
+
+
+ {service.name}
+
+
+ {service.engine}
+
+
+
{service.region}
+
+
+ {service.status}
+
+
+ )
+}
diff --git a/services/dashboard/src/pages/DatabaseDetail.tsx b/services/dashboard/src/pages/DatabaseDetail.tsx
index b200540..8016e2f 100644
--- a/services/dashboard/src/pages/DatabaseDetail.tsx
+++ b/services/dashboard/src/pages/DatabaseDetail.tsx
@@ -103,8 +103,9 @@ export default function DatabaseDetail() {
onSuccess: (response) => {
setCommandResult(JSON.stringify(response.data.result, null, 2))
},
- onError: (error: any) => {
- const message = error.response?.data?.error?.message || 'Command failed'
+ onError: (error: unknown) => {
+ const axiosError = error as { response?: { data?: { error?: { message?: string } } } }
+ const message = axiosError.response?.data?.error?.message || 'Command failed'
setCommandResult(`Error: ${message}`)
},
})
diff --git a/services/dashboard/src/pages/Databases.tsx b/services/dashboard/src/pages/Databases.tsx
index ebfa265..3ed735c 100644
--- a/services/dashboard/src/pages/Databases.tsx
+++ b/services/dashboard/src/pages/Databases.tsx
@@ -166,8 +166,9 @@ function CreateDatabaseModal({
toast.success('Database created!')
onCreated(response.data)
},
- onError: (error: any) => {
- const message = error.response?.data?.error?.message || 'Failed to create database'
+ onError: (error: unknown) => {
+ const axiosError = error as { response?: { data?: { error?: { message?: string } } } }
+ const message = axiosError.response?.data?.error?.message || 'Failed to create database'
toast.error(message)
},
})
diff --git a/services/dashboard/src/pages/Landing.tsx b/services/dashboard/src/pages/Landing.tsx
new file mode 100644
index 0000000..8d0c087
--- /dev/null
+++ b/services/dashboard/src/pages/Landing.tsx
@@ -0,0 +1,683 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import {
+ Database,
+ Cpu,
+ HardDrive,
+ Archive,
+ Zap,
+ Shield,
+ Globe,
+ Code2,
+ Github,
+ ArrowRight,
+ Check,
+ Sparkles,
+ Layers,
+ Lock,
+ Clock,
+ ChevronRight,
+} from 'lucide-react'
+import clsx from 'clsx'
+
+// Terminal typing effect hook
+function useTypingEffect(text: string, speed: number = 50) {
+ const [displayText, setDisplayText] = useState('')
+ const [isComplete, setIsComplete] = useState(false)
+
+ useEffect(() => {
+ let index = 0
+ setDisplayText('')
+ setIsComplete(false)
+
+ const timer = setInterval(() => {
+ if (index < text.length) {
+ setDisplayText(text.slice(0, index + 1))
+ index++
+ } else {
+ setIsComplete(true)
+ clearInterval(timer)
+ }
+ }, speed)
+
+ return () => clearInterval(timer)
+ }, [text, speed])
+
+ return { displayText, isComplete }
+}
+
+// Service cards data
+const services = [
+ {
+ name: 'Cache',
+ description: 'Redis & ValKey compatible caching with sub-millisecond latency',
+ icon: Cpu,
+ color: 'neon-cyan',
+ gradient: 'from-cyan-500 to-blue-500',
+ engines: ['Redis', 'ValKey'],
+ },
+ {
+ name: 'Database',
+ description: 'Serverless PostgreSQL with automatic scaling and branching',
+ icon: Database,
+ color: 'neon-purple',
+ gradient: 'from-purple-500 to-pink-500',
+ engines: ['PostgreSQL'],
+ },
+ {
+ name: 'Vector',
+ description: 'AI-native vector database for embeddings and similarity search',
+ icon: HardDrive,
+ color: 'neon-green',
+ gradient: 'from-green-500 to-emerald-500',
+ engines: ['pgvector'],
+ },
+ {
+ name: 'Storage',
+ description: 'S3-compatible object storage with global CDN distribution',
+ icon: Archive,
+ color: 'neon-orange',
+ gradient: 'from-orange-500 to-amber-500',
+ engines: ['S3', 'MinIO'],
+ },
+]
+
+// Features data
+const features = [
+ {
+ icon: Zap,
+ title: 'Blazing Fast',
+ description: 'Sub-millisecond response times with edge deployment',
+ },
+ {
+ icon: Shield,
+ title: 'Enterprise Security',
+ description: 'SOC2 compliant with encryption at rest and in transit',
+ },
+ {
+ icon: Globe,
+ title: 'Global Scale',
+ description: 'Deploy to 30+ regions worldwide with automatic failover',
+ },
+ {
+ icon: Code2,
+ title: 'Developer First',
+ description: 'REST API, native SDKs, and CLI for every workflow',
+ },
+ {
+ icon: Lock,
+ title: 'Open Source',
+ description: 'MIT licensed core with full transparency and control',
+ },
+ {
+ icon: Clock,
+ title: 'Pay Per Use',
+ description: 'Only pay for what you use with no hidden fees',
+ },
+]
+
+// Pricing plans
+const plans = [
+ {
+ name: 'Free',
+ price: '$0',
+ period: 'forever',
+ description: 'Perfect for side projects and experiments',
+ features: [
+ '1 service per type',
+ '256 MB storage',
+ '10K requests/day',
+ 'Community support',
+ 'Single region',
+ ],
+ cta: 'Start Free',
+ popular: false,
+ },
+ {
+ name: 'Pro',
+ price: '$19',
+ period: '/month',
+ description: 'For individual developers and small teams',
+ features: [
+ '5 services per type',
+ '10 GB storage',
+ '1M requests/day',
+ 'Email support',
+ 'Multi-region',
+ 'Daily backups',
+ ],
+ cta: 'Start Trial',
+ popular: true,
+ },
+ {
+ name: 'Team',
+ price: '$49',
+ period: '/month',
+ description: 'For growing teams with advanced needs',
+ features: [
+ '25 services per type',
+ '100 GB storage',
+ '10M requests/day',
+ 'Priority support',
+ 'Team collaboration',
+ 'Custom domains',
+ 'Analytics dashboard',
+ ],
+ cta: 'Start Trial',
+ popular: false,
+ },
+ {
+ name: 'Business',
+ price: '$199',
+ period: '/month',
+ description: 'For enterprises requiring dedicated resources',
+ features: [
+ 'Unlimited services',
+ '1 TB storage',
+ 'Unlimited requests',
+ '24/7 phone support',
+ 'Dedicated instances',
+ 'SLA guarantee',
+ 'Custom integrations',
+ 'SOC2 & HIPAA',
+ ],
+ cta: 'Contact Sales',
+ popular: false,
+ },
+]
+
+// Code examples
+const codeExamples = {
+ cache: `// Connect to LazyCache Redis
+import { LazyCache } from '@lazycache/sdk'
+
+const cache = new LazyCache({
+ url: process.env.LAZYCACHE_URL,
+ token: process.env.LAZYCACHE_TOKEN,
+})
+
+// Set and get with automatic serialization
+await cache.set('user:1', { name: 'John', role: 'admin' })
+const user = await cache.get('user:1')
+
+// Built-in rate limiting
+const limiter = cache.ratelimit({
+ requests: 100,
+ window: '1m',
+})`,
+ database: `// Serverless PostgreSQL connection
+import { LazyDB } from '@lazycache/db'
+
+const db = new LazyDB({
+ connectionString: process.env.DATABASE_URL,
+})
+
+// Type-safe queries with automatic pooling
+const users = await db.query\`
+ SELECT * FROM users
+ WHERE created_at > \${lastWeek}
+ ORDER BY created_at DESC
+ LIMIT 10
+\`
+
+// Transactions with automatic retry
+await db.transaction(async (tx) => {
+ await tx.insert('orders', order)
+ await tx.update('inventory', { id }, { stock: stock - 1 })
+})`,
+ vector: `// AI-ready vector search
+import { LazyVector } from '@lazycache/vector'
+
+const vectors = new LazyVector({
+ url: process.env.VECTOR_URL,
+})
+
+// Store embeddings with metadata
+await vectors.upsert('products', [
+ {
+ id: 'prod-1',
+ embedding: await openai.embed(description),
+ metadata: { category: 'electronics', price: 299 },
+ },
+])
+
+// Semantic search with filtering
+const similar = await vectors.search('products', {
+ vector: queryEmbedding,
+ topK: 10,
+ filter: { category: 'electronics' },
+})`,
+ storage: `// S3-compatible object storage
+import { LazyStorage } from '@lazycache/storage'
+
+const storage = new LazyStorage({
+ bucket: process.env.STORAGE_BUCKET,
+ accessKey: process.env.STORAGE_KEY,
+})
+
+// Upload with automatic CDN distribution
+const url = await storage.upload('images/avatar.png', file, {
+ contentType: 'image/png',
+ public: true,
+})
+
+// Presigned URLs for secure access
+const downloadUrl = await storage.presign('private/report.pdf', {
+ expiresIn: '1h',
+})`,
+}
+
+export default function Landing() {
+ const [activeTab, setActiveTab] = useState
('cache')
+ const { displayText, isComplete } = useTypingEffect('npx create-lazycache@latest my-app', 40)
+
+ return (
+
+ {/* Background effects */}
+
+
+
+ {/* Gradient orbs */}
+
+
+
+
+ {/* Navigation */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Hero Section */}
+
+
+
+ {/* Badge */}
+
+ Open Source & AI-Ready
+
+
+ {/* Main headline */}
+
+ The Unified
+ Data Platform
+
+
+
+ Cache, Database, Vector Search, and Storage — all in one place.
+ Built for developers who ship fast.
+
+
+ {/* Terminal */}
+
+
+
+
+
+ $
+ {displayText}
+ {!isComplete && | }
+
+
+
+
+
+ {/* CTA buttons */}
+
+
+
+
+ {/* Services Section */}
+
+
+
+
+ One Platform, All Your Data
+
+
+ Stop juggling multiple services. LazyCache unifies your entire data stack
+ with a consistent API and developer experience.
+
+
+
+
+ {services.map((service, i) => (
+
+
+
+
{service.name}
+
{service.description}
+
+ {service.engines.map((engine) => (
+
+ {engine}
+
+ ))}
+
+
+ ))}
+
+
+
+ {/* Code Examples Section */}
+
+
+
+
+
+ Built for Developers
+
+
+ Clean, intuitive APIs that just work. Native SDKs for every major language,
+ comprehensive documentation, and a CLI that makes deployment a breeze.
+
+
+ {/* Tabs */}
+
+ {Object.keys(codeExamples).map((tab) => (
+ setActiveTab(tab as keyof typeof codeExamples)}
+ className={clsx(
+ 'px-4 py-2 rounded-lg font-medium text-sm transition-colors capitalize',
+ activeTab === tab
+ ? 'bg-white/10 text-white'
+ : 'text-gray-400 hover:text-white'
+ )}
+ >
+ {tab}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {codeExamples[activeTab]}
+
+
+
+
+
+
+ {/* Features Section */}
+
+
+
+
+ Why LazyCache ?
+
+
+ Everything you need to build modern applications, with none of the infrastructure headaches.
+
+
+
+
+ {features.map((feature, i) => (
+
+
+
+
{feature.title}
+
{feature.description}
+
+ ))}
+
+
+
+ {/* Pricing Section */}
+
+
+
+
+ Simple, Transparent Pricing
+
+
+ Start free, scale as you grow. No hidden fees, no surprises.
+
+
+
+
+ {plans.map((plan) => (
+
+ {plan.popular && (
+
+ Most Popular
+
+ )}
+
+
+
{plan.name}
+
+ {plan.price}
+ {plan.period}
+
+
{plan.description}
+
+
+
+ {plan.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+ {plan.cta}
+
+
+ ))}
+
+
+
+ {/* Open Source CTA */}
+
+
+
+
+
+
+ 100% Open Source
+
+
+ LazyCache is MIT licensed. Deploy anywhere — your infrastructure, your rules.
+ Self-host for free or use our managed cloud.
+
+
+
+
+
+ {/* Footer */}
+
+
+
+
+
+
+
+ © {new Date().getFullYear()} LazyCache. MIT License.
+
+
+
+
= {
+ redis: { bg: 'bg-red-100', text: 'text-red-600' },
+ valkey: { bg: 'bg-blue-100', text: 'text-blue-600' },
+ postgresql: { bg: 'bg-blue-100', text: 'text-blue-700' },
+ pgvector: { bg: 'bg-purple-100', text: 'text-purple-600' },
+ s3: { bg: 'bg-orange-100', text: 'text-orange-600' },
+ minio: { bg: 'bg-pink-100', text: 'text-pink-600' },
+}
+
+// Parse Redis command respecting quoted strings
+function parseRedisCommand(cmd: string): string[] {
+ const parts: string[] = []
+ let current = ''
+ let inQuotes = false
+ let quoteChar = ''
+
+ for (let i = 0; i < cmd.length; i++) {
+ const char = cmd[i]
+
+ if (!inQuotes && (char === '"' || char === "'")) {
+ inQuotes = true
+ quoteChar = char
+ } else if (inQuotes && char === quoteChar) {
+ inQuotes = false
+ quoteChar = ''
+ } else if (!inQuotes && char === ' ') {
+ if (current) {
+ parts.push(current)
+ current = ''
+ }
+ } else {
+ current += char
+ }
+ }
+
+ if (current) {
+ parts.push(current)
+ }
+
+ return parts
+}
+
+export default function ServiceDetail() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+ const queryClient = useQueryClient()
+ const [copiedField, setCopiedField] = useState(null)
+ const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+ const [command, setCommand] = useState('')
+ const [commandResult, setCommandResult] = useState(null)
+ const [resetToken, setResetToken] = useState(null)
+ const [showResetToken, setShowResetToken] = useState(false)
+
+ const { data: serviceData, isLoading } = useQuery({
+ queryKey: ['service', id],
+ queryFn: () => servicesApi.get(id!),
+ enabled: !!id,
+ })
+
+ const deleteMutation = useMutation({
+ mutationFn: () => servicesApi.delete(id!),
+ onSuccess: () => {
+ toast.success('Service deleted')
+ queryClient.invalidateQueries({ queryKey: ['services'] })
+ navigate('/services')
+ },
+ onError: () => {
+ toast.error('Failed to delete service')
+ },
+ })
+
+ const resetCredentialsMutation = useMutation({
+ mutationFn: () => servicesApi.resetCredentials(id!),
+ onSuccess: (response) => {
+ if (response.data.token) {
+ setResetToken(response.data.token)
+ setShowResetToken(false)
+ }
+ toast.success('Credentials reset successfully')
+ queryClient.invalidateQueries({ queryKey: ['service', id] })
+ },
+ onError: () => {
+ toast.error('Failed to reset credentials')
+ },
+ })
+
+ // Redis command execution (only for cache services)
+ const executeCommandMutation = useMutation({
+ mutationFn: (cmd: string) => {
+ const parts = parseRedisCommand(cmd)
+ return redisApi.command(id!, parts)
+ },
+ onSuccess: (response) => {
+ setCommandResult(JSON.stringify(response.data.result, null, 2))
+ },
+ onError: (error: unknown) => {
+ const axiosError = error as { response?: { data?: { error?: { message?: string } } } }
+ const message = axiosError.response?.data?.error?.message || 'Command failed'
+ setCommandResult(`Error: ${message}`)
+ },
+ })
+
+ const copyToClipboard = (text: string, field: string) => {
+ navigator.clipboard.writeText(text)
+ setCopiedField(field)
+ setTimeout(() => setCopiedField(null), 2000)
+ toast.success('Copied!')
+ }
+
+ const handleExecuteCommand = (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!command.trim()) return
+ executeCommandMutation.mutate(command)
+ }
+
+ if (isLoading) {
+ return (
+
+
+ )
+ }
+
+ if (!serviceData?.data) {
+ return (
+
+ )
+ }
+
+ const svc = serviceData.data
+ const Icon = serviceTypeIcons[svc.service_type] || Database
+ const colors = engineColors[svc.engine] || { bg: 'bg-gray-100', text: 'text-gray-600' }
+ const isCacheService = svc.service_type === 'cache'
+
+ return (
+
+ {/* Header */}
+
+
+
+
+
+
+
{svc.name}
+
+ {svc.engine}
+
+
+
{svc.region} • {svc.service_type}
+
+
+
+ {svc.status}
+
+
+
+ {/* Connection Details */}
+
+
+ Connection Details
+
+
+ copyToClipboard(svc.rest_endpoint, 'rest')}
+ />
+ copyToClipboard(`${svc.endpoint}:${svc.port}`, 'endpoint')}
+ />
+
+
+
+ resetCredentialsMutation.mutate()}
+ disabled={resetCredentialsMutation.isPending}
+ className="btn btn-secondary flex items-center"
+ >
+ {resetCredentialsMutation.isPending ? (
+
+
+
+
+ {/* Service Info */}
+
+
+
Tier
+
+ {svc.tier}
+
+
+
+
Service Type
+
+ {svc.service_type}
+
+
+
+
Engine
+
+ {svc.engine}
+
+
+
+
+ {/* Limits */}
+ {svc.limits && Object.keys(svc.limits).length > 0 && (
+
+
Limits
+
+ {Object.entries(svc.limits).map(([key, value]) => (
+
+
{key.replace(/_/g, ' ')}
+
{String(value)}
+
+ ))}
+
+
+ )}
+
+ {/* CLI Console (only for cache services) */}
+ {isCacheService && (
+
+
+
+
+
+
+ {commandResult && (
+
+ )}
+
+
+
Example commands:
+
+ SET mykey "Hello World"
+ GET mykey
+ KEYS *
+ INCR counter
+
+
+
+ )}
+
+ {/* Danger Zone */}
+
+
Danger Zone
+
+ Once you delete a service, there is no going back. Please be certain.
+
+
setShowDeleteConfirm(true)}
+ className="btn btn-danger flex items-center"
+ >
+
+
+
+ {/* Delete confirmation modal */}
+ {showDeleteConfirm && (
+
+
+
setShowDeleteConfirm(false)}
+ />
+
+
+ Delete Service
+
+
+ Are you sure you want to delete "{svc.name}"? This action cannot
+ be undone.
+
+
+ setShowDeleteConfirm(false)}
+ className="btn btn-secondary"
+ >
+ Cancel
+
+ deleteMutation.mutate()}
+ disabled={deleteMutation.isPending}
+ className="btn btn-danger flex items-center"
+ >
+ {deleteMutation.isPending ? (
+
+
+
+
+
+ )}
+
+ {/* Reset Token Modal */}
+ {resetToken && (
+
+
+
+
+
+
+
+
+
+ New Credentials Generated
+
+
+
+
+
+
+ This token will only be shown once. Make sure to save it securely.
+
+
+
+
+
API Token
+
+
+ setShowResetToken(!showResetToken)}
+ className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-gray-700"
+ >
+ {showResetToken ? (
+
+
+
copyToClipboard(resetToken, 'resetToken')}
+ className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg"
+ >
+ {copiedField === 'resetToken' ? (
+
+
+
+
+
+ {
+ setResetToken(null)
+ setShowResetToken(false)
+ }}
+ className="btn btn-primary flex items-center"
+ >
+
+
+
+
+
+ )}
+
+ )
+}
+
+function ConnectionField({
+ label,
+ value,
+ copied,
+ onCopy,
+}: {
+ label: string
+ value: string
+ copied: boolean
+ onCopy: () => void
+}) {
+ return (
+
+
{label}
+
+
+ {copied ? (
+
+
+
+ )
+}
diff --git a/services/dashboard/src/pages/Services.tsx b/services/dashboard/src/pages/Services.tsx
new file mode 100644
index 0000000..2c277dc
--- /dev/null
+++ b/services/dashboard/src/pages/Services.tsx
@@ -0,0 +1,637 @@
+import { useState, useEffect } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { servicesApi, Service, ServiceType, ServiceEngine, AvailableEngine } from '../api/client'
+import toast from 'react-hot-toast'
+import {
+ Database as DatabaseIcon,
+ Plus,
+ Loader2,
+ X,
+ Copy,
+ Check,
+ HardDrive,
+ Cpu,
+ Archive
+} from 'lucide-react'
+import clsx from 'clsx'
+
+// Service type icons
+const serviceTypeIcons: Record
= {
+ cache: Cpu,
+ database: DatabaseIcon,
+ vector: HardDrive,
+ storage: Archive,
+}
+
+// Engine display info
+const engineInfo: Record = {
+ redis: { color: 'text-red-600', bgColor: 'bg-red-100' },
+ valkey: { color: 'text-blue-600', bgColor: 'bg-blue-100' },
+ postgresql: { color: 'text-blue-700', bgColor: 'bg-blue-100' },
+ pgvector: { color: 'text-purple-600', bgColor: 'bg-purple-100' },
+ s3: { color: 'text-orange-600', bgColor: 'bg-orange-100' },
+ minio: { color: 'text-pink-600', bgColor: 'bg-pink-100' },
+}
+
+export default function Services() {
+ const location = useLocation()
+ const queryClient = useQueryClient()
+ const [showCreateModal, setShowCreateModal] = useState(false)
+ const [newService, setNewService] = useState(null)
+ const [filterType, setFilterType] = useState('')
+
+ // Open modal if navigated with createNew state
+ useEffect(() => {
+ if (location.state?.createNew) {
+ setShowCreateModal(true)
+ }
+ }, [location.state])
+
+ const { data: servicesData, isLoading } = useQuery({
+ queryKey: ['services', filterType],
+ queryFn: () => servicesApi.list(filterType || undefined),
+ })
+
+ const { data: typesData } = useQuery({
+ queryKey: ['service-types'],
+ queryFn: () => servicesApi.getTypes(),
+ })
+
+ const services = servicesData?.data?.services || []
+ const serviceTypes = typesData?.data?.types || []
+
+ return (
+
+ {/* Header */}
+
+
+
Services
+
+ Manage your data services - Cache, Database, Vector, Storage
+
+
+
setShowCreateModal(true)}
+ className="btn btn-primary flex items-center"
+ >
+
+
+
+ {/* Filter tabs */}
+
+ setFilterType('')}
+ className={clsx(
+ 'px-4 py-2 rounded-lg text-sm font-medium transition-colors',
+ filterType === ''
+ ? 'bg-primary-100 text-primary-700'
+ : 'text-gray-600 hover:bg-gray-100'
+ )}
+ >
+ All
+
+ {serviceTypes.map((type) => {
+ const Icon = serviceTypeIcons[type.type]
+ return (
+ setFilterType(type.type)}
+ className={clsx(
+ 'px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2',
+ filterType === type.type
+ ? 'bg-primary-100 text-primary-700'
+ : 'text-gray-600 hover:bg-gray-100'
+ )}
+ >
+
+ )
+ })}
+
+
+ {/* Service list */}
+ {isLoading ? (
+
+
+
Loading services...
+
+ ) : services.length === 0 ? (
+
+
+
No services yet
+
+ Get started by creating your first service
+
+
setShowCreateModal(true)}
+ className="mt-6 btn btn-primary"
+ >
+ Create your first service
+
+
+ ) : (
+
+ {services.map((svc) => (
+
+ )}
+
+ {/* Create modal */}
+ {showCreateModal && (
+
setShowCreateModal(false)}
+ onCreated={(svc) => {
+ setNewService(svc)
+ setShowCreateModal(false)
+ queryClient.invalidateQueries({ queryKey: ['services'] })
+ }}
+ />
+ )}
+
+ {/* New service credentials modal */}
+ {newService && (
+ setNewService(null)}
+ />
+ )}
+
+
+
+
+
+ {service.engine}
+
+
+ {service.status}
+
+
+
{service.name}
+ {service.region}
+
+
+
+ Type
+
+ {service.service_type}
+
+
+
+ Tier
+
+ {service.tier}
+
+
+
(null)
+ const [selectedEngine, setSelectedEngine] = useState(null)
+ const [formData, setFormData] = useState({
+ name: '',
+ region: '',
+ })
+
+ const { data: typesData } = useQuery({
+ queryKey: ['service-types'],
+ queryFn: () => servicesApi.getTypes(),
+ })
+
+ const { data: enginesData } = useQuery({
+ queryKey: ['engines', selectedType],
+ queryFn: () => servicesApi.getEngines(selectedType!),
+ enabled: !!selectedType,
+ })
+
+ const serviceTypes = typesData?.data?.types || []
+ const engines = enginesData?.data?.engines || []
+
+ const createMutation = useMutation({
+ mutationFn: servicesApi.create,
+ onSuccess: (response) => {
+ toast.success('Service created!')
+ onCreated(response.data)
+ },
+ onError: (error: unknown) => {
+ const axiosError = error as { response?: { data?: { error?: { message?: string } } } }
+ const message = axiosError.response?.data?.error?.message || 'Failed to create service'
+ toast.error(message)
+ },
+ })
+
+ const handleTypeSelect = (type: ServiceType) => {
+ setSelectedType(type)
+ setSelectedEngine(null)
+ setStep('engine')
+ }
+
+ const handleEngineSelect = (engine: AvailableEngine) => {
+ setSelectedEngine(engine)
+ setFormData({ ...formData, region: engine.regions[0] || '' })
+ setStep('config')
+ }
+
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!selectedType || !selectedEngine) return
+
+ createMutation.mutate({
+ name: formData.name,
+ service_type: selectedType,
+ engine: selectedEngine.engine,
+ region: formData.region,
+ })
+ }
+
+ const handleBack = () => {
+ if (step === 'config') {
+ setStep('engine')
+ } else if (step === 'engine') {
+ setStep('type')
+ setSelectedType(null)
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+ {step !== 'type' && (
+
+ ←
+
+ )}
+
+ {step === 'type' && 'Choose Service Type'}
+ {step === 'engine' && 'Choose Engine'}
+ {step === 'config' && 'Configure Service'}
+
+
+
+
+
+
+ {/* Step 1: Service Type */}
+ {step === 'type' && (
+
+ {serviceTypes.map((type) => {
+ const Icon = serviceTypeIcons[type.type]
+ return (
+
handleTypeSelect(type.type)}
+ className="p-6 border border-gray-200 rounded-xl hover:border-primary-500 hover:bg-primary-50 transition-colors text-left group"
+ >
+
+
+ {type.name}
+ {type.description}
+
+ {type.engines.map((eng) => (
+
+ {eng}
+
+ ))}
+
+
+ )
+ })}
+
+ )}
+
+ {/* Step 2: Engine Selection */}
+ {step === 'engine' && (
+
+ {engines.map((engine) => {
+ const style = engineInfo[engine.engine] || { color: 'text-gray-600', bgColor: 'bg-gray-100' }
+ return (
+
handleEngineSelect(engine)}
+ className="w-full p-4 border border-gray-200 rounded-xl hover:border-primary-500 hover:bg-primary-50 transition-colors text-left flex items-start gap-4"
+ >
+
+
+ {engine.engine[0].toUpperCase()}
+
+
+
+
+
{engine.display_name}
+
+ {engine.engine}
+
+
+
{engine.description}
+
+ {engine.regions.length} regions
+ •
+ Free tier available
+
+
+ )
+ })}
+
+ )}
+
+ {/* Step 3: Configuration */}
+ {step === 'config' && selectedEngine && (
+
+ )}
+
+
+
(null)
+
+ const copyToClipboard = (text: string, field: string) => {
+ navigator.clipboard.writeText(text)
+ setCopiedField(field)
+ setTimeout(() => setCopiedField(null), 2000)
+ toast.success('Copied to clipboard!')
+ }
+
+ return (
+
+
+
+
+
+
+
+ Service Created!
+
+
+
+
+
+
+
+ Important: Save these credentials now. The token
+ won't be shown again.
+
+
+
+
+ copyToClipboard(service.rest_endpoint, 'endpoint')}
+ />
+
+ {service.token && (
+ copyToClipboard(service.token!, 'token')}
+ masked
+ />
+ )}
+
+
+ copyToClipboard(
+ `${service.endpoint}:${service.port}`,
+ 'native'
+ )
+ }
+ />
+
+
+
+
+
+
+
+
{label}
+
+ setShowValue(!showValue)}
+ className="p-2 text-gray-500 hover:text-gray-700"
+ >
+ {showValue ? 'Hide' : 'Show'}
+
+ )}
+
+ {copied ? (
+
+
+