i need to update the terminology of 'capabilities' to 'feature coverage' in the inspector ui and anywhere else its mentioned thats not in the actual api (#61)

frontend/packages/inspector/src/components/agents/FeatureCoverageBadges.tsx

@@ -0,0 +1,61 @@
+import type { ComponentType } from "react";
+import {
+  Activity,
+  AlertTriangle,
+  Brain,
+  CircleDot,
+  Download,
+  FileDiff,
+  Gauge,
+  GitBranch,
+  HelpCircle,
+  Image,
+  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 }
+] as const;
+
+type BadgeItem = (typeof badges)[number];
+
+const getEnabled = (featureCoverage: FeatureCoverageView, key: BadgeItem["key"]) =>
+  Boolean((featureCoverage 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;