Spaces:
Sleeping
Sleeping
File size: 3,620 Bytes
30cd0c9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import { Activity, Database, ListChecks, Wrench } from "lucide-react";
import type { Observability } from "@/services/agenticApi";
import { EmptyState, ErrorState, LoadingState } from "./AnalysisStates";
interface ObservabilityPanelProps {
observability: Observability | null;
loading?: boolean;
error?: string | null;
}
export function ObservabilityPanel({ observability, loading, error }: ObservabilityPanelProps) {
if (loading) return <LoadingState label="Loading observability" />;
if (error) return <ErrorState title="Observability unavailable" message={error} />;
if (!observability) return <EmptyState title="No observability yet" description="It appears after an AI answer completes." />;
return (
<section className="space-y-4">
<div className="flex items-center gap-2">
<Activity className="h-4 w-4 text-slate-600" />
<h3 className="text-sm font-semibold text-slate-900">Observability</h3>
</div>
{observability.planning && (
<div className="rounded-lg border border-slate-200 bg-white p-3">
<div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
<ListChecks className="h-3.5 w-3.5" /> Planning
</div>
{observability.planning.goal_restated && <p className="text-sm leading-6 text-slate-700">{observability.planning.goal_restated}</p>}
{observability.planning.steps && observability.planning.steps.length > 0 && (
<ol className="mt-2 space-y-1 text-xs text-slate-600">
{observability.planning.steps.map((step, index) => (
<li key={`${step.stage}-${index}`}>{step.step ?? index + 1}. {step.objective ?? step.stage}</li>
))}
</ol>
)}
</div>
)}
{observability.thinking && (
<div className="rounded-lg border border-slate-200 bg-white p-3">
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Thinking summary</p>
<p className="mt-2 text-sm leading-6 text-slate-700">{observability.thinking}</p>
</div>
)}
<div className="rounded-lg border border-slate-200 bg-white p-3">
<div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
<Wrench className="h-3.5 w-3.5" /> Tool calls
</div>
{observability.tool_calls.length === 0 ? (
<p className="text-xs text-slate-500">No tools were used.</p>
) : (
<div className="space-y-2">
{observability.tool_calls.map((tool, index) => (
<div key={`${tool.name}-${index}`} className="rounded-md bg-slate-50 px-3 py-2">
<p className="text-sm font-medium text-slate-800">{tool.name}</p>
<p className="text-xs text-slate-500">{tool.status ?? "completed"}</p>
</div>
))}
</div>
)}
</div>
<div className="rounded-lg border border-slate-200 bg-white p-3">
<div className="mb-2 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500">
<Database className="h-3.5 w-3.5" /> Sources
</div>
{observability.sources.length === 0 ? (
<p className="text-xs text-slate-500">No sources attached.</p>
) : (
<pre className="max-h-44 overflow-auto rounded-md bg-slate-950 p-3 text-[11px] leading-5 text-slate-100">
{JSON.stringify(observability.sources, null, 2)}
</pre>
)}
</div>
</section>
);
}
|