fix(tool): humanize ToolPicker group headings (CL-8483)

Slugs like slack and google-drive render as Slack / Google Drive. A
package string that is already a display name is kept. Drop the
uppercase shout. Escape and empty-copy split are unchanged.

Author: TheGreatAxios

src/ui/tool-picker.test.tsx

@@ -10,6 +10,7 @@ const ITEMS: ComponentProps<typeof ToolPicker>["items"] = [
   { id: "slack-react", name: "Add reaction", package: "slack" },
   { id: "linear-create", name: "Create issue", package: "linear", status: "pending" },
   { id: "linear-close", name: "Close issue", package: "linear", status: "disabled" },
+  { id: "gmail-send", name: "Send email", package: "google-drive" },
 ];
 
 function mount(props: Partial<ComponentProps<typeof ToolPicker>> = {}) {
@@ -28,11 +29,23 @@ function mount(props: Partial<ComponentProps<typeof ToolPicker>> = {}) {
 }
 
 describe("ToolPicker", () => {
-  test("groups items by package", () => {
+  test("groups items by package with humanized headings, not raw slugs", () => {
     const { container, unmount } = mount();
     const headings = [...container.querySelectorAll('p[role="presentation"], p')].map((el) => el.textContent);
-    expect(headings).toContain("slack");
-    expect(headings).toContain("linear");
+    expect(headings).toContain("Slack");
+    expect(headings).toContain("Linear");
+    expect(headings).toContain("Google Drive");
+    expect(headings).not.toContain("slack");
+    expect(headings).not.toContain("google-drive");
+    unmount();
+  });
+
+  test("keeps a package string that is already a display name", () => {
+    const { container, unmount } = mount({
+      items: [{ id: "x", name: "Post message", package: "Slack" }],
+    });
+    const headings = [...container.querySelectorAll("p")].map((el) => el.textContent);
+    expect(headings).toContain("Slack");
     unmount();
   });
 
@@ -149,7 +162,7 @@ describe("ToolPicker", () => {
     act(() => {
       input.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }));
     });
-    expect(options().length).toBe(4);
+    expect(options().length).toBe(5);
 
     const second = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
     act(() => {

src/ui/tool-picker.tsx

@@ -61,6 +61,16 @@ function groupByPackage(items: readonly ToolPickerItem[]): { readonly id: string
   return [...groups.entries()].map(([id, groupItems]) => ({ id, items: groupItems }));
 }
 
+/** Visible group title: a display name if the catalog already sent one, else a humanized slug. */
+function groupHeading(id: string): string {
+  if (/[A-Z]/.test(id) || /\s/.test(id)) return id;
+  return id
+    .split(/[-_./]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
 /**
  * Browse, search and select tools from a caller-supplied catalog, grouped by
  * package. Controlled like a form field (`value`/`onChange`) rather than
@@ -157,8 +167,8 @@ export function ToolPicker({
         ) : (
           groups.map((group) => (
             <div key={group.id} role="presentation" className="flex flex-col gap-1">
-              <p className="px-2 text-[11px] font-semibold tracking-[0.1em] text-muted-foreground uppercase">
-                {group.id}
+              <p className="px-2 text-[11px] font-semibold text-muted-foreground">
+                {groupHeading(group.id)}
               </p>
               <div className="flex flex-col gap-1">
                 {group.items.map((item) => (