fix(vscode): filter the slash command menu by what was typed

The menu matched a query against command descriptions as a loose subsequence,
so the letters of "research" were found scattered through almost every
description and the list came back unfiltered. Typing then looked like it did
nothing but move a highlight that never left the first row.

Matching is now ranked, with every way of matching a command name ordered ahead
of a description match, and it stays forgiving about skipped letters and
dropped separators. The selection also resets when the query changes, since a
reordered list left it pointing at an unrelated command.

Author: elkaix

apps/vscode/test/slash-menu.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  NO_MATCH,
+  rankSlashCommands,
+  scoreCommand,
+} from "../webview-ui/src/components/inputarea/hooks/slash-command-match";
+
+function command(name: string, description = ""): { name: string; description: string; aliases: string[] } {
+  return { name, description, aliases: [] };
+}
+
+const RESEARCH_SKILL = command("skill:research-writing", "Write research reports.");
+const CUSTOM_THEME = command(
+  "custom-theme",
+  // Its letters spell "research" in order, which is exactly what the old
+  // subsequence match over descriptions matched on.
+  "Create or edit a pythinker-code custom color theme — a JSON file of color tokens, then reload the chat.",
+);
+
+function rank(commands: readonly ReturnType<typeof command>[], query: string): string[] {
+  return rankSlashCommands(commands, query).map((entry) => entry.name);
+}
+
+describe("scoreCommand", () => {
+  it("does not match a command whose description merely contains the query's letters", () => {
+    // The old subsequence match over descriptions let "research" through on
+    // "Create or edit ...", which made the menu look unfiltered.
+    expect(scoreCommand(CUSTOM_THEME, "research")).toBe(NO_MATCH);
+  });
+
+  it("finds a namespaced skill by the part the user actually types", () => {
+    expect(rank([CUSTOM_THEME, RESEARCH_SKILL], "research")).toEqual(["skill:research-writing"]);
+  });
+
+  it("ranks a name prefix above a name that only contains the query", () => {
+    expect(rank([command("sub-skill"), command("skills")], "skill")).toEqual(["skills", "sub-skill"]);
+  });
+
+  it("stays forgiving about dropped separators and skipped letters", () => {
+    expect(Number.isFinite(scoreCommand(RESEARCH_SKILL, "researchwriting"))).toBe(true);
+    expect(Number.isFinite(scoreCommand(RESEARCH_SKILL, "reswrit"))).toBe(true);
+  });
+
+  it("still falls back to the description when nothing matches the name", () => {
+    expect(Number.isFinite(scoreCommand(CUSTOM_THEME, "color"))).toBe(true);
+  });
+
+  it("ranks every name match above a description match", () => {
+    expect(rank([CUSTOM_THEME, command("theme-picker", "Nothing to see.")], "theme")).toEqual([
+      "theme-picker",
+      "custom-theme",
+    ]);
+  });
+});

apps/vscode/webview-ui/src/components/SlashCommandMenu.tsx

