admin: completeness + UI consistency pass
Arcadia wiring: - home: real Overview dashboard (tenants/users/audit/health probe) replacing the inherited Vibespace welcome tiles; skeleton loaders, refresh button, registers admin context - profile: split into Account (synced via getUser/updateUser of session user) and local Preferences; updateSessionUser keeps the appbar in sync after edits - session: drop unused signIn mock, add updateSessionUser, refresh tests - profile schema: drop redundant Profile.name/email (session is the source of truth) - routes: delete orphaned resources route + lib Auth flows that previously 404'd: - /signup, /login/forgot, /login/reset, /login/2fa wired via @crema/arcadia-auth-ui - shared AuthShell + AuthBrand wrapper Assistant tools (admin-tools.ts): - +10 tools: deactivate_tenant, set_user_status, delete_user, list_memberships, list_roles, revoke_api_key, create_user, update_user, assign_role, remove_role - list_memberships gains user_id filter for "tenants this user belongs to" queries - search_kb / read_chunk: new token resolution (window override → VITE_ARCADIA_SEARCH_TOKEN service token → operator session JWT → "dev"); on 401/403 emit a tailored hint based on which token was used UI consistency: - new PageHeader component - AppShell.title was unrendered — dropped; first-child padding on #main-content keeps the floating actions pill from colliding with header content - removed dead "Sign in required" fallback cards from 14 routes (AppShell already redirects) - stripped p-6 from outer wrappers across 14 routes (was double-padding under AppShell's own p-6) - migrated home + tenants to PageHeader arcadia-search ergonomics: - scripts/mint-search-token.mjs + `npm run mint:search-token` mints HS512 JWT with required tenant_id claim, upserts VITE_ARCADIA_SEARCH_TOKEN into .env.local - README/.env document the new VITE_ARCADIA_SEARCH_URL / VITE_ARCADIA_SEARCH_TOKEN knobs - .env.local now gitignored Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
@@ -1,7 +1,23 @@
|
||||
import { ArrowRight, Sparkles, Boxes, Activity, BookOpen } from "lucide-react"
|
||||
import { useCallback, useEffect, useMemo, useState } from "react"
|
||||
import { Link } from "react-router"
|
||||
import {
|
||||
Activity,
|
||||
AlertTriangle,
|
||||
Building2,
|
||||
CheckCircle2,
|
||||
CircleAlert,
|
||||
HeartPulse,
|
||||
RefreshCw,
|
||||
Users as UsersIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { ArcadiaError, useArcadiaClient } from "@crema/arcadia-client"
|
||||
import { AlertBanner } from "@crema/feedback-ui"
|
||||
|
||||
import { AppShell } from "~/components/layout/app-shell"
|
||||
import { PageHeader } from "~/components/layout/page-header"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import { Skeleton } from "~/components/ui/skeleton"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -9,88 +25,406 @@ import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "~/components/ui/card"
|
||||
import { listAuditLogs, type AuditLog } from "~/lib/arcadia/audit-logs"
|
||||
import {
|
||||
getHealth,
|
||||
SUBSYSTEMS,
|
||||
type HealthStatus,
|
||||
type HealthSubsystem,
|
||||
type OverallHealth,
|
||||
} from "~/lib/arcadia/health"
|
||||
import { listTenants, type Tenant } from "~/lib/arcadia/tenants"
|
||||
import { listUsers, type User } from "~/lib/arcadia/users"
|
||||
import { useRegisterAdminContext } from "~/lib/admin-context"
|
||||
import { pageTitle } from "~/lib/page-meta"
|
||||
import { useSession } from "~/lib/session"
|
||||
|
||||
export const meta = () => pageTitle("Overview")
|
||||
|
||||
const tiles = [
|
||||
{
|
||||
to: "/assistant",
|
||||
icon: Sparkles,
|
||||
title: "Assistant",
|
||||
body: "AI-first surface — chat, suggestions, and full UI control.",
|
||||
accent: true,
|
||||
},
|
||||
{
|
||||
to: "/resources",
|
||||
icon: Boxes,
|
||||
title: "Resources",
|
||||
body: "Traditional list + detail surface for managed entities.",
|
||||
},
|
||||
{
|
||||
to: "/activity",
|
||||
icon: Activity,
|
||||
title: "Activity",
|
||||
body: "Event stream and audit log.",
|
||||
},
|
||||
{
|
||||
to: "/library",
|
||||
icon: BookOpen,
|
||||
title: "Library",
|
||||
body: "Saved items, templates, reusable artifacts.",
|
||||
},
|
||||
]
|
||||
interface DashboardData {
|
||||
tenants: Tenant[]
|
||||
users: User[]
|
||||
audit: AuditLog[]
|
||||
health: OverallHealth | null
|
||||
}
|
||||
|
||||
const EMPTY: DashboardData = { tenants: [], users: [], audit: [], health: null }
|
||||
|
||||
export default function HomeRoute() {
|
||||
return (
|
||||
<AppShell title="Overview">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Welcome</CardTitle>
|
||||
<CardDescription>
|
||||
A hybrid traditional + AI-first scaffold. Use the rail to navigate;
|
||||
the Assistant can drive the UI on your behalf — try{" "}
|
||||
<kbd className="rounded border bg-muted px-1.5 py-0.5 font-mono text-xs">
|
||||
⌘⇧P
|
||||
</kbd>{" "}
|
||||
for the script runner.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
const session = useSession()
|
||||
const arcadia = useArcadiaClient()
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{tiles.map((t) => {
|
||||
const Icon = t.icon
|
||||
return (
|
||||
const [data, setData] = useState<DashboardData>(EMPTY)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [refreshedAt, setRefreshedAt] = useState<Date | null>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setError(null)
|
||||
setLoading(true)
|
||||
const [tenants, users, audit, health] = await Promise.all([
|
||||
listTenants(arcadia).catch((err) => {
|
||||
throw err
|
||||
}),
|
||||
listUsers(arcadia),
|
||||
listAuditLogs(arcadia, { limit: 10 }),
|
||||
getHealth(arcadia).catch(() => null),
|
||||
]).catch((err) => {
|
||||
setError(err instanceof ArcadiaError ? err.message : "Failed to load overview.")
|
||||
return [[], [], [], null] as [Tenant[], User[], AuditLog[], OverallHealth | null]
|
||||
})
|
||||
setData({ tenants, users, audit, health })
|
||||
setRefreshedAt(new Date())
|
||||
setLoading(false)
|
||||
}, [arcadia])
|
||||
|
||||
useEffect(() => {
|
||||
if (session) refresh()
|
||||
}, [session, refresh])
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const activeTenants = data.tenants.filter((t) => t.status === "active").length
|
||||
const activeUsers = data.users.filter((u) => u.status === "active").length
|
||||
const errorEvents = data.audit.filter(
|
||||
(a) => a.severity === "error" || a.severity === "critical",
|
||||
).length
|
||||
return {
|
||||
tenants: { total: data.tenants.length, active: activeTenants },
|
||||
users: { total: data.users.length, active: activeUsers },
|
||||
audit: { recent: data.audit.length, errors: errorEvents },
|
||||
health: data.health?.status ?? "unconfigured",
|
||||
}
|
||||
}, [data])
|
||||
|
||||
useRegisterAdminContext("overview", stats)
|
||||
|
||||
return (
|
||||
<AppShell>
|
||||
<PageHeader
|
||||
title="Overview"
|
||||
description={
|
||||
<>
|
||||
Live snapshot of the platform — tenants, users, recent activity, and health.
|
||||
{refreshedAt ? (
|
||||
<>
|
||||
{" "}
|
||||
Refreshed {refreshedAt.toLocaleTimeString()}.
|
||||
</>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
actions={
|
||||
<Button
|
||||
data-action="overview-refresh"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={refresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className={loading ? "size-4 animate-spin" : "size-4"} />
|
||||
Refresh
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{error ? (
|
||||
<AlertBanner variant="error" dismissible onDismiss={() => setError(null)}>
|
||||
{error}
|
||||
</AlertBanner>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatTile
|
||||
to="/tenants"
|
||||
dataAction="overview-tile-tenants"
|
||||
icon={Building2}
|
||||
label="Tenants"
|
||||
value={stats.tenants.total}
|
||||
sub={`${stats.tenants.active} active`}
|
||||
loading={loading}
|
||||
/>
|
||||
<StatTile
|
||||
to="/users"
|
||||
dataAction="overview-tile-users"
|
||||
icon={UsersIcon}
|
||||
label="Users"
|
||||
value={stats.users.total}
|
||||
sub={`${stats.users.active} active`}
|
||||
loading={loading}
|
||||
/>
|
||||
<StatTile
|
||||
to="/activity"
|
||||
dataAction="overview-tile-activity"
|
||||
icon={Activity}
|
||||
label="Recent events"
|
||||
value={stats.audit.recent}
|
||||
sub={
|
||||
stats.audit.errors > 0
|
||||
? `${stats.audit.errors} error${stats.audit.errors === 1 ? "" : "s"}`
|
||||
: "no errors"
|
||||
}
|
||||
loading={loading}
|
||||
tone={stats.audit.errors > 0 ? "warning" : "default"}
|
||||
/>
|
||||
<StatTile
|
||||
to="/monitoring"
|
||||
dataAction="overview-tile-health"
|
||||
icon={HeartPulse}
|
||||
label="Platform health"
|
||||
value={statusLabel(stats.health)}
|
||||
sub={data.health ? `as of ${new Date(data.health.checked_at).toLocaleTimeString()}` : "unreachable"}
|
||||
loading={loading}
|
||||
tone={statusTone(stats.health)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="flex-row items-center justify-between gap-2">
|
||||
<div>
|
||||
<CardTitle>Recent activity</CardTitle>
|
||||
<CardDescription>
|
||||
Latest audit events across the platform.
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Link
|
||||
key={t.to}
|
||||
to={t.to}
|
||||
data-action={`home-tile-${t.title.toLowerCase()}`}
|
||||
className="group block"
|
||||
to="/activity"
|
||||
data-action="overview-activity-all"
|
||||
className="text-xs font-medium text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<Card
|
||||
className={[
|
||||
"h-full transition-colors",
|
||||
t.accent
|
||||
? "border-primary/30 bg-primary/5 hover:border-primary/50"
|
||||
: "hover:border-foreground/20",
|
||||
].join(" ")}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="mb-2 flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<Icon className="size-5" />
|
||||
</div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
{t.title}
|
||||
<ArrowRight className="size-4 opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
</CardTitle>
|
||||
<CardDescription>{t.body}</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
View all →
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RecentActivity logs={data.audit} loading={loading} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Subsystems</CardTitle>
|
||||
<CardDescription>
|
||||
Live probe of each platform subsystem.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<SubsystemList health={data.health} loading={loading} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
)
|
||||
}
|
||||
|
||||
function StatTile({
|
||||
to,
|
||||
dataAction,
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
sub,
|
||||
loading,
|
||||
tone = "default",
|
||||
}: {
|
||||
to: string
|
||||
dataAction: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
label: string
|
||||
value: number | string
|
||||
sub: string
|
||||
loading: boolean
|
||||
tone?: "default" | "warning" | "error" | "ok"
|
||||
}) {
|
||||
const accent =
|
||||
tone === "error"
|
||||
? "border-destructive/40 bg-destructive/5"
|
||||
: tone === "warning"
|
||||
? "border-amber-500/40 bg-amber-500/5"
|
||||
: tone === "ok"
|
||||
? "border-emerald-500/40 bg-emerald-500/5"
|
||||
: ""
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
data-action={dataAction}
|
||||
className="group block focus:outline-none"
|
||||
>
|
||||
<Card className={`h-full transition-colors hover:border-foreground/20 ${accent}`}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
||||
{label}
|
||||
</span>
|
||||
<Icon className="size-4 text-muted-foreground" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-1">
|
||||
{loading ? (
|
||||
<Skeleton className="h-9 w-20" />
|
||||
) : (
|
||||
<span className="text-3xl font-semibold tabular-nums">{value}</span>
|
||||
)}
|
||||
{loading ? (
|
||||
<Skeleton className="h-3 w-24" />
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">{sub}</span>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function RecentActivity({ logs, loading }: { logs: AuditLog[]; loading: boolean }) {
|
||||
if (loading && logs.length === 0) {
|
||||
return (
|
||||
<p className="py-4 text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Loading…
|
||||
</p>
|
||||
)
|
||||
}
|
||||
if (logs.length === 0) {
|
||||
return (
|
||||
<p className="py-4 text-sm text-muted-foreground">No recent events.</p>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ul className="flex flex-col divide-y">
|
||||
{logs.slice(0, 8).map((l) => (
|
||||
<li
|
||||
key={l.id}
|
||||
className="flex items-start justify-between gap-3 py-2.5 text-sm"
|
||||
>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="flex items-center gap-2">
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
|
||||
{l.action}
|
||||
</code>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{l.resource_type}
|
||||
{l.resource_id ? ` · ${l.resource_id.slice(0, 8)}…` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
{l.user?.email ?? "system"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col items-end gap-0.5">
|
||||
<SeverityDot severity={l.severity} />
|
||||
<time
|
||||
className="text-[11px] text-muted-foreground"
|
||||
dateTime={l.inserted_at}
|
||||
>
|
||||
{timeAgo(l.inserted_at)}
|
||||
</time>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function SubsystemList({
|
||||
health,
|
||||
loading,
|
||||
}: {
|
||||
health: OverallHealth | null
|
||||
loading: boolean
|
||||
}) {
|
||||
if (loading && !health) {
|
||||
return (
|
||||
<p className="py-4 text-sm text-muted-foreground">
|
||||
<RefreshCw className="mr-1 inline size-3.5 animate-spin" /> Probing…
|
||||
</p>
|
||||
)
|
||||
}
|
||||
if (!health) {
|
||||
return (
|
||||
<p className="py-4 text-sm text-muted-foreground">
|
||||
Health endpoint unreachable.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ul className="flex flex-col divide-y">
|
||||
{SUBSYSTEMS.map((sys) => {
|
||||
const sub = health.subsystems[sys]
|
||||
return (
|
||||
<li
|
||||
key={sys}
|
||||
className="flex items-center justify-between gap-3 py-2.5 text-sm"
|
||||
>
|
||||
<span className="font-medium capitalize">{labelFor(sys)}</span>
|
||||
<span className="flex items-center gap-2">
|
||||
<StatusIcon status={sub?.status ?? "unconfigured"} />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{sub?.message ?? statusLabel(sub?.status ?? "unconfigured")}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
function SeverityDot({ severity }: { severity: string }) {
|
||||
const tone =
|
||||
severity === "critical" || severity === "error"
|
||||
? "bg-destructive"
|
||||
: severity === "warning"
|
||||
? "bg-amber-500"
|
||||
: "bg-emerald-500"
|
||||
return (
|
||||
<span
|
||||
aria-label={severity}
|
||||
title={severity}
|
||||
className={`size-2 rounded-full ${tone}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function StatusIcon({ status }: { status: HealthStatus }) {
|
||||
if (status === "ok")
|
||||
return <CheckCircle2 className="size-4 text-emerald-500" aria-label="ok" />
|
||||
if (status === "degraded")
|
||||
return <AlertTriangle className="size-4 text-amber-500" aria-label="degraded" />
|
||||
if (status === "error")
|
||||
return <CircleAlert className="size-4 text-destructive" aria-label="error" />
|
||||
return <CircleAlert className="size-4 text-muted-foreground" aria-label="unconfigured" />
|
||||
}
|
||||
|
||||
function labelFor(sys: HealthSubsystem): string {
|
||||
if (sys === "api") return "API"
|
||||
if (sys === "db") return "Database"
|
||||
return sys
|
||||
}
|
||||
|
||||
function statusLabel(status: HealthStatus | string): string {
|
||||
if (status === "ok") return "Healthy"
|
||||
if (status === "degraded") return "Degraded"
|
||||
if (status === "error") return "Down"
|
||||
return "Unknown"
|
||||
}
|
||||
|
||||
function statusTone(status: HealthStatus | string): "default" | "ok" | "warning" | "error" {
|
||||
if (status === "ok") return "ok"
|
||||
if (status === "degraded") return "warning"
|
||||
if (status === "error") return "error"
|
||||
return "default"
|
||||
}
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const t = new Date(iso).getTime()
|
||||
if (Number.isNaN(t)) return ""
|
||||
const diff = Date.now() - t
|
||||
const sec = Math.round(diff / 1000)
|
||||
if (sec < 60) return `${sec}s ago`
|
||||
const min = Math.round(sec / 60)
|
||||
if (min < 60) return `${min}m ago`
|
||||
const hr = Math.round(min / 60)
|
||||
if (hr < 24) return `${hr}h ago`
|
||||
const d = Math.round(hr / 24)
|
||||
return `${d}d ago`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user