swarm-ui, swarm-controller: the review try-out's repo and PR fields offer the repos and PRs to pick

Two read-only routes feed them: GET /api/pulls/repos lists the repos with an
open pull request, and GET /api/pulls?repo=owner/name lists a repo's open
pull requests, highest number first. The page offers the lists through the
browser's own suggestion list and keeps both fields free text, since a run
also works on a merged or closed PR.

frontend/packages/swarm-ui/src/ui/text-field/TextField.tsx

@@ -5,6 +5,13 @@
 // build ahead of a caller" rule the rest of `ui/` follows.
 import { FormField } from "../form-field/FormField.js";
 
+/** One value the field offers to complete to. */
+export interface TextFieldSuggestion {
+  value: string;
+  /** Shown beside the value in the browser's list. */
+  label?: string;
+}
+
 export function TextField({
   id,
   label,
@@ -15,6 +22,7 @@ export function TextField({
   title,
   required,
   placeholder,
+  suggestions,
 }: {
   id: string;
   label: string;
@@ -25,7 +33,11 @@ export function TextField({
   title?: string;
   required?: boolean;
   placeholder?: string;
+  /** Values to pick from. The field stays free text: a value that is not in
+   * the list can still be typed. */
+  suggestions?: TextFieldSuggestion[];
 }) {
+  const listId = `${id}-suggestions`;
   return (
     <FormField label={label} htmlFor={id}>
       <input
@@ -37,8 +49,16 @@ export function TextField({
         title={title}
         required={required}
         placeholder={placeholder}
+        list={suggestions ? listId : undefined}
         onInput={(e) => onInput((e.target as HTMLInputElement).value)}
       />
+      {suggestions ? (
+        <datalist id={listId}>
+          {suggestions.map((s) => (
+            <option key={s.value} value={s.value} label={s.label} />
+          ))}
+        </datalist>
+      ) : null}
     </FormField>
   );
 }