first
This commit is contained in:
valenti
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Bot, Cpu, Zap, ShieldCheck } from "lucide-react";
|
||||
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||
import { Badge, JobStatusBadge } from "@/components/ui/Badge";
|
||||
import { EmptyState } from "@/components/ui/EmptyState";
|
||||
import { MetricCard } from "@/components/ui/MetricCard";
|
||||
|
||||
export default function AiAgentsPage() {
|
||||
return (
|
||||
<div className="p-6 lg:p-8 max-w-[1400px] mx-auto">
|
||||
<header className="mb-6 flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h1 className="text-2xl font-semibold tracking-tight text-slate-900 flex items-center gap-2">
|
||||
<Bot className="w-6 h-6 text-accent" />
|
||||
AI Agents
|
||||
</h1>
|
||||
<Badge tone="violet">α · Alpha</Badge>
|
||||
</div>
|
||||
<p className="mt-1 text-sm text-slate-500">
|
||||
ASF AI Gateway — provider-agnostic inference, policy routing and usage metering. Interfaces are ready, runtime behaviors are stabilizing.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge tone="brand"><Cpu className="w-3 h-3" /> Gateway abstraction OK</Badge>
|
||||
<Badge tone="green"><ShieldCheck className="w-3 h-3" /> No provider lock-in</Badge>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<MetricCard label="Models routable" value={6} tone="violet" icon={<Bot className="w-5 h-5" />} subtitle="NVIDIA DGX · OpenAI compat · local" />
|
||||
<MetricCard label="Active AI jobs" value={5} tone="brand" icon={<Zap className="w-5 h-5" />} delta={2.1} />
|
||||
<MetricCard label="Tenant policies" value={2} tone="green" icon={<ShieldCheck className="w-5 h-5" />} subtitle="Cost ceilings, model allowlists" />
|
||||
<MetricCard label="Queued prompts" value={12} tone="amber" icon={<Cpu className="w-5 h-5" />} />
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader>
|
||||
<CardTitle>Agent registry</CardTitle>
|
||||
<Badge tone="neutral">0 active · 5 templates</Badge>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<EmptyState
|
||||
title="No custom agents yet"
|
||||
description="Create a reusable AI agent by selecting a model, system prompt, tools and a cost policy. Templates below are ready to enable."
|
||||
icon={Bot}
|
||||
actionLabel="New AI agent"
|
||||
/>
|
||||
<div className="mt-6 divide-y divide-slate-100 border border-slate-100 rounded-lg overflow-hidden">
|
||||
{[
|
||||
{ name: "Traceability Analyst", desc: "Recommends missing links across the artifact graph.", model: "routing default", status: "queued" },
|
||||
{ name: "Test Generator", desc: "Generates unit tests for a selected Task artifact.", model: "code-model", status: "running" },
|
||||
{ name: "Incident Responder", desc: "Traces an incident backwards to its offending commit/PR.", model: "reasoning-model", status: "queued" },
|
||||
{ name: "Requirement Cleric", desc: "Refines ambiguous requirements and proposes acceptance criteria.", model: "reasoning-model", status: "completed" },
|
||||
{ name: "Impact Predictor", desc: "Estimates blast radius for a proposed requirement change.", model: "routing default", status: "queued" },
|
||||
].map((a) => (
|
||||
<div key={a.name} className="flex items-center gap-3 px-4 py-3 hover:bg-slate-50">
|
||||
<div className="w-9 h-9 rounded-lg bg-violet-50 border border-violet-100 grid place-items-center text-violet-600 shrink-0">
|
||||
<Bot className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-slate-800">{a.name}</div>
|
||||
<div className="text-xs text-slate-500">{a.desc}</div>
|
||||
</div>
|
||||
<Badge tone="neutral" className="hidden sm:inline-flex asf-monospace">{a.model}</Badge>
|
||||
<JobStatusBadge status={a.status} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>AI Gateway</CardTitle>
|
||||
<Badge tone="violet">Interfaces</Badge>
|
||||
</CardHeader>
|
||||
<CardBody className="space-y-3 text-sm">
|
||||
<div className="p-3 rounded-lg border border-violet-100 bg-violet-50/60">
|
||||
<div className="font-semibold text-violet-900 flex items-center gap-1.5">
|
||||
<Zap className="w-4 h-4" /> Provider adapter pattern
|
||||
</div>
|
||||
<p className="text-xs text-violet-800/80 mt-1 leading-relaxed">
|
||||
Business logic depends on <code className="bg-white/70 px-1 rounded">asf-ai</code> interfaces only. Real providers plug in without touching domain code.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="space-y-2 text-xs">
|
||||
{[
|
||||
"Model routing by task + tenant policy",
|
||||
"Usage metering (tokens, GPU-s, $)",
|
||||
"Priority queues + cost ceilings",
|
||||
"Audit log of every inference",
|
||||
].map((t) => (
|
||||
<li key={t} className="flex items-start gap-2 text-slate-600">
|
||||
<ShieldCheck className="w-3.5 h-3.5 text-emerald-600 mt-0.5 shrink-0" />
|
||||
{t}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="pt-3 border-t border-slate-100 text-xs text-slate-500">
|
||||
Hint: use <span className="asf-chip font-mono">⌘ K</span> → Ask ASF to try the interactive query interface.
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user