make skill picker a searchable combobox

Author: charlesvien

packages/ui/src/features/loops/components/LoopSkillFields.tsx

@@ -1,10 +1,21 @@
+import { CaretDown } from "@phosphor-icons/react";
 import { isUploadableSkillSource } from "@posthog/core/message-editor/skillTags";
 import { useHostTRPC } from "@posthog/host-router/react";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  Button as QuillButton,
+} from "@posthog/quill";
 import { SettingsOptionSelect } from "@posthog/ui/features/settings/SettingsOptionSelect";
 import { useHostCapabilities } from "@posthog/ui/shell/useHostCapabilities";
 import { TextArea } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import type { LoopFormValues } from "../loopFormTypes";
 import type { LoopSkillDraft } from "../loopSkill";
 import { Field } from "./LoopFormPrimitives";
@@ -31,6 +42,89 @@ function pickableSkillLabel(
   return `${skill.name} (${origin})`;
 }
 
+interface SkillOption {
+  value: string;
+  label: string;
+}
+
+/** Searchable skill picker, same quill Combobox shape as the repository picker
+ * on the new-task page. Items are the (unique) labels so cmdk's filter matches
+ * what the user sees. */
+function SkillCombobox({
+  options,
+  selectedValue,
+  disabled,
+  onValueChange,
+}: {
+  options: SkillOption[];
+  selectedValue: string;
+  disabled: boolean;
+  onValueChange: (value: string) => void;
+}) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const selectedLabel =
+    options.find((option) => option.value === selectedValue)?.label ?? null;
+
+  return (
+    <Combobox
+      items={options.map((option) => option.label)}
+      value={selectedLabel}
+      onValueChange={(label) => {
+        const picked = options.find((option) => option.label === label);
+        if (picked) {
+          onValueChange(picked.value);
+        }
+      }}
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen);
+        if (!nextOpen) {
+          setSearchQuery("");
+        }
+      }}
+      inputValue={searchQuery}
+      onInputValueChange={setSearchQuery}
+      disabled={disabled}
+    >
+      <ComboboxTrigger
+        render={
+          <QuillButton
+            ref={triggerRef}
+            variant="outline"
+            size="sm"
+            disabled={disabled}
+            aria-label="Skill"
+            className="w-full justify-between"
+          >
+            <span className="min-w-0 truncate">
+              {selectedLabel ?? "Pick a skill…"}
+            </span>
+            <CaretDown size={10} weight="bold" className="shrink-0" />
+          </QuillButton>
+        }
+      />
+      <ComboboxContent
+        anchor={triggerRef}
+        side="bottom"
+        sideOffset={6}
+        className="min-w-[280px]"
+      >
+        <ComboboxInput placeholder="Search skills..." />
+        <ComboboxEmpty>No skills found.</ComboboxEmpty>
+        <ComboboxList>
+          {(label: string) => (
+            <ComboboxItem key={label} value={label}>
+              {label}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
 export function LoopInstructionsFields({
   values,
   disabled,
@@ -148,12 +242,10 @@ export function LoopInstructionsFields({
             required
             hint="The skill is snapshotted when you save; every run installs that snapshot into its sandbox."
           >
-            <SettingsOptionSelect
-              ariaLabel="Skill"
-              value={selectedValue}
+            <SkillCombobox
               options={skillOptions}
+              selectedValue={selectedValue}
               disabled={disabled}
-              placeholder="Pick a skill…"
               onValueChange={handleSkillChange}
             />
           </Field>