84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
|
|
||
|
|
const MODULES = [
|
||
|
|
'identity',
|
||
|
|
'orgboard',
|
||
|
|
'skills',
|
||
|
|
'integrations',
|
||
|
|
'memory',
|
||
|
|
'assembler',
|
||
|
|
'governance',
|
||
|
|
] as const
|
||
|
|
|
||
|
|
type Status = boolean | null // null = checking
|
||
|
|
|
||
|
|
function StatusDot({ ok }: { ok: Status }) {
|
||
|
|
const color = ok === null ? 'bg-amber-400' : ok ? 'bg-teal-400' : 'bg-rose-500'
|
||
|
|
return <span className={`inline-block h-2.5 w-2.5 rounded-full ${color}`} aria-hidden />
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function App() {
|
||
|
|
const [health, setHealth] = useState<Status>(null)
|
||
|
|
const [modules, setModules] = useState<Record<string, Status>>(
|
||
|
|
Object.fromEntries(MODULES.map((m) => [m, null])),
|
||
|
|
)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetch('/health')
|
||
|
|
.then((r) => setHealth(r.ok))
|
||
|
|
.catch(() => setHealth(false))
|
||
|
|
|
||
|
|
MODULES.forEach((m) => {
|
||
|
|
fetch(`/api/${m}/ping`)
|
||
|
|
.then((r) => setModules((s) => ({ ...s, [m]: r.ok })))
|
||
|
|
.catch(() => setModules((s) => ({ ...s, [m]: false })))
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main className="min-h-screen bg-indigo-950 text-slate-100">
|
||
|
|
<div className="mx-auto flex min-h-screen max-w-3xl flex-col justify-center px-6 py-16">
|
||
|
|
<p className="text-sm font-medium uppercase tracking-widest text-indigo-300">
|
||
|
|
A product of AliaSaaS
|
||
|
|
</p>
|
||
|
|
<h1 className="mt-2 text-5xl font-bold tracking-tight">TeamUp.AI</h1>
|
||
|
|
<p className="mt-3 text-lg text-indigo-200">
|
||
|
|
Build human + AI teams. A live org chart that does work.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="mt-10 rounded-xl border border-indigo-800/60 bg-indigo-900/40 p-5">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="font-medium">API health</span>
|
||
|
|
<span className="flex items-center gap-2 text-sm text-indigo-200">
|
||
|
|
<StatusDot ok={health} />
|
||
|
|
{health === null ? 'checking…' : health ? 'healthy' : 'unreachable'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 className="mt-10 text-sm font-semibold uppercase tracking-widest text-indigo-300">
|
||
|
|
Modules
|
||
|
|
</h2>
|
||
|
|
<ul className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
|
|
{MODULES.map((m) => (
|
||
|
|
<li
|
||
|
|
key={m}
|
||
|
|
className="flex items-center justify-between rounded-lg border border-indigo-800/50 bg-indigo-900/30 px-4 py-2.5"
|
||
|
|
>
|
||
|
|
<span className="capitalize">{m}</span>
|
||
|
|
<span className="flex items-center gap-2 text-sm text-indigo-200">
|
||
|
|
<StatusDot ok={modules[m]} />
|
||
|
|
{modules[m] === null ? '…' : modules[m] ? 'ok' : 'down'}
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p className="mt-12 text-xs text-indigo-400">
|
||
|
|
Pre-M1 skeleton · web + worker on one modular monolith · PostgreSQL 17 + pgvector
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|