AI Agent Execution Log

"use client";

import React from "react";

const logs = [
    { step: "Reasoning", content: "User asked for population trends in SE Asia. I should query the global-stats tool.", time: "14ms" },
    { step: "Tool Call", content: "global_stats.get_demographics(region='SE_ASIA', year=2024)", time: "842ms" },
    { step: "Observation", content: "Returned 12 data points. 2.4% average growth detected.", time: "22ms" },
    { step: "Reasoning", content: "Growth is higher than average. Formulating response with regional breakdown.", time: "18ms" },
];

export default function AIAgentLog() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-4 shadow-sm w-full max-w-xl mx-auto overflow-hidden font-mono text-[11px]">
            <div className="flex items-center justify-between mb-4 border-b border-zinc-800 pb-3">
                <span className="text-zinc-500 uppercase font-black tracking-widest text-[10px]">Thoughts & Logs</span>
                <span className="text-zinc-400">SESSION: x-482-A</span>
            </div>
            <div className="space-y-4">
                {logs.map((log, i) => (
                    <div key={i} className="flex gap-4">
                        <div className="flex flex-col items-center">
                            <div className="h-2 w-2 rounded-full bg-zinc-700" />
                            {i < logs.length - 1 && <div className="w-[1px] flex-1 bg-zinc-800" />}
                        </div>
                        <div className="flex-1 pb-4">
                            <div className="flex items-center justify-between mb-1.5">
                                <span className="text-purple-400 font-bold uppercase tracking-wider">{log.step}</span>
                                <span className="text-zinc-600">{log.time}</span>
                            </div>
                            <div className="text-zinc-300 leading-relaxed bg-zinc-900/50 p-2.5 rounded-lg border border-zinc-800/50">
                                {log.content}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}