135 lines
3.8 KiB
React
135 lines
3.8 KiB
React
import React from "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>
|
|
);
|
|
};
|
|
|
|
const validationIcons = {
|
|
valid: "✅",
|
|
partial: "⚠️",
|
|
invalid: "❌",
|
|
};
|
|
|
|
export default function DiagnosticsView({ result }) {
|
|
if (!result) return null;
|
|
|
|
const diagnostics = result.diagnostics || result;
|
|
|
|
const metrics = [
|
|
{ label: "Model", value: diagnostics.modelName || result.modelName || "?" },
|
|
{ label: "Provider", value: "Ollama" },
|
|
{
|
|
label: "Prompt version",
|
|
value: diagnostics.promptVersion || result.promptVersion || "?",
|
|
},
|
|
{
|
|
label: "Duration",
|
|
value:
|
|
diagnostics.responseDurationMs != null
|
|
? `${diagnostics.responseDurationMs}ms`
|
|
: "?",
|
|
},
|
|
{
|
|
label: "Validation",
|
|
value: (
|
|
<ValidationIndicator
|
|
status={diagnostics.validationStatus || result.validationStatus || "invalid"}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
label: "Node count",
|
|
value:
|
|
diagnostics.nodeCount != null
|
|
? diagnostics.nodeCount
|
|
: diagnostics.graphNodeCount != null
|
|
? diagnostics.graphNodeCount
|
|
: "?",
|
|
},
|
|
{
|
|
label: "Edge count",
|
|
value:
|
|
diagnostics.edgeCount != null
|
|
? diagnostics.edgeCount
|
|
: diagnostics.graphEdgeCount != null
|
|
? diagnostics.graphEdgeCount
|
|
: "?",
|
|
},
|
|
{
|
|
label: "Graph references",
|
|
value:
|
|
diagnostics.graphReferenceValidation == null
|
|
? "?"
|
|
: diagnostics.graphReferenceValidation.valid
|
|
? `${validationIcons.valid} valid`
|
|
: `${validationIcons.invalid} invalid`,
|
|
},
|
|
];
|
|
|
|
const errors = [
|
|
...(result.errors || []),
|
|
...(result.validationErrors || []),
|
|
...(result.graphValidationErrors || []),
|
|
...(result.proposalErrors || []),
|
|
...(result.providerErrors || []),
|
|
...(result.analysisErrors || []),
|
|
];
|
|
|
|
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>
|
|
|
|
{/* Collapsed raw output for debugging */}
|
|
{result.rawResponse && (
|
|
<details className="mt-4">
|
|
<summary className="cursor-pointer text-xs text-gray-500 underline hover:text-gray-700">
|
|
View raw model response (
|
|
{(result.rawResponse?.length || 0).toLocaleString()} chars)
|
|
</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>
|
|
)}
|
|
|
|
{/* Errors if present */}
|
|
{errors.length > 0 && (
|
|
<details className="mt-3">
|
|
<summary className="cursor-pointer text-xs text-red-500 underline hover:text-red-700">
|
|
Validation errors ({errors.length})
|
|
</summary>
|
|
<ul className="mt-1 space-y-0.5 text-xs text-red-600">
|
|
{errors.map((err, i) => (
|
|
<li key={i}>{typeof err === "string" ? err : err?.message || JSON.stringify(err)}</li>
|
|
))}
|
|
</ul>
|
|
</details>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|