feat(plugins): add search refinement to plugin catalog (#600)

frontend/src/components/PluginsPanel.jsx

@@ -13,6 +13,7 @@ const PLUGIN_ICONS = {
 
 export default function PluginsPanel({ sessionId, onClose }) {
   const [plugins, setPlugins] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
   const [selected, setSelected] = useState(null);
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
@@ -123,6 +124,15 @@ export default function PluginsPanel({ sessionId, onClose }) {
     }
   }
 
+  // Filter plugins in real-time by search query (#600)
+  const filteredPlugins = plugins.filter((p) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    const nameMatch = p.name?.toLowerCase().includes(q);
+    const descMatch = p.description?.toLowerCase().includes(q);
+    return nameMatch || descMatch;
+  });
+
   const handleCopy = async () => {
     if (!output) return;
     try {
@@ -181,7 +191,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
         </button>
       </div>
 
-      {/* Global Inline Error Banner (#588) */}
+      {/* Global Inline Error Banner */}
       {error && (
         <div
           data-testid="plugin-error-message"
@@ -203,31 +213,47 @@ export default function PluginsPanel({ sessionId, onClose }) {
         </div>
       )}
 
-      {/* Collapsible Panel Section (#592) */}
+      {/* Collapsible Panel Section */}
       {!isCollapsed && (
         <>
+          {/* Search Refinement Input (#600) */}
+          <div className="mb-3">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search plugins..."
+              aria-label="Filter plugins"
+              className="w-full text-xs bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-gray-200 placeholder-gray-500 outline-none focus:border-purple-500 transition"
+            />
+          </div>
+
           {/* Plugin selector row */}
-          <div data-testid="plugin-selector-list" className="flex flex-wrap gap-2 mb-4 md:mb-3 shrink-0">
-            {plugins.map((p) => (
-              <button
-                key={p.id}
-                type="button"
-                data-testid={`plugin-btn-${p.id}`}
-                onClick={() => handleSelectPlugin(p)}
-                className={`text-xs px-3.5 py-2 md:py-1.5 rounded-lg border transition font-medium touch-manipulation
-                  ${selected?.id === p.id ? "border-purple-500 bg-purple-900/30 text-purple-300 shadow-sm shadow-purple-500/10" : "border-gray-700 text-gray-400 hover:bg-gray-800"}`}
-              >
-                {(() => {
-                  const Icon = PLUGIN_ICONS[p.icon] || PlugIcon;
-                  return (
-                    <span className="inline-flex items-center gap-1">
-                      <Icon className="w-3.5 h-3.5" />
-                      <span>{p.name}</span>
-                    </span>
-                  );
-                })()}
-              </button>
-            ))}
+          <div data-testid="plugin-selector-list" className="flex flex-wrap gap-2 mb-4 md:mb-3 shrink-0 min-h-[32px]">
+            {filteredPlugins.length > 0 ? (
+              filteredPlugins.map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  data-testid={`plugin-btn-${p.id}`}
+                  onClick={() => handleSelectPlugin(p)}
+                  className={`text-xs px-3.5 py-2 md:py-1.5 rounded-lg border transition font-medium touch-manipulation
+                    ${selected?.id === p.id ? "border-purple-500 bg-purple-900/30 text-purple-300 shadow-sm shadow-purple-500/10" : "border-gray-700 text-gray-400 hover:bg-gray-800"}`}
+                >
+                  {(() => {
+                    const Icon = PLUGIN_ICONS[p.icon] || PlugIcon;
+                    return (
+                      <span className="inline-flex items-center gap-1">
+                        <Icon className="w-3.5 h-3.5" />
+                        <span>{p.name}</span>
+                      </span>
+                    );
+                  })()}
+                </button>
+              ))
+            ) : (
+              <p className="text-xs text-gray-500 italic py-1">No matching plugins found.</p>
+            )}
           </div>
 
           {/* Plugin Input/Output Area OR Empty-State Guidance */}
@@ -254,7 +280,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
                 </button>
               </div>
 
-              {/* Output block with copy feedback button (#594) */}
+              {/* Output block with copy feedback button */}
               {output && (
                 <div className="relative mt-2">
                   <div className="flex items-center justify-between bg-gray-800 border border-gray-700 rounded-t-xl px-3 py-1.5 text-xs text-gray-400">
@@ -274,7 +300,7 @@ export default function PluginsPanel({ sessionId, onClose }) {
               )}
             </div>
           ) : (
-            /* Empty State Guidance Card (#587) */
+            /* Empty State Guidance Card */
             <div className="flex-1 md:flex-initial flex flex-col items-center justify-center text-center p-6 my-2 border border-dashed border-gray-800 rounded-xl bg-gray-900/40">
               <PlugIcon className="w-8 h-8 text-gray-600 mb-2 animate-pulse" />
               <p className="text-xs font-medium text-gray-300">No Plugin Selected</p>

frontend/src/components/PluginsPanel.test.jsx

@@ -30,6 +30,47 @@ const mockPluginsList = [
   { id: "summarizer", name: "Summarizer", icon: "summarizer", description: "Summarizes provided text" },
 ];
 
+describe("PluginsPanel Search Refinement Suite (#600)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    api.getPlugins.mockResolvedValue({ plugins: mockPluginsList });
+    api.getPluginLogs.mockResolvedValue({ logs: [] });
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("filters plugins by search query matching name or description", async () => {
+    render(<PluginsPanel sessionId="test-search-session" onClose={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Calculator")).toBeInTheDocument();
+      expect(screen.getByText("Summarizer")).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByPlaceholderText(/Search plugins/i);
+    fireEvent.change(searchInput, { target: { value: "calc" } });
+
+    expect(screen.getByText("Calculator")).toBeInTheDocument();
+    expect(screen.queryByText("Summarizer")).not.toBeInTheDocument();
+  });
+
+  test("displays empty state message when search query matches no plugins", async () => {
+    render(<PluginsPanel sessionId="test-search-session" onClose={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Calculator")).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByPlaceholderText(/Search plugins/i);
+    fireEvent.change(searchInput, { target: { value: "unknown" } });
+
+    expect(screen.getByText("No matching plugins found.")).toBeInTheDocument();
+    expect(screen.queryByText("Calculator")).not.toBeInTheDocument();
+  });
+});
+
 describe("PluginsPanel Interaction Tests (#595)", () => {
   beforeEach(() => {
     vi.clearAllMocks();