From 090fed169b80942fd1237a8c5351eea43a51a6a8 Mon Sep 17 00:00:00 2001
From: George Pickett <gpickett00@gmail.com>
Date: Wed, 25 Feb 2026 15:53:15 -0800
Subject: [PATCH] Update AgentInspectPanels styles for skill eligibility
 indicators

- Adjusted styles for the skill eligibility indicator to enhance visibility and consistency.
- Changed font size and added border styles for eligible and blocked states.
- Implemented conditional styling for blocked skills to improve user experience.
---
 src/features/agents/components/AgentInspectPanels.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/features/agents/components/AgentInspectPanels.tsx b/src/features/agents/components/AgentInspectPanels.tsx
index 205e156..1076bf7 100644
--- a/src/features/agents/components/AgentInspectPanels.tsx
+++ b/src/features/agents/components/AgentInspectPanels.tsx
@@ -746,11 +746,16 @@ export const AgentSettingsPanel = ({
                             {skill.source}
                           </span>
                           <span
-                            className={`rounded px-1.5 py-0.5 font-mono text-[9px] ${
+                            className={`rounded border px-1.5 py-0.5 font-mono text-[10px] font-semibold ${
                               skill.eligible
-                                ? "bg-emerald-500/15 text-emerald-400"
-                                : "bg-amber-500/15 text-amber-300"
+                                ? "border-emerald-500/35 bg-emerald-500/15 text-emerald-300"
+                                : "border-amber-900"
                             }`}
+                            style={
+                              skill.eligible
+                                ? undefined
+                                : { backgroundColor: "#7c2d12", color: "#ffffff" }
+                            }
                           >
                             {skill.eligible ? "eligible" : "blocked"}
                           </span>