Apply user agent result filtering feedback

frontend/src/main.tsx

@@ -544,6 +544,7 @@ function App() {
   const [selectedCurvePath, setSelectedCurvePath] = useState("");
   const [resultFamilyFilter, setResultFamilyFilter] = useState("all");
   const [resultRoleFilter, setResultRoleFilter] = useState("all");
+  const [resultQuery, setResultQuery] = useState("");
   const [selectedGpuIds, setSelectedGpuIds] = useState<number[]>([]);
   const [selectedCondaEnv, setSelectedCondaEnv] = useState("auto");
   const [uploadKind, setUploadKind] = useState<"images" | "labels" | "masks">("images");
@@ -616,11 +617,18 @@ function App() {
   const resultFamilyOptions = useMemo(() => ["all", ...Array.from(new Set(results.map((item) => item.family ?? "artifact"))).sort()], [results]);
   const resultRoleOptions = useMemo(() => ["all", ...Array.from(new Set(results.map((item) => item.role ?? "artifact"))).sort()], [results]);
   const filteredResults = useMemo(
-    () => results.filter((item) =>
-      (resultFamilyFilter === "all" || (item.family ?? "artifact") === resultFamilyFilter) &&
-      (resultRoleFilter === "all" || (item.role ?? "artifact") === resultRoleFilter)
-    ),
-    [resultFamilyFilter, resultRoleFilter, results]
+    () => {
+      const query = resultQuery.trim().toLowerCase();
+      return results.filter((item) => {
+        const family = item.family ?? "artifact";
+        const role = item.role ?? "artifact";
+        const text = `${item.name} ${item.relative_path} ${family} ${role}`.toLowerCase();
+        return (resultFamilyFilter === "all" || family === resultFamilyFilter) &&
+          (resultRoleFilter === "all" || role === resultRoleFilter) &&
+          (!query || text.includes(query));
+      });
+    },
+    [resultFamilyFilter, resultQuery, resultRoleFilter, results]
   );
   const modelWeightOptions = useMemo<ModelWeightOption[]>(() => {
     const options = new Map<string, ModelWeightOption>();
@@ -1732,8 +1740,10 @@ function App() {
               roleOptions={resultRoleOptions}
               familyFilter={resultFamilyFilter}
               roleFilter={resultRoleFilter}
+              query={resultQuery}
               onFamilyFilter={setResultFamilyFilter}
               onRoleFilter={setResultRoleFilter}
+              onQuery={setResultQuery}
             />
           </div>
         </section>
@@ -1910,8 +1920,10 @@ function ResultBrowser({
   roleOptions,
   familyFilter,
   roleFilter,
+  query,
   onFamilyFilter,
-  onRoleFilter
+  onRoleFilter,
+  onQuery
 }: {
   results: ResultItem[];
   total: number;
@@ -1919,12 +1931,23 @@ function ResultBrowser({
   roleOptions: string[];
   familyFilter: string;
   roleFilter: string;
+  query: string;
   onFamilyFilter: (value: string) => void;
   onRoleFilter: (value: string) => void;
+  onQuery: (value: string) => void;
 }) {
   return (
     <div className="resultBrowser">
       <div className="resultFilters">
+        <label className="wide">
+          <span>Run / Path</span>
+          <input
+            value={query}
+            onChange={(event) => onQuery(event.target.value)}
+            placeholder="run id, filename, path"
+            aria-label="result run or path"
+          />
+        </label>
         <label>
           <span>Family</span>
           <select value={familyFilter} onChange={(event) => onFamilyFilter(event.target.value)} aria-label="result family">

frontend/src/styles.css

@@ -1318,6 +1318,10 @@ textarea {
   gap: 8px;
 }
 
+.resultFilters .wide {
+  grid-column: 1 / -1;
+}
+
 .resultFilters label {
   min-width: 0;
   display: grid;
@@ -1329,7 +1333,8 @@ textarea {
   font-size: 11px;
 }
 
-.resultFilters select {
+.resultFilters select,
+.resultFilters input {
   width: 100%;
   height: 36px;
   padding: 0 9px;