78 lines
4.2 KiB
TypeScript
78 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { TerminalSquare, Filter, RefreshCw } from 'lucide-react';
|
|
|
|
const mockLogs = [
|
|
{ id: 1, time: '10:41:30', agent: 'Analyst', type: 'REJECT', cost: '$0.0012', prompt: 'Evaluate lot: "RTX 4090 Box Only" against criteria...', response: '{"verdict": "REJECT", "reason": "Listing explicitly states \'Box Only\', violating target criteria."}' },
|
|
{ id: 2, time: '10:40:12', agent: 'Analyst', type: 'APPROVE', cost: '$0.0025', prompt: 'Evaluate lot: "ThinkPad T14 Gen 3" against criteria...', response: '{"verdict": "APPROVE", "reason": "Matches specs, good condition, price $450 is significantly below $800 avg."}' },
|
|
{ id: 3, time: '10:39:45', agent: 'Strategist', type: 'OPTIMIZE', cost: '$0.0050', prompt: 'Analyze last 24h win rates on ShopGoodwill...', response: '{"action": "UPDATE_SCHEDULE", "target": "ShopGoodwill", "new_cron": "0 * * * *"}' },
|
|
];
|
|
|
|
export default function AILogPage() {
|
|
return (
|
|
<div className="container mx-auto px-4 py-8 h-[calc(100vh-64px)] flex flex-col">
|
|
<div className="flex justify-between items-end mb-6 shrink-0">
|
|
<div>
|
|
<h1 className="text-3xl font-bold font-mono tracking-tight mb-2">NEURAL_<span className="text-primary">TELEMETRY</span></h1>
|
|
<p className="text-muted-foreground">Raw input/output logs from all connected LLMs.</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button className="flex items-center gap-2 px-3 py-1.5 bg-card border border-border rounded font-mono text-xs hover:border-primary transition-colors">
|
|
<Filter className="w-3 h-3" /> FILTER
|
|
</button>
|
|
<button className="flex items-center gap-2 px-3 py-1.5 bg-card border border-border rounded font-mono text-xs hover:text-primary transition-colors">
|
|
<RefreshCw className="w-3 h-3" /> REFRESH
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 bg-card border border-border rounded-lg overflow-hidden flex flex-col">
|
|
<div className="grid grid-cols-12 gap-4 p-3 border-b border-border bg-background/50 font-mono text-xs text-muted-foreground shrink-0">
|
|
<div className="col-span-2">TIMESTAMP / AGENT</div>
|
|
<div className="col-span-1">TYPE</div>
|
|
<div className="col-span-4">PROMPT_PREVIEW</div>
|
|
<div className="col-span-4">RESPONSE_PREVIEW</div>
|
|
<div className="col-span-1 text-right">COST</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-auto p-2 space-y-2">
|
|
{mockLogs.map((log, i) => (
|
|
<motion.div
|
|
key={log.id}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
className="grid grid-cols-12 gap-4 p-3 bg-background border border-border/50 rounded font-mono text-sm hover:border-primary/50 transition-colors cursor-pointer"
|
|
>
|
|
<div className="col-span-2 flex flex-col justify-center">
|
|
<span className="text-primary">{log.time}</span>
|
|
<span className="text-xs text-muted-foreground">{log.agent}</span>
|
|
</div>
|
|
<div className="col-span-1 flex items-center">
|
|
<span className={`px-2 py-0.5 rounded text-xs ${log.type === 'APPROVE' ? 'bg-primary/20 text-primary' : log.type === 'REJECT' ? 'bg-destructive/20 text-destructive' : 'bg-accent/20 text-accent'}`}>
|
|
{log.type}
|
|
</span>
|
|
</div>
|
|
<div className="col-span-4 text-muted-foreground truncate flex items-center">
|
|
{log.prompt}
|
|
</div>
|
|
<div className="col-span-4 truncate flex items-center">
|
|
{log.response}
|
|
</div>
|
|
<div className="col-span-1 text-right flex items-center justify-end text-xs text-muted-foreground">
|
|
{log.cost}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
|
|
<div className="text-center p-8 text-muted-foreground font-mono text-sm">
|
|
<TerminalSquare className="w-8 h-8 mx-auto mb-2 opacity-50" />
|
|
End of stream. Waiting for new inferences...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|