@@ -17,6 +17,20 @@ function highlightMatch(text: string, query: string): React.ReactNode {
 
   const lowerText = text.toLowerCase();
   const lowerQuery = query.toLowerCase();
+
+  // The common case is a contiguous match; highlighting it as one run reads far
+  // better than scattering bold letters across the whole name.
+  const at = lowerText.indexOf(lowerQuery);
+  if (at !== -1) {
+    return (
+      <>
+        {text.slice(0, at)}
+        <span className="text-foreground font-semibold">{text.slice(at, at + query.length)}</span>
+        {text.slice(at + query.length)}
+      </>
+    );
+  }
+
   const parts: React.ReactNode[] = [];
   let lastIdx = 0;
   let qi = 0;

apps/vscode/webview-ui/src/components/inputarea/hooks/slash-command-match.ts

@@ -0,0 +1,71 @@
+import type { SlashCommandInfo } from "shared/legacy-sdk";
+
+export const NO_MATCH = Number.POSITIVE_INFINITY;
+
+function isSubsequence(text: string, query: string): boolean {
+  let qi = 0;
+  for (let i = 0; i < text.length && qi < query.length; i++) {
+    if (text[i] === query[qi]) {
+      qi++;
+    }
+  }
+  return qi === query.length;
+}
+
+/** Separators are noise while typing: `researchwriting` should still find `skill:research-writing`. */
+function letters(text: string): string {
+  return text.toLowerCase().replaceAll(/[^a-z0-9]/g, "");
+}
+
+function matchesAnyWordPrefix(text: string, query: string): boolean {
+  return text
+    .toLowerCase()
+    .split(/[^a-z0-9]+/)
+    .some((word) => word.startsWith(query));
+}
+
+/**
+ * Lower is a better match, `NO_MATCH` means the command is filtered out. Every
+ * way of matching the name outranks the description: the name is what the user
+ * is typing, and matching a long description loosely lets nearly every command
+ * through — which is what made the menu look unfiltered.
+ */
+export function scoreCommand(command: SlashCommandInfo, query: string): number {
+  const name = command.name.toLowerCase();
+  const q = query.toLowerCase();
+  if (name.startsWith(q)) {
+    return 0;
+  }
+  // A namespaced skill (`skill:research-writing`) should also match on the part
+  // the user is actually thinking of, not only on its full prefix.
+  if (matchesAnyWordPrefix(name, q)) {
+    return 1;
+  }
+  if (name.includes(q)) {
+    return 2;
+  }
+  // Forgiving tier: skipped letters and dropped separators still match.
+  if (isSubsequence(letters(name), letters(q))) {
+    return 3;
+  }
+  const description = command.description;
+  if (matchesAnyWordPrefix(description, q)) {
+    return 4;
+  }
+  return description.toLowerCase().includes(q) ? 5 : NO_MATCH;
+}
+
+/** Commands that match `query`, best match first. An empty query keeps the original order. */
+export function rankSlashCommands(
+  commands: readonly SlashCommandInfo[],
+  query: string,
+): SlashCommandInfo[] {
+  if (!query) {
+    return [...commands];
+  }
+  return commands
+    .map((command) => ({ command, score: scoreCommand(command, query) }))
+    .filter((entry) => entry.score !== NO_MATCH)
+    .toSorted((left, right) => left.score - right.score)
+    .map((entry) => entry.command);
+}

apps/vscode/webview-ui/src/components/inputarea/hooks/useSlashMenu.ts

@@ -1,28 +1,14 @@
-import { useMemo, useState, useCallback } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useSettingsStore } from "@/stores";
 import type { SlashCommandInfo } from "shared/legacy-sdk";
+import { rankSlashCommands } from "./slash-command-match";
 
 interface ActiveToken {
   trigger: "/" | "@";
   start: number;
   query: string;
 }
 
-function fuzzyMatch(text: string, query: string): boolean {
-  if (!query) {
-    return true;
-  }
-  const lowerText = text.toLowerCase();
-  const lowerQuery = query.toLowerCase();
-  let qi = 0;
-  for (let i = 0; i < lowerText.length && qi < lowerQuery.length; i++) {
-    if (lowerText[i] === lowerQuery[qi]) {
-      qi++;
-    }
-  }
-  return qi === lowerQuery.length;
-}
-
 export function findActiveToken(text: string, cursorPos: number): ActiveToken | null {
   const beforeCursor = text.slice(0, cursorPos);
   const lastSpace = Math.max(beforeCursor.lastIndexOf(" "), beforeCursor.lastIndexOf("\n"), beforeCursor.lastIndexOf("\t"), -1);
@@ -56,17 +42,20 @@ export function useSlashMenu(activeToken: ActiveToken | null, onSelectCommand: (
     if (!showSlashMenu) {
       return [];
     }
-    const q = activeToken.query;
-    if (!q) {
-      return slashCommands;
-    }
-    return slashCommands.filter((cmd) => fuzzyMatch(cmd.name, q) || fuzzyMatch(cmd.description, q));
+    return rankSlashCommands(slashCommands, activeToken.query);
   }, [showSlashMenu, activeToken?.query, slashCommands]);
 
   const resetSlashMenu = useCallback(() => {
     setSelectedIndex(0);
   }, []);
 
+  // Every keystroke reorders the list, so a selection carried over from the
+  // previous query points at an unrelated command — or past the end of the list.
+  const query = showSlashMenu ? activeToken.query : "";
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
   const handleSlashMenuKey = useCallback(
     (e: React.KeyboardEvent): boolean => {
       if (!showSlashMenu || filteredCommands.length === 0) {