feat(home): searchable skill picker in quick-action editor

packages/ui/src/features/home/config/ActionEditorPanel.tsx

@@ -10,6 +10,8 @@ import { useWorkflowEditorStore } from "@posthog/ui/features/home/stores/workflo
 import { UnifiedModelSelector } from "@posthog/ui/features/sessions/components/UnifiedModelSelector";
 import { useSettingsStore } from "@posthog/ui/features/settings/settingsStore";
 import { usePreviewConfig } from "@posthog/ui/features/task-detail/hooks/usePreviewConfig";
+import { Combobox } from "@posthog/ui/primitives/combobox/Combobox";
+import type { ComboboxSearchKeys } from "@posthog/ui/primitives/combobox/useComboboxFilter";
 import { Card, Flex, Text, TextArea, TextField } from "@radix-ui/themes";
 import { useMemo } from "react";
 import { SITUATION_TONE } from "./workflowMapLayout";
@@ -21,6 +23,17 @@ interface Props {
   indexInSituation: number;
 }
 
+type SkillOption = ReturnType<typeof useSkillsForPicker>["skills"][number];
+
+// Name-first so a prefix match on the name wins the exact-match promotion.
+const skillSearchValue = (s: SkillOption) => `${s.name} ${s.description}`;
+
+// Weight the skill name above its description so a name hit ranks first.
+const SKILL_SEARCH_KEYS: ComboboxSearchKeys<SkillOption> = [
+  { name: "name", weight: 0.7 },
+  { name: "description", weight: 0.3 },
+];
+
 export function ActionEditorPanel({
   situationId,
   action,
@@ -99,20 +112,48 @@ export function ActionEditorPanel({
           </Field>
 
           <Field label="Skill">
-            <select
+            <Combobox.Root
               value={action.skillId}
-              onChange={(e) => patch({ skillId: e.target.value })}
-              className="rounded-md border border-(--gray-6) bg-(--gray-1) px-2 py-1.5 text-[12px] text-gray-12"
+              onValueChange={(v) => patch({ skillId: v })}
+              size="2"
             >
-              <option value="">
-                {isLoading ? "Loading…" : "Pick a skill"}
-              </option>
-              {skills.map((s) => (
-                <option key={s.name} value={s.name}>
-                  {s.name}
-                </option>
-              ))}
-            </select>
+              <Combobox.Trigger
+                className="w-full"
+                placeholder={isLoading ? "Loading…" : "Pick a skill"}
+              >
+                {selectedSkill?.name}
+              </Combobox.Trigger>
+              <Combobox.Content
+                items={skills}
+                getValue={skillSearchValue}
+                searchKeys={SKILL_SEARCH_KEYS}
+                className="w-(--radix-popover-trigger-width)"
+              >
+                {({ filtered, hasMore, moreCount }) => (
+                  <>
+                    <Combobox.Input placeholder="Search skills..." />
+                    <Combobox.Empty>
+                      {isLoading ? "Loading skills…" : "No matching skills"}
+                    </Combobox.Empty>
+                    {filtered.map((s) => (
+                      <Combobox.Item
+                        key={s.name}
+                        value={s.name}
+                        textValue={s.name}
+                        description={s.description}
+                      >
+                        {s.name}
+                      </Combobox.Item>
+                    ))}
+                    {hasMore && (
+                      <Combobox.Label>
+                        {moreCount} more; type to filter
+                      </Combobox.Label>
+                    )}
+                  </>
+                )}
+              </Combobox.Content>
+            </Combobox.Root>
             {selectedSkill ? (
               <Text className="mt-1 text-[10px] text-gray-10">
                 {selectedSkill.description}

packages/ui/src/primitives/combobox/Combobox.css

@@ -196,6 +196,31 @@
   white-space: nowrap;
 }
 
+.combobox-item-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.combobox-item-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.85em;
+  line-height: 1.3;
+  color: var(--gray-10);
+}
+
+/* Two-line items grow to fit the description and top-align their content. */
+.combobox-content [cmdk-item]:has(.combobox-item-description) {
+  height: auto;
+  align-items: flex-start;
+  padding-top: var(--combobox-content-padding);
+  padding-bottom: var(--combobox-content-padding);
+}
+
 .combobox-content.size-1 [cmdk-item] {
   font-size: 13px;
   line-height: 20px;
@@ -252,6 +277,12 @@
   justify-content: center;
 }
 
+/* Keep the check aligned to the first line on two-line items. */
+.combobox-content [cmdk-item]:has(.combobox-item-description)
+  .combobox-item-indicator {
+  align-self: flex-start;
+}
+
 .combobox-content [cmdk-empty] {
   display: flex;
   align-items: center;

packages/ui/src/primitives/combobox/Combobox.stories.tsx

@@ -369,6 +369,68 @@ export const FilteredContent: Story = {
   },
 };
 
+const skills = [
+  {
+    value: "investigate-metric",
+    label: "investigate-metric",
+    description: "Diagnose why a metric moved and surface the drivers.",
+  },
+  {
+    value: "querying-posthog-data",
+    label: "querying-posthog-data",
+    description: "Write and run HogQL against the project's event data.",
+  },
+  {
+    value: "creating-experiments",
+    label: "creating-experiments",
+    description:
+      "Define a hypothesis, configure rollout, and set up analytics for an A/B test.",
+  },
+  {
+    value: "investigating-replay",
+    label: "investigating-replay",
+    description: "Find and watch session replays relevant to an issue.",
+  },
+];
+
+export const WithDescriptions: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+
+    return (
+      <Combobox.Root value={value} onValueChange={setValue} size="2">
+        <Combobox.Trigger placeholder="Pick a skill..." className="w-[280px]" />
+        <Combobox.Content
+          items={skills}
+          getValue={(s) => `${s.label} ${s.description}`}
+        >
+          {({ filtered, hasMore, moreCount }) => (
+            <>
+              <Combobox.Input placeholder="Search skills..." />
+              <Combobox.Empty>No matching skills</Combobox.Empty>
+              {filtered.map((skill) => (
+                <Combobox.Item
+                  key={skill.value}
+                  value={skill.value}
+                  textValue={skill.label}
+                  description={skill.description}
+                >
+                  {skill.label}
+                </Combobox.Item>
+              ))}
+              {hasMore && (
+                <Combobox.Label>
+                  {moreCount} more; type to filter
+                </Combobox.Label>
+              )}
+            </>
+          )}
+        </Combobox.Content>
+      </Combobox.Root>
+    );
+  },
+};
+
 export const ControlledSearch: Story = {
   render: () => {
     const [value, setValue] = useState("");