sandbox-agent/frontend/packages/inspector/src/components/agents/FeatureCoverageBadges.tsx
2026-03-10 22:49:41 -07:00

63 lines
2.1 KiB
TypeScript

import type { ComponentType } from "react";
import {
Activity,
AlertTriangle,
Brain,
CircleDot,
Download,
FileDiff,
Gauge,
GitBranch,
HelpCircle,
Image,
Layers,
MessageSquare,
Paperclip,
PlayCircle,
Plug,
Shield,
Terminal,
Wrench,
} from "lucide-react";
import type { FeatureCoverageView } from "../../types/agents";
const badges = [
{ key: "planMode", label: "Plan", icon: GitBranch },
{ key: "permissions", label: "Perms", icon: Shield },
{ key: "questions", label: "Q&A", icon: HelpCircle },
{ key: "toolCalls", label: "Tool Calls", icon: Wrench },
{ key: "toolResults", label: "Tool Results", icon: Download },
{ key: "textMessages", label: "Text", icon: MessageSquare },
{ key: "images", label: "Images", icon: Image },
{ key: "fileAttachments", label: "Files", icon: Paperclip },
{ key: "sessionLifecycle", label: "Lifecycle", icon: PlayCircle },
{ key: "errorEvents", label: "Errors", icon: AlertTriangle },
{ key: "reasoning", label: "Reasoning", icon: Brain },
{ key: "status", label: "Status", icon: Gauge },
{ key: "commandExecution", label: "Commands", icon: Terminal },
{ key: "fileChanges", label: "File Changes", icon: FileDiff },
{ key: "mcpTools", label: "MCP", icon: Plug },
{ key: "streamingDeltas", label: "Deltas", icon: Activity },
{ key: "itemStarted", label: "Item Start", icon: CircleDot },
{ key: "variants", label: "Variants", icon: Layers },
] as const;
type BadgeItem = (typeof badges)[number];
const getEnabled = (featureCoverage: FeatureCoverageView, key: BadgeItem["key"]) =>
Boolean((featureCoverage as unknown as Record<string, boolean | undefined>)[key]);
const FeatureCoverageBadges = ({ featureCoverage }: { featureCoverage: FeatureCoverageView }) => {
return (
<div className="feature-coverage-badges">
{badges.map(({ key, label, icon: Icon }) => (
<span key={key} className={`feature-coverage-badge ${getEnabled(featureCoverage, key) ? "enabled" : "disabled"}`}>
<Icon size={12} />
<span>{label}</span>
</span>
))}
</div>
);
};
export default FeatureCoverageBadges;