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/index.html

@@ -1676,14 +1676,14 @@
         white-space: nowrap;
       }
 
-      /* Capability Badges */
-      .capability-badges {
+      /* Feature Coverage Badges */
+      .feature-coverage-badges {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
       }
 
-      .capability-badge {
+      .feature-coverage-badge {
         display: inline-flex;
         align-items: center;
         gap: 4px;
@@ -1693,17 +1693,17 @@
         font-weight: 500;
       }
 
-      .capability-badge.enabled {
+      .feature-coverage-badge.enabled {
         background: rgba(48, 209, 88, 0.12);
         color: var(--success);
       }
 
-      .capability-badge.disabled {
+      .feature-coverage-badge.disabled {
         background: rgba(255, 255, 255, 0.04);
         color: var(--muted-2);
       }
 
-      .capability-badge svg {
+      .feature-coverage-badge svg {
         flex-shrink: 0;
       }
 

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

@@ -18,7 +18,7 @@ import {
   Terminal,
   Wrench
 } from "lucide-react";
-import type { AgentCapabilitiesView } from "../../types/agents";
+import type { FeatureCoverageView } from "../../types/agents";
 
 const badges = [
   { key: "planMode", label: "Plan", icon: GitBranch },
@@ -42,14 +42,14 @@ const badges = [
 
 type BadgeItem = (typeof badges)[number];
 
-const getEnabled = (capabilities: AgentCapabilitiesView, key: BadgeItem["key"]) =>
-  Boolean((capabilities as Record<string, boolean | undefined>)[key]);
+const getEnabled = (featureCoverage: FeatureCoverageView, key: BadgeItem["key"]) =>
+  Boolean((featureCoverage as Record<string, boolean | undefined>)[key]);
 
-const CapabilityBadges = ({ capabilities }: { capabilities: AgentCapabilitiesView }) => {
+const FeatureCoverageBadges = ({ featureCoverage }: { featureCoverage: FeatureCoverageView }) => {
   return (
-    <div className="capability-badges">
+    <div className="feature-coverage-badges">
       {badges.map(({ key, label, icon: Icon }) => (
-        <span key={key} className={`capability-badge ${getEnabled(capabilities, key) ? "enabled" : "disabled"}`}>
+        <span key={key} className={`feature-coverage-badge ${getEnabled(featureCoverage, key) ? "enabled" : "disabled"}`}>
           <Icon size={12} />
           <span>{label}</span>
         </span>
@@ -58,4 +58,4 @@ const CapabilityBadges = ({ capabilities }: { capabilities: AgentCapabilitiesVie
   );
 };
 
-export default CapabilityBadges;
+export default FeatureCoverageBadges;

frontend/packages/inspector/src/components/debug/AgentsTab.tsx

@@ -1,7 +1,7 @@
 import { Download, RefreshCw } from "lucide-react";
 import type { AgentInfo, AgentModeInfo } from "sandbox-agent";
-import CapabilityBadges from "../agents/CapabilityBadges";
-import { emptyCapabilities } from "../../types/agents";
+import FeatureCoverageBadges from "../agents/FeatureCoverageBadges";
+import { emptyFeatureCoverage } from "../../types/agents";
 
 const AgentsTab = ({
   agents,
@@ -41,7 +41,7 @@ const AgentsTab = ({
             installed: false,
             version: undefined,
             path: undefined,
-            capabilities: emptyCapabilities
+            capabilities: emptyFeatureCoverage
           }))).map((agent) => (
         <div key={agent.id} className="card">
           <div className="card-header">
@@ -54,8 +54,11 @@ const AgentsTab = ({
             {agent.version ? `v${agent.version}` : "Version unknown"}
             {agent.path && <span className="mono muted" style={{ marginLeft: 8 }}>{agent.path}</span>}
           </div>
+          <div className="card-meta" style={{ marginTop: 8 }}>
+            Feature coverage
+          </div>
           <div style={{ marginTop: 8 }}>
-            <CapabilityBadges capabilities={agent.capabilities ?? emptyCapabilities} />
+            <FeatureCoverageBadges featureCoverage={agent.capabilities ?? emptyFeatureCoverage} />
           </div>
           {modesByAgent[agent.id] && modesByAgent[agent.id].length > 0 && (
             <div className="card-meta" style={{ marginTop: 8 }}>

frontend/packages/inspector/src/types/agents.ts

@@ -1,6 +1,6 @@
 import type { AgentCapabilities } from "sandbox-agent";
 
-export type AgentCapabilitiesView = AgentCapabilities & {
+export type FeatureCoverageView = AgentCapabilities & {
   toolResults?: boolean;
   textMessages?: boolean;
   images?: boolean;
@@ -16,7 +16,7 @@ export type AgentCapabilitiesView = AgentCapabilities & {
   itemStarted?: boolean;
 };
 
-export const emptyCapabilities: AgentCapabilitiesView = {
+export const emptyFeatureCoverage: FeatureCoverageView = {
   planMode: false,
   permissions: false,
   questions: false,