Function ToolTree

packages/react/src/components/tool-tree.tsx:291–442

(props: {
  tools: readonly ToolSummary[];
  selectedToolId: string | null;
  onSelect: (toolId: string) => void;
  /** When provided, each row gets a hover-revealed action menu that
   *  applies (or clears) a user policy for that exact node. Leaf rows
   *  emit the tool's full dotted id; group rows emit `prefix.*`. */
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string) => void;
  /** Maps the displayed row path into the persisted policy pattern. */
  patternForDisplay?: (displayPattern: string) => string;
  /** Sorted user-authored policies (most-precedent first). Used to
   *  decide whether a node has its own exact-pattern user rule today
   *  (so the menu can show a "Clear" option). Optional — when absent,
   *  the menu hides "Clear". */
  policies?: ReadonlyArray<{ readonly pattern: string; readonly action: ToolPolicyAction }>;
  /** When true, render top-level sections per (owner, connection) account, each
   *  badged with its owner (Personal / Workspace). The dotted-name tree renders
   *  beneath each section. The same tool name can appear under two accounts (NOT
   *  deduped). When false/unset, render one flat tree (unchanged). */
  groupByConnection?: boolean;
})

// ---------------------------------------------------------------------------

export function ToolTree(props: {
  tools: readonly ToolSummary[];
  selectedToolId: string | null;
  onSelect: (toolId: string) => void;
  /** When provided, each row gets a hover-revealed action menu that
   *  applies (or clears) a user policy for that exact node. Leaf rows
   *  emit the tool's full dotted id; group rows emit `prefix.*`. */
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string) => void;
  /** Maps the displayed row path into the persisted policy pattern. */
  patternForDisplay?: (displayPattern: string) => string;
  /** Sorted user-authored policies (most-precedent first). Used to
   *  decide whether a node has its own exact-pattern user rule today
   *  (so the menu can show a "Clear" option). Optional — when absent,
   *  the menu hides "Clear". */
  policies?: ReadonlyArray<{ readonly pattern: string; readonly action: ToolPolicyAction }>;
  /** When true, render top-level sections per (owner, connection) account, each
   *  badged with its owner (Personal / Workspace). The dotted-name tree renders
   *  beneath each section. The same tool name can appear under two accounts (NOT
   *  deduped). When false/unset, render one flat tree (unchanged). */
  groupByConnection?: boolean;
}) {
  const {
    tools,
    selectedToolId,
    onSelect,
    onSetPolicy,
    onClearPolicy,
    patternForDisplay = toPolicyPattern,
    policies,
    groupByConnection,
  } = props;
  const exactPatterns = useMemo(() => {
    if (!policies) return new Map<string, ToolPolicyAction>();
    const m = new Map<string, ToolPolicyAction>();
    for (const p of policies) m.set(p.pattern, p.action);
    return m;
  }, [policies]);
  const [search, setSearch] = useState("");
  const searchRef = useRef<HTMLInputElement>(null);
  const selectedRowRef = useRef<HTMLButtonElement>(null);
  const ownerDisplay = useOwnerDisplay();

  const terms = search.trim().toLowerCase().split(/\s+/).filter(Boolean);

  const filteredTools = useMemo(() => {
    if (terms.length === 0) return tools;
    return tools.filter((t) => {
      const corpus = [t.name, t.description ?? ""].join(" ").toLowerCase();
      return terms.every((term) => corpus.includes(term));
    });
  }, [tools, terms]);

  // Account sections (only when grouping). Each carries its already-filtered
  // tools so empty sections drop out under an active search.
  const accountGroups = useMemo(
    () => (groupByConnection ? buildAccountGroups(filteredTools) : []),
    [groupByConnection, filteredTools],