Move search state into ToolControls and PromptControls, search response in history

- ToolControls and PromptControls now manage searchText as local state
  and filter their lists internally (matches on name + title/description)
- Removed searchText/onSearchChange props from ToolsScreen, PromptsScreen,
  and their associated stories
- HistoryListPanel search now also matches against stringified response
  payloads

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx

@@ -59,8 +59,9 @@ function matchesFilters(
   if (methodFilter && entry.method !== methodFilter) return false;
   if (searchText) {
     const term = searchText.toLowerCase();
+    const responseText = entry.response ? JSON.stringify(entry.response) : "";
     const searchable =
-      `${entry.method} ${entry.target ?? ""} ${entry.timestamp}`.toLowerCase();
+      `${entry.method} ${entry.target ?? ""} ${entry.timestamp} ${responseText}`.toLowerCase();
     if (!searchable.includes(term)) return false;
   }
   return true;

clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx

@@ -6,8 +6,6 @@ const meta: Meta<typeof PromptControls> = {
   title: "Groups/PromptControls",
   component: PromptControls,
   args: {
-    searchText: "",
-    onSearchChange: fn(),
     onRefreshList: fn(),
     onSelectPrompt: fn(),
     listChanged: false,
@@ -58,7 +56,6 @@ export const WithSelection: Story = {
 export const WithSearch: Story = {
   args: {
     prompts: samplePrompts,
-    searchText: "sum",
   },
 };
 

clients/web/src/components/groups/PromptControls/PromptControls.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { PromptListItem } from "../PromptListItem/PromptListItem";
@@ -6,8 +7,6 @@ import type { PromptItem } from "../../screens/PromptsScreen/PromptsScreen";
 export interface PromptControlsProps {
   prompts: PromptItem[];
   listChanged: boolean;
-  searchText: string;
-  onSearchChange: (text: string) => void;
   onRefreshList: () => void;
   onSelectPrompt: (name: string) => void;
 }
@@ -19,13 +18,15 @@ function listMaxHeight(): string {
 export function PromptControls({
   prompts,
   listChanged,
-  searchText,
-  onSearchChange,
   onRefreshList,
   onSelectPrompt,
 }: PromptControlsProps) {
-  const filteredPrompts = prompts.filter((p) =>
-    p.name.toLowerCase().includes(searchText.toLowerCase()),
+  const [searchText, setSearchText] = useState("");
+  const query = searchText.toLowerCase();
+  const filteredPrompts = prompts.filter(
+    (p) =>
+      p.name.toLowerCase().includes(query) ||
+      (p.description?.toLowerCase().includes(query) ?? false),
   );
 
   return (
@@ -37,7 +38,7 @@ export function PromptControls({
       <TextInput
         placeholder="Search prompts..."
         value={searchText}
-        onChange={(e) => onSearchChange(e.currentTarget.value)}
+        onChange={(e) => setSearchText(e.currentTarget.value)}
       />
       <ScrollArea.Autosize mah={listMaxHeight()}>
         <Stack gap="xs">

clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx

@@ -6,8 +6,6 @@ const meta: Meta<typeof ToolControls> = {
   title: "Groups/ToolControls",
   component: ToolControls,
   args: {
-    searchText: "",
-    onSearchChange: fn(),
     onRefreshList: fn(),
     onSelectTool: fn(),
     listChanged: false,
@@ -52,7 +50,6 @@ export const WithSelection: Story = {
 export const WithSearch: Story = {
   args: {
     tools: sampleTools,
-    searchText: "send",
   },
 };
 

clients/web/src/components/groups/ToolControls/ToolControls.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Group, ScrollArea, Stack, TextInput, Title } from "@mantine/core";
 import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
 import { ToolListItem } from "../ToolListItem/ToolListItem";
@@ -6,8 +7,6 @@ import type { ToolListItemProps } from "../ToolListItem/ToolListItem";
 export interface ToolControlsProps {
   tools: ToolListItemProps[];
   listChanged: boolean;
-  searchText: string;
-  onSearchChange: (text: string) => void;
   onRefreshList: () => void;
   onSelectTool: (name: string) => void;
 }
@@ -19,14 +18,16 @@ function listMaxHeight(): string {
 export function ToolControls({
   tools,
   listChanged,
-  searchText,
-  onSearchChange,
   onRefreshList,
   onSelectTool,
 }: ToolControlsProps) {
+  const [searchText, setSearchText] = useState("");
+  const query = searchText.toLowerCase();
   const filteredTools = searchText
-    ? tools.filter((tool) =>
-        tool.name.toLowerCase().includes(searchText.toLowerCase()),
+    ? tools.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(query) ||
+          (tool.title?.toLowerCase().includes(query) ?? false),
       )
     : tools;
 
@@ -39,7 +40,7 @@ export function ToolControls({
       <TextInput
         placeholder="Search tools..."
         value={searchText}
-        onChange={(e) => onSearchChange(e.currentTarget.value)}
+        onChange={(e) => setSearchText(e.currentTarget.value)}
       />
       <ScrollArea.Autosize mah={listMaxHeight()}>
         <Stack gap="xs">