51 lines
1.7 KiB
React
51 lines
1.7 KiB
React
const ValidationIndicator = ({ status }) => {
|
|
const styles = {
|
|
valid: "text-green-600",
|
|
partial: "text-yellow-600",
|
|
invalid: "text-red-600",
|
|
};
|
|
const labels = {
|
|
valid: "✅ Validation passed",
|
|
partial: "⚠️ Partial validation",
|
|
invalid: "❌ Validation failed",
|
|
};
|
|
return (
|
|
<div className={`flex items-center gap-2 ${styles[status] || "text-gray-500"}`}>
|
|
<span className="font-medium">{labels[status] || status}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default function DiagnosticsView({ result }) {
|
|
const metrics = [
|
|
{ label: "Model", value: result.modelName || "?" },
|
|
{ label: "Duration", value: result.responseDurationMs != null ? `${result.responseDurationMs}ms` : "?" },
|
|
{ label: "Validation", value: <ValidationIndicator status={result.validationStatus || "invalid"} /> },
|
|
];
|
|
|
|
return (
|
|
<div className="rounded border border-gray-200 bg-gray-50 p-4">
|
|
<h2 className="mb-3 text-sm font-semibold text-gray-500">Diagnostics</h2>
|
|
<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-sm">
|
|
{metrics.map(({ label, value }) => (
|
|
<div key={label}>
|
|
<dt className="text-gray-500">{label}</dt>
|
|
<dd>{value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
|
|
{result.rawResponse && (
|
|
<details className="mt-4">
|
|
<summary className="cursor-pointer text-xs text-gray-500 underline hover:text-gray-700">
|
|
View raw model response
|
|
</summary>
|
|
<pre className="mt-2 max-h-60 overflow-auto rounded bg-gray-900 px-3 py-2 text-xs leading-relaxed text-green-400">
|
|
{result.rawResponse}
|
|
</pre>
|
|
</details>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|