Function ToolLeafRow

packages/react/src/components/tool-tree.tsx:687–758

(props: {
  buttonRef?: React.Ref<HTMLButtonElement>;
  tool: ToolSummary;
  depth: number;
  active: boolean;
  onSelect: () => void;
  search: string;
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string) => void;
  patternForDisplay: (displayPattern: string) => string;
  exactRule?: ToolPolicyAction;
})

}

function ToolLeafRow(props: {
  buttonRef?: React.Ref<HTMLButtonElement>;
  tool: ToolSummary;
  depth: number;
  active: boolean;
  onSelect: () => void;
  search: string;
  onSetPolicy?: (pattern: string, action: ToolPolicyAction) => void;
  onClearPolicy?: (pattern: string) => void;
  patternForDisplay: (displayPattern: string) => string;
  exactRule?: ToolPolicyAction;
}) {
  const label = props.tool.name.split(".").pop() ?? props.tool.name;
  const indicator = indicatorFor(props.tool.policy);
  const showActions = !!props.onSetPolicy;
  return (
    <div
      className={cn(
        "group/tt-row relative flex items-stretch",
        props.active
          ? "bg-primary/15 ring-1 ring-inset ring-primary/40 hover:bg-primary/20"
          : "hover:bg-accent/60",
        props.tool.policy.action === "block" && !props.active && "opacity-70",
      )}
    >
      <Button
        ref={props.buttonRef}
        variant="ghost"
        onClick={props.onSelect}
        className={cn(
          rowBaseClasses,
          props.active
            ? "text-foreground hover:bg-transparent"
            : "text-foreground/80 hover:bg-transparent hover:text-foreground",
        )}
        style={{
          paddingLeft: rowIndent(props.depth) + 20,
          paddingRight: showActions ? 36 : 12,
        }}
      >
        <span className="flex-1 truncate text-left font-mono">
          {highlightMatch(label, props.search)}
        </span>
        {indicator && (
          <span
            aria-label={indicator.label}
            title={indicator.label}
            className={cn("shrink-0 size-1.5 rounded-full", indicator.className)}
          />
        )}
      </Button>
      {showActions && (
        <div
          className={cn(
            "absolute right-1.5 top-1/2 -translate-y-1/2 transition-opacity",
            props.exactRule
              ? "opacity-100"
              : "opacity-0 group-hover/tt-row:opacity-100 focus-within:opacity-100